From 25ce928733ab47e676ce91ca29539a1c497a7d31 Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Sun, 8 Jan 2023 06:53:39 +0700
Subject: [PATCH 1/2] fix: improve `TaskControls` UI on mobile

---
 .../src/components/Survey/TaskControls.tsx    | 21 +++++++++++--------
 .../src/components/Survey/TrackedTextarea.tsx |  2 +-
 website/src/components/TaskInfo/TaskInfo.tsx  |  2 +-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx
index 851e659c..ea71467c 100644
--- a/website/src/components/Survey/TaskControls.tsx
+++ b/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: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>
diff --git a/website/src/components/Survey/TrackedTextarea.tsx b/website/src/components/Survey/TrackedTextarea.tsx
index f1691b72..d20107ac 100644
--- a/website/src/components/Survey/TrackedTextarea.tsx
+++ b/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>
   );
diff --git a/website/src/components/TaskInfo/TaskInfo.tsx b/website/src/components/TaskInfo/TaskInfo.tsx
index 86fd2d96..c692e172 100644
--- a/website/src/components/TaskInfo/TaskInfo.tsx
+++ b/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>

From 6e0e820f943af43907c6a907ddce5c60f2ff4945 Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Sun, 8 Jan 2023 06:59:38 +0700
Subject: [PATCH 2/2] fix: desktop regression

---
 website/src/components/Survey/TaskControls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx
index ea71467c..4a6d477a 100644
--- a/website/src/components/Survey/TaskControls.tsx
+++ b/website/src/components/Survey/TaskControls.tsx
@@ -21,7 +21,7 @@ export const TaskControls = (props: TaskControlsProps) => {
   return (
     <section
       className={clsx(
-        "flex-row justify-items-stretch mb-8 p-4 rounded-lg max-w-7xl mx-auto space-y-4 sm:flex",
+        "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,