Update styles to be more mobile friendly, add favicon

src/components/BeerById/BeerInfoHeader.tsx

@@ -40,10 +40,7 @@ const BeerInfoHeader: FC<{
           </header>
           {isPostOwner && (
             <div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
-              <Link
-                href={`/beers/${beerPost.id}/edit`}
-                className="btn-outline btn-sm btn"
-              >
+              <Link href={`/beers/${beerPost.id}/edit`} className="btn-ghost btn-xs btn">
                 <FaRegEdit className="text-xl" />
               </Link>
             </div>

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -52,7 +52,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
           {user ? (
             <BeerCommentForm beerPost={beerPost} mutate={mutate} />
           ) : (
-            <div className="flex h-full flex-col items-center justify-center">
+            <div className="flex h-52 flex-col items-center justify-center">
               <span className="text-lg font-bold">Log in to leave a comment.</span>
             </div>
           )}
@@ -73,7 +73,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
             {!!comments.length && (
               <div className="card bg-base-300 pb-6">
                 {comments.map((comment, index) => {
-                  const isLastComment = index === comments.length - 1;
+                  const isPenulitmateComment = index === comments.length - 2;
 
                   /**
                    * Attach a ref to the last comment in the list. When it comes into
@@ -81,7 +81,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
                    */
                   return (
                     <div
-                      ref={isLastComment ? lastCommentRef : undefined}
+                      ref={isPenulitmateComment ? lastCommentRef : undefined}
                       key={comment.id}
                     >
                       <CommentCardBody comment={comment} mutate={mutate} />
@@ -94,9 +94,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
                    * If there are more comments to load, show a loading component with a
                    * skeleton loader and a loading spinner.
                    */
-                  !!isLoadingMore && (
-                    <LoadingComponent length={Math.floor(PAGE_SIZE / 2)} />
-                  )
+                  !!isLoadingMore && <LoadingComponent length={PAGE_SIZE} />
                 }
 
                 {

src/components/BeerById/BeerRecommendations.tsx

@@ -20,13 +20,13 @@ const BeerRecommendations: FunctionComponent<BeerRecommendationsProps> = ({
                 </h2>
               </Link>
               <Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">
-                <p className="truncate text-lg font-semibold lg:text-xl">
+                <p className="text-md truncate font-semibold lg:text-xl">
                   {beerPost.brewery.name}
                 </p>
               </Link>
             </div>
 
-            <div className="text-md space-x-3 lg:text-lg">
+            <div className="space-x-3 text-sm lg:text-lg">
               <span>{beerPost.abv}% ABV</span>
               <span>{beerPost.ibu} IBU</span>
             </div>

src/components/BeerById/CommentCardBody.tsx

@@ -35,7 +35,7 @@ const CommentCardDropdown: FC<CommentCardProps> = ({ comment, mutate }) => {
   };
 
   return (
-    <div className="dropdown">
+    <div className="dropdown dropdown-end">
       <label tabIndex={0} className="btn-ghost btn-sm btn m-1">
         <FaEllipsisH />
       </label>
@@ -45,7 +45,12 @@ const CommentCardDropdown: FC<CommentCardProps> = ({ comment, mutate }) => {
       >
         <li>
           {isCommentOwner ? (
-            <button onClick={handleDelete}>Delete</button>
+            <>
+              <button type="button">Edit</button>
+              <button type="button" onClick={handleDelete}>
+                Delete
+              </button>
+            </>
           ) : (
             <button>Report</button>
           )}