[questions][ui] improve mobile back navigation

apps/portal/src/components/questions/layout/BackButtonLayout.tsx

@@ -0,0 +1,30 @@
+import type { PropsWithChildren } from 'react';
+import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
+import { Button } from '@tih/ui';
+
+export type BackButtonLayoutProps = PropsWithChildren<{
+  href: string;
+}>;
+
+export default function BackButtonLayout({
+  href,
+  children,
+}: BackButtonLayoutProps) {
+  return (
+    <div className="flex w-full flex-1 flex-col items-stretch gap-4 p-4 lg:flex-row">
+      <div>
+        <Button
+          addonPosition="start"
+          display="inline"
+          href={href}
+          icon={ArrowSmallLeftIcon}
+          label="Back"
+          variant="secondary"
+        />
+      </div>
+      <div className="flex w-full justify-center overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  );
+}

apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx

@@ -2,12 +2,12 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, TextArea } from '@tih/ui';
 
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
+import BackButtonLayout from '~/components/questions/layout/BackButtonLayout';
 import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
 import SortOptionsSelect from '~/components/questions/SortOptionsSelect';
 
@@ -104,18 +104,8 @@ export default function QuestionPage() {
           {answer.content} - {APP_TITLE}
         </title>
       </Head>
-      <div className="flex w-full flex-1 items-stretch pb-4">
+      <BackButtonLayout
-        <div className="flex items-baseline gap-2 py-4 pl-4">
+        href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}>
-          <Button
-            addonPosition="start"
-            display="inline"
-            href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}
-            icon={ArrowSmallLeftIcon}
-            label="Back"
-            variant="secondary"
-          />
-        </div>
-        <div className="flex w-full  justify-center overflow-y-auto py-4 px-5">
         <div className="flex max-w-7xl flex-1 flex-col gap-2">
           <FullAnswerCard
             answerId={answer.id}
@@ -179,8 +169,7 @@ export default function QuestionPage() {
             </div>
           </div>
         </div>
-        </div>
+      </BackButtonLayout>
-      </div>
     </>
   );
 }

apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

@@ -2,13 +2,13 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, Collapsible, HorizontalDivider, TextArea } from '@tih/ui';
 
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullQuestionCard from '~/components/questions/card/question/FullQuestionCard';
 import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
+import BackButtonLayout from '~/components/questions/layout/BackButtonLayout';
 import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
 import SortOptionsSelect from '~/components/questions/SortOptionsSelect';
 
@@ -182,18 +182,7 @@ export default function QuestionPage() {
           {question.content} - {APP_TITLE}
         </title>
       </Head>
-      <div className="flex w-full flex-1 items-stretch pb-4">
+      <BackButtonLayout href="/questions/browse">
-        <div className="flex items-baseline gap-2 py-4 pl-4">
-          <Button
-            addonPosition="start"
-            display="inline"
-            href="/questions/browse"
-            icon={ArrowSmallLeftIcon}
-            label="Back"
-            variant="secondary"
-          />
-        </div>
-        <div className="flex w-full justify-center overflow-y-auto py-4 px-5">
         <div className="flex max-w-7xl flex-1 flex-col gap-2">
           <div className="flex flex-col gap-2 rounded-md border bg-white p-4">
             <FullQuestionCard
@@ -256,9 +245,7 @@ export default function QuestionPage() {
                     <PaginationLoadMoreButton query={commentInfiniteQuery} />
                     <form
                       className="mt-4"
-                        onSubmit={handleCommentSubmitClick(
+                      onSubmit={handleCommentSubmitClick(handleSubmitComment)}>
-                          handleSubmitComment,
-                        )}>
                       <TextArea
                         {...commentRegister('commentContent', {
                           minLength: 1,
@@ -342,8 +329,7 @@ export default function QuestionPage() {
           )}
           <PaginationLoadMoreButton query={answerInfiniteQuery} />
         </div>
-        </div>
+      </BackButtonLayout>
-      </div>
     </>
   );
 }