From ed4a60c6b8575dd95f62ebf934ce363e14789377 Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Mon, 17 Apr 2023 21:46:11 -0400
Subject: [PATCH 1/2] Updated styles to better fit mobile layout

---
 src/components/BeerById/BeerInfoHeader.tsx      |  6 +++---
 src/components/BeerById/BeerPostLikeButton.tsx  |  6 +++---
 src/components/BeerById/BeerRecommendations.tsx | 14 ++++++++++----
 src/components/BeerById/CommentCardBody.tsx     |  2 +-
 src/components/BeerIndex/BeerCard.tsx           |  4 ++--
 src/pages/beers/[id]/index.tsx                  |  4 ++--
 src/pages/beers/index.tsx                       |  4 ++--
 7 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/BeerById/BeerInfoHeader.tsx b/src/components/BeerById/BeerInfoHeader.tsx
index 44a1936..990a108 100644
--- a/src/components/BeerById/BeerInfoHeader.tsx
+++ b/src/components/BeerById/BeerInfoHeader.tsx
@@ -27,12 +27,12 @@ const BeerInfoHeader: FC<{
       <article className="card-body">
         <div className="flex justify-between">
           <header>
-            <h1 className="text-4xl font-bold">{beerPost.name}</h1>
-            <h2 className="text-2xl font-semibold">
+            <h1 className="text-2xl font-bold lg:text-4xl">{beerPost.name}</h1>
+            <h2 className="text-lg font-semibold lg:text-2xl">
               by{' '}
               <Link
                 href={`/breweries/${beerPost.brewery.id}`}
-                className="link-hover link text-2xl font-semibold"
+                className="link-hover link font-semibold"
               >
                 {beerPost.brewery.name}
               </Link>
diff --git a/src/components/BeerById/BeerPostLikeButton.tsx b/src/components/BeerById/BeerPostLikeButton.tsx
index 3847ce1..e7d9f42 100644
--- a/src/components/BeerById/BeerPostLikeButton.tsx
+++ b/src/components/BeerById/BeerPostLikeButton.tsx
@@ -31,7 +31,7 @@ const BeerPostLikeButton: FC<{
   return (
     <button
       type="button"
-      className={`btn gap-2 rounded-2xl ${
+      className={`btn-sm btn gap-2 rounded-2xl lg:btn-md ${
         !isLiked ? 'btn-ghost outline' : 'btn-primary'
       }`}
       onClick={() => {
@@ -41,12 +41,12 @@ const BeerPostLikeButton: FC<{
     >
       {isLiked ? (
         <>
-          <FaThumbsUp className="text-2xl" />
+          <FaThumbsUp className="lg:text-2xl" />
           Liked
         </>
       ) : (
         <>
-          <FaRegThumbsUp className="text-2xl" />
+          <FaRegThumbsUp className="lg:text-2xl" />
           Like
         </>
       )}
diff --git a/src/components/BeerById/BeerRecommendations.tsx b/src/components/BeerById/BeerRecommendations.tsx
index e849488..758404a 100644
--- a/src/components/BeerById/BeerRecommendations.tsx
+++ b/src/components/BeerById/BeerRecommendations.tsx
@@ -15,15 +15,21 @@ const BeerRecommendations: FunctionComponent<BeerRecommendationsProps> = ({
           <div key={beerPost.id} className="w-full">
             <div>
               <Link className="link-hover" href={`/beers/${beerPost.id}`} scroll={false}>
-                <h2 className="text-2xl font-bold">{beerPost.name}</h2>
+                <h2 className="truncate text-lg font-bold lg:text-2xl">
+                  {beerPost.name}
+                </h2>
               </Link>
               <Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">
-                <p className="text-lg font-semibold">{beerPost.brewery.name}</p>
+                <p className="truncate text-lg font-semibold lg:text-xl">
+                  {beerPost.brewery.name}
+                </p>
               </Link>
             </div>
 
-            <p>{beerPost.abv}% ABV</p>
-            <p>{beerPost.ibu} IBU</p>
+            <div className="text-md space-x-3 lg:text-lg">
+              <span>{beerPost.abv}% ABV</span>
+              <span>{beerPost.ibu} IBU</span>
+            </div>
           </div>
         ))}
       </div>
diff --git a/src/components/BeerById/CommentCardBody.tsx b/src/components/BeerById/CommentCardBody.tsx
index 613fb0f..bd28efa 100644
--- a/src/components/BeerById/CommentCardBody.tsx
+++ b/src/components/BeerById/CommentCardBody.tsx
@@ -62,7 +62,7 @@ const CommentCardBody: FC<CommentCardProps> = ({ comment, mutate, ref }) => {
 
   return (
     <div className="card-body animate-in fade-in-10" ref={ref}>
-      <div className="flex flex-col justify-between sm:flex-row">
+      <div className="flex flex-row justify-between">
         <div>
           <h3 className="font-semibold sm:text-2xl">
             <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
diff --git a/src/components/BeerIndex/BeerCard.tsx b/src/components/BeerIndex/BeerCard.tsx
index c4d0652..aae767f 100644
--- a/src/components/BeerIndex/BeerCard.tsx
+++ b/src/components/BeerIndex/BeerCard.tsx
@@ -27,12 +27,12 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
       <div className="card-body justify-between">
         <div className="space-y-1">
           <Link href={`/beers/${post.id}`}>
-            <h2 className="link-hover link truncate text-2xl font-bold lg:text-3xl">
+            <h2 className="link-hover link overflow-hidden text-ellipsis whitespace-normal text-2xl font-bold lg:text-3xl">
               {post.name}
             </h2>
           </Link>
           <Link href={`/breweries/${post.brewery.id}`}>
-            <h3 className="text-md link-hover link truncate lg:text-xl">
+            <h3 className="text-md link-hover link overflow-hidden text-ellipsis lg:text-xl">
               {post.brewery.name}
             </h3>
           </Link>
diff --git a/src/pages/beers/[id]/index.tsx b/src/pages/beers/[id]/index.tsx
index 70fdeff..6fca763 100644
--- a/src/pages/beers/[id]/index.tsx
+++ b/src/pages/beers/[id]/index.tsx
@@ -76,10 +76,10 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
               ) : (
                 <Tab.Group>
                   <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl bg-base-300">
-                    <Tab className="tab tab-lg w-1/2 uppercase ui-selected:tab-active">
+                    <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                       Comments
                     </Tab>
-                    <Tab className="tab tab-lg w-1/2 uppercase ui-selected:tab-active">
+                    <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                       Other Beers
                     </Tab>
                   </Tab.List>
diff --git a/src/pages/beers/index.tsx b/src/pages/beers/index.tsx
index 484a367..4348ba1 100644
--- a/src/pages/beers/index.tsx
+++ b/src/pages/beers/index.tsx
@@ -39,12 +39,12 @@ const BeerPage: NextPage = () => {
       </Head>
       <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
         <div className="my-10 flex w-11/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
-          <header className="my-10 flex justify-between">
+          <header className="my-10 flex flex-col justify-between lg:flex-row">
             <div className="space-y-2">
               <h1 className="text-6xl font-bold">The Biergarten Index</h1>
             </div>
             {!!user && (
-              <div>
+              <div className="mt-6 lg:mt-0">
                 <Link href="/beers/create" className="btn-primary btn">
                   Create a new beer post
                 </Link>

From ac90f89dc966a012398e13b65254860cd02eb8f5 Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Mon, 17 Apr 2023 21:57:06 -0400
Subject: [PATCH 2/2] Remove height for comment form card, update page size for
 index page

---
 src/components/BeerById/BeerPostCommentsSection.tsx | 6 +++---
 src/pages/beers/index.tsx                           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BeerById/BeerPostCommentsSection.tsx b/src/components/BeerById/BeerPostCommentsSection.tsx
index fa0bd32..8340f67 100644
--- a/src/components/BeerById/BeerPostCommentsSection.tsx
+++ b/src/components/BeerById/BeerPostCommentsSection.tsx
@@ -46,9 +46,9 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
 
   const sectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
   return (
-    <div className="w-full space-y-3">
-      <div className="card h-96 bg-base-300">
-        <div className="card-body h-full" ref={sectionRef}>
+    <div className="w-full space-y-3" ref={sectionRef}>
+      <div className="card bg-base-300">
+        <div className="card-body h-full">
           {user ? (
             <BeerCommentForm beerPost={beerPost} mutate={mutate} />
           ) : (
diff --git a/src/pages/beers/index.tsx b/src/pages/beers/index.tsx
index 4348ba1..f02693e 100644
--- a/src/pages/beers/index.tsx
+++ b/src/pages/beers/index.tsx
@@ -16,7 +16,7 @@ import { FaArrowUp } from 'react-icons/fa';
 const BeerPage: NextPage = () => {
   const { user } = useContext(UserContext);
 
-  const PAGE_SIZE = 2;
+  const PAGE_SIZE = 6;
 
   const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } = useBeerPosts({
     pageSize: PAGE_SIZE,