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] 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>