[questions][ui] improve browse mobile ui

apps/portal/src/components/questions/QuestionSearchBar.tsx

@@ -20,7 +20,8 @@ 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 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}
@@ -34,17 +35,28 @@ export default function QuestionSearchBar({
             }}
           />
         </div>
-      <div className="flex items-end justify-end gap-4">
-        <SortOptionsSelect {...sortOptionsSelectProps} />
-        <div className="lg:hidden">
+        <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>
   );

apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx

@@ -177,12 +177,26 @@ export default function BaseQuestionCard({
   const cardContent = (
     <>
       {showVoteButtons && (
+        <>
+          <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,6 +244,17 @@ export default function BaseQuestionCard({
             showCreateEncounterButton) && (
             <div className="flex gap-2">
               {showAnswerStatistics && (
+                <>
+                  <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}
@@ -237,8 +262,21 @@ export default function BaseQuestionCard({
                       size="sm"
                       variant="tertiary"
                     />
+                  </div>
+                </>
               )}
               {showReceivedStatistics && (
+                <>
+                  <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}
@@ -246,6 +284,8 @@ export default function BaseQuestionCard({
                       size="sm"
                       variant="tertiary"
                     />
+                  </div>
+                </>
               )}
               {showCreateEncounterButton && (
                 <Button

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;