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

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 overflow-hidden text-ellipsis whitespace-normal text-2xl font-bold lg:text-3xl">
+            <h2 className="link-hover link overflow-hidden whitespace-normal text-2xl font-bold lg:truncate lg:text-3xl">
               {post.name}
             </h2>
           </Link>
           <Link href={`/breweries/${post.brewery.id}`}>
-            <h3 className="text-md link-hover link overflow-hidden text-ellipsis lg:text-xl">
+            <h3 className="text-md link-hover link whitespace-normal lg:truncate lg:text-xl">
               {post.brewery.name}
             </h3>
           </Link>

src/components/RegisterUserForm.tsx

@@ -48,8 +48,8 @@ const RegisterUserForm: FC = () => {
         )}
       </div>
       <div>
-        <div className="flex flex-row space-x-3">
-          <div className="w-[50%]">
+        <div className="flex flex-col lg:flex-row lg:space-x-3">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="firstName">First name</FormLabel>
               <FormError>{errors.firstName?.message}</FormError>
@@ -66,7 +66,7 @@ const RegisterUserForm: FC = () => {
             </FormSegment>
           </div>
 
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="lastName">Last name</FormLabel>
               <FormError>{errors.lastName?.message}</FormError>
@@ -84,8 +84,8 @@ const RegisterUserForm: FC = () => {
           </div>
         </div>
 
-        <div className="flex flex-row space-x-3">
-          <div className="w-[50%]">
+        <div className="flex flex-col lg:flex-row lg:space-x-3">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="email">email</FormLabel>
               <FormError>{errors.email?.message}</FormError>
@@ -101,7 +101,7 @@ const RegisterUserForm: FC = () => {
               />
             </FormSegment>
           </div>
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="username">username</FormLabel>
               <FormError>{errors.username?.message}</FormError>
@@ -119,8 +119,8 @@ const RegisterUserForm: FC = () => {
           </div>
         </div>
 
-        <div className="flex flex-row space-x-3">
-          <div className="w-[50%]">
+        <div className="flex flex-col lg:flex-row lg:space-x-3">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="password">password</FormLabel>
               <FormError>{errors.password?.message}</FormError>
@@ -136,7 +136,7 @@ const RegisterUserForm: FC = () => {
               />
             </FormSegment>
           </div>
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="confirmPassword">confirm password</FormLabel>
               <FormError>{errors.confirmPassword?.message}</FormError>

src/components/ui/Layout.tsx

@@ -5,7 +5,7 @@ const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div className="flex h-screen flex-col">
       <Navbar />
-      <div className="top-0 h-full flex-1 overflow-x-auto animate-in fade-in">
+      <div className="top-0 h-full w-screen flex-1 overflow-x-auto animate-in fade-in">
         {children}
       </div>
     </div>

src/components/ui/forms/FormPageLayout.tsx

@@ -19,9 +19,9 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
   backLinkText,
 }) => {
   return (
-    <div className="align-center my-20 flex h-fit flex-col items-center justify-center">
-      <div className="w-8/12">
-        <div className="tooltip tooltip-bottom absolute" data-tip={backLinkText}>
+    <div className="align-center my-20 flex flex-col items-center justify-center">
+      <div className="w-10/12 lg:w-8/12 2xl:w-6/12">
+        <div className="tooltip tooltip-right" data-tip={backLinkText}>
           <Link href={backLink} className="btn-ghost btn-sm btn p-0">
             <BiArrowBack className="text-xl" />
           </Link>
@@ -30,7 +30,7 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
           {headingIcon({ className: 'text-4xl' })}{' '}
           <h1 className="text-3xl font-bold">{headingText}</h1>
         </div>
-        <div>{FormComponent}</div>
+        <div className="mt-3">{FormComponent}</div>
       </div>
     </div>
   );