Updated styles to better fit mobile layout

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>

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
         </>
       )}

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>

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