From 7b044e11c32f0f1a1ec94f6b167620fdddfae39a Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 7 Nov 2022 23:08:49 +0800
Subject: [PATCH] [questions][ui] improve browse mobile ui

---
 .../questions/QuestionSearchBar.tsx           | 48 ++++++-----
 .../card/question/BaseQuestionCard.tsx        | 80 ++++++++++++++-----
 apps/portal/src/pages/questions/browse.tsx    |  2 +-
 3 files changed, 91 insertions(+), 39 deletions(-)

diff --git a/apps/portal/src/components/questions/QuestionSearchBar.tsx b/apps/portal/src/components/questions/QuestionSearchBar.tsx
index bafcb3cb..79f89316 100644
--- a/apps/portal/src/components/questions/QuestionSearchBar.tsx
+++ b/apps/portal/src/components/questions/QuestionSearchBar.tsx
@@ -20,31 +20,43 @@ export default function QuestionSearchBar({
   ...sortOptionsSelectProps
 }: QuestionSearchBarProps) {
   return (
-    <div className="flex flex-col items-stretch gap-x-4 gap-y-2 lg:flex-row lg:items-end">
-      <div className="flex-1 ">
-        <TextInput
-          isLabelHidden={true}
-          label="Search by content"
-          placeholder="Search by content"
-          startAddOn={MagnifyingGlassIcon}
-          startAddOnType="icon"
-          value={query}
-          onChange={(value) => {
-            onQueryChange(value);
-          }}
-        />
-      </div>
-      <div className="flex items-end justify-end gap-4">
-        <SortOptionsSelect {...sortOptionsSelectProps} />
-        <div className="lg:hidden">
+    <div className="flex flex-col items-stretch gap-x-4 gap-y-4 lg:flex-row lg:items-end">
+      <div className="flex flex-1 gap-2">
+        <div className="flex-1">
+          <TextInput
+            isLabelHidden={true}
+            label="Search by content"
+            placeholder="Search by content"
+            startAddOn={MagnifyingGlassIcon}
+            startAddOnType="icon"
+            value={query}
+            onChange={(value) => {
+              onQueryChange(value);
+            }}
+          />
+        </div>
+        <div className="sm:hidden">
           <Button
             addonPosition="start"
             icon={AdjustmentsHorizontalIcon}
-            label="Filter options"
+            isLabelHidden={true}
+            label="Filters"
             variant="tertiary"
             onClick={onFilterOptionsToggle}
           />
         </div>
+        <div className="hidden sm:block lg:hidden">
+          <Button
+            addonPosition="start"
+            icon={AdjustmentsHorizontalIcon}
+            label="Filters"
+            variant="tertiary"
+            onClick={onFilterOptionsToggle}
+          />
+        </div>
+      </div>
+      <div className="flex items-end justify-end gap-4">
+        <SortOptionsSelect {...sortOptionsSelectProps} />
       </div>
     </div>
   );
diff --git a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
index 77b7f5c9..0aa3d31d 100644
--- a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
@@ -177,12 +177,26 @@ export default function BaseQuestionCard({
   const cardContent = (
     <>
       {showVoteButtons && (
-        <VotingButtons
-          upvoteCount={upvoteCount}
-          vote={vote}
-          onDownvote={handleDownvote}
-          onUpvote={handleUpvote}
-        />
+        <>
+          <div className="md:hidden">
+            <VotingButtons
+              size="sm"
+              upvoteCount={upvoteCount}
+              vote={vote}
+              onDownvote={handleDownvote}
+              onUpvote={handleUpvote}
+            />
+          </div>
+          <div className="hidden md:block">
+            <VotingButtons
+              size="md"
+              upvoteCount={upvoteCount}
+              vote={vote}
+              onDownvote={handleDownvote}
+              onUpvote={handleUpvote}
+            />
+          </div>
+        </>
       )}
       <div className="flex flex-1 flex-col items-start gap-2">
         <div className="flex items-baseline justify-between self-stretch">
@@ -230,22 +244,48 @@ export default function BaseQuestionCard({
             showCreateEncounterButton) && (
             <div className="flex gap-2">
               {showAnswerStatistics && (
-                <Button
-                  addonPosition="start"
-                  icon={ChatBubbleBottomCenterTextIcon}
-                  label={`${answerCount} answers`}
-                  size="sm"
-                  variant="tertiary"
-                />
+                <>
+                  <div className="sm:hidden">
+                    <Button
+                      addonPosition="start"
+                      icon={ChatBubbleBottomCenterTextIcon}
+                      label={`${answerCount}`}
+                      size="sm"
+                      variant="tertiary"
+                    />
+                  </div>
+                  <div className="hidden sm:block">
+                    <Button
+                      addonPosition="start"
+                      icon={ChatBubbleBottomCenterTextIcon}
+                      label={`${answerCount} answers`}
+                      size="sm"
+                      variant="tertiary"
+                    />
+                  </div>
+                </>
               )}
               {showReceivedStatistics && (
-                <Button
-                  addonPosition="start"
-                  icon={EyeIcon}
-                  label={`${receivedCount} received this`}
-                  size="sm"
-                  variant="tertiary"
-                />
+                <>
+                  <div className="sm:hidden">
+                    <Button
+                      addonPosition="start"
+                      icon={EyeIcon}
+                      label={`${receivedCount}`}
+                      size="sm"
+                      variant="tertiary"
+                    />
+                  </div>
+                  <div className="hidden sm:block">
+                    <Button
+                      addonPosition="start"
+                      icon={EyeIcon}
+                      label={`${receivedCount} received this`}
+                      size="sm"
+                      variant="tertiary"
+                    />
+                  </div>
+                </>
               )}
               {showCreateEncounterButton && (
                 <Button
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index 7a89ab34..87eaea27 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -503,7 +503,7 @@ export default function QuestionsBrowsePage() {
       <main className="flex h-[calc(100vh_-_64px)] flex-1 flex-col items-stretch">
         <div className="flex h-full flex-1">
           <section className="min-h-0 flex-1 overflow-auto">
-            <div className="my-4 mx-auto flex max-w-3xl flex-col items-stretch justify-start gap-6">
+            <div className="my-4 mx-auto flex max-w-3xl flex-col items-stretch justify-start gap-6 p-4">
               <ContributeQuestionCard
                 onSubmit={(data) => {
                   const { cityId, countryId, stateId } = data.location;