Merge pull request #511 from notmd/task_control_mobile_ui

fix: improve `TaskControls` UI on mobile

website/src/components/Survey/TaskControls.tsx

@@ -1,5 +1,6 @@
 import { useColorMode } from "@chakra-ui/react";
 import { Flex } from "@chakra-ui/react";
+import clsx from "clsx";
 import { SkipButton } from "src/components/Buttons/Skip";
 import { SubmitButton } from "src/components/Buttons/Submit";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
@@ -14,18 +15,20 @@ export interface TaskControlsProps {
 }
 
 export const TaskControls = (props: TaskControlsProps) => {
-  const extraClases = props.className || "";
   const { colorMode } = useColorMode();
-
-  const baseClasses = "flex flex-row justify-items-stretch mb-8 p-4 rounded-lg max-w-7xl mx-auto";
-  const taskControlClases =
-    colorMode === "light"
-      ? `${baseClasses} bg-white text-gray-800 shadow-lg ${extraClases}`
-      : `${baseClasses} bg-slate-800 text-slate-400 shadow-xl ring-1 ring-white/10 ring-inset ${extraClases}`;
-
+  const isLightMode = colorMode === "light";
   const endTask = props.tasks[props.tasks.length - 1];
   return (
-    <section className={taskControlClases}>
+    <section
+      className={clsx(
+        "flex-row justify-items-stretch mb-8 p-4 rounded-lg max-w-7xl mx-auto space-y-4 sm:space-y-0 sm:flex",
+        props.className,
+        {
+          "bg-white text-gray-800 shadow-lg": isLightMode,
+          "bg-slate-800 text-slate-400 shadow-xl ring-1 ring-white/10 ring-inset": !isLightMode,
+        }
+      )}
+    >
       <TaskInfo id={props.tasks[0].id} output="Submit your answer" />
       <Flex justify="center" ml="auto" gap={2}>
         <SkipButton>Skip</SkipButton>

website/src/components/Survey/TrackedTextarea.tsx

@@ -28,7 +28,7 @@ export const TrackedTextarea = (props: TrackedTextboxProps) => {
 
   return (
     <Stack direction={"column"}>
-      <Textarea data-cy="reply" value={props.text} onChange={props.onTextChange} {...props.textareaProps} onCapture />
+      <Textarea data-cy="reply" value={props.text} onChange={props.onTextChange} {...props.textareaProps} />
       <Progress size={"md"} rounded={"md"} value={wordCount} colorScheme={progressColor} max={props.thresholds.goal} />
     </Stack>
   );

website/src/components/TaskInfo/TaskInfo.tsx

@@ -1,6 +1,6 @@
 export const TaskInfo = ({ id, output }: { id: string; output: string }) => {
   return (
-    <div className="grid grid-cols-[min-content_auto] gap-x-2  ">
+    <div className="grid grid-cols-[min-content_auto] gap-x-2">
       <b>Prompt</b>
       <span data-cy="task-id">{id}</span>
       <b>Output</b>