Fix: increase text sizes to fix iphone a11y zoom

src/app/[locale]/(auth)/sign-in/_components/form/index.tsx

@@ -75,18 +75,18 @@ const SignInForm = () => {
         />
       </div>
 
-      <div className="flex flex-col gap-y-2">
+      <div className="flex flex-col gap-y-4">
         <Button type="submit" disabled={isPending} variant="outline">
           {isPending
             ? t("auth.signIn.actions.signInPending")
             : t("auth.signIn.actions.signIn")}
         </Button>
 
-        <div className="flex flex-row items-center justify-between">
+        <div className="mx-1 flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
           <Link
             href={Routes.PASSWORD_FORGOTTEN}
             className={cn(
-              "font-title ml-1 rounded px-2 py-1 text-sm font-medium",
+              "font-title rounded font-medium",
               "focus-visible:outline-foreground",
             )}
           >
@@ -96,7 +96,7 @@ const SignInForm = () => {
           <Link
             href={Routes.SIGN_UP}
             className={cn(
-              "font-title mr-1 rounded px-2 py-1 text-sm font-medium",
+              "font-title rounded font-medium",
               "focus-visible:outline-foreground",
             )}
           >

src/app/[locale]/(auth)/sign-in/page.tsx

@@ -61,7 +61,7 @@ const SignInPage = async () => {
           <>
             <p
               className={cn(
-                "font-title flex flex-row items-center gap-x-1.5 text-xs opacity-50",
+                "font-title flex flex-row items-center gap-x-1.5 opacity-50",
                 "before:bg-foreground before:h-px before:w-4",
                 "after:bg-foreground after:h-px after:w-4",
               )}

src/app/[locale]/(auth)/sign-up/_components/form/index.tsx

@@ -126,18 +126,18 @@ const SignUpForm = () => {
         </div>
       </div>
 
-      <div className="flex flex-col gap-y-2">
+      <div className="flex flex-col gap-y-4">
         <Button type="submit" disabled={isPending} variant="outline">
           {isPending
             ? t("auth.signUp.actions.signUpPending")
             : t("auth.signUp.actions.signUp")}
         </Button>
 
-        <div className="flex flex-row-reverse items-center justify-between">
+        <div className="mx-1 flex flex-row-reverse flex-wrap-reverse items-center justify-between gap-x-4 gap-y-1">
           <Link
             href={Routes.SIGN_IN}
             className={cn(
-              "font-title mr-1 rounded px-2 py-1 text-sm font-medium",
+              "font-title rounded font-medium",
               "focus-visible:outline-foreground",
             )}
           >

src/app/[locale]/(auth)/sign-up/page.tsx

@@ -47,7 +47,7 @@ const SignUpPage = async () => {
           <>
             <p
               className={cn(
-                "font-title flex flex-row items-center gap-x-1.5 text-xs opacity-50",
+                "font-title flex flex-row items-center gap-x-1.5 opacity-50",
                 "before:bg-foreground before:h-px before:w-4",
                 "after:bg-foreground after:h-px after:w-4",
               )}

src/app/[locale]/(business)/(with-header)/_components/header/search-bar/index.tsx

@@ -165,7 +165,7 @@ const HeaderSearchBar = ({
               {platform.isDetected && !inputHasFocus ? (
                 <kbd
                   className={cn(
-                    "font-title border-foreground absolute top-1/2 right-6 -translate-y-1/2 flex-row items-center rounded border-2 px-2 py-1 opacity-25",
+                    "font-title border-foreground absolute top-1/2 right-6 -translate-y-1/2 flex-row items-center rounded border-2 px-1.5 opacity-25",
                     "bg-stone-200 dark:bg-stone-800",
                     "hidden sm:flex",
                     platform.isMac ? "gap-x-1" : "gap-x-0.5",
@@ -177,13 +177,13 @@ const HeaderSearchBar = ({
                     </span>
                   ) : (
                     <>
-                      <span className="text-xs">Ctrl</span>
+                      <span>Ctrl</span>
 
-                      <span className="text-xs">+</span>
+                      <span>+</span>
                     </>
                   )}
 
-                  <span className="text-xs">K</span>
+                  <span>K</span>
                 </kbd>
               ) : null}
             </div>

src/app/[locale]/(business)/(with-header)/breweries/[brewerySlug]/_components/brewery-card/index.tsx

@@ -140,8 +140,8 @@ const BreweryCard = ({ brewery }: BreweryCardProps) => {
           {brewery.description ? (
             <p
               ref={descriptionRef}
-              className={cn("text-left", "text-xs md:text-sm", {
-                "line-clamp-4": !isExpanded,
+              className={cn("text-left", "text-sm md:text-base", {
+                "line-clamp-3": !isExpanded,
               })}
             >
               {(() => {
@@ -160,7 +160,7 @@ const BreweryCard = ({ brewery }: BreweryCardProps) => {
 
           {hasDetails ? (
             <CollapsibleContent
-              className={cn("contents", "text-xs md:text-sm")}
+              className={cn("contents", "text-sm md:text-base")}
             >
               <div className="flex flex-col gap-y-2">
                 {brewery.websiteLink ? (

src/app/[locale]/(business)/(with-header)/breweries/[brewerySlug]/beers/[beerSlug]/_components/beer-card/index.tsx

@@ -80,7 +80,7 @@ const BeerCard = async ({
             <p
               className={cn(
                 "gap-x-paragraph-space flex min-w-0 flex-row text-nowrap",
-                "text-xs md:text-sm",
+                "text-sm md:text-base",
               )}
             >
               {t.rich("common.beer.brewedBy", {
@@ -128,7 +128,7 @@ const BeerCard = async ({
         </div>
 
         {hasDetails ? (
-          <CollapsibleContent className={cn("contents", "text-xs md:text-sm")}>
+          <CollapsibleContent className="contents">
             {description ? (
               <DescriptionList
                 label={t("beerPage.details.description")}

src/app/[locale]/(business)/(with-header)/users/[username]/_components/user-header/index.tsx

@@ -55,7 +55,7 @@ const UserHeader = async ({ user }: UserHeaderProps) => {
           <div className="flex flex-col md:gap-y-1">
             <h1 className="text-2xl md:text-4xl">{user.username}</h1>
 
-            <p className="text-xs md:text-sm">
+            <p className="text-sm md:text-base">
               {t("profilePage.statistics.reviewCount", {
                 count: user.reviewCount,
               })}

src/app/[locale]/(business)/(without-header)/breweries/[brewerySlug]/beers/[beerSlug]/review/_components/header/index.tsx

@@ -12,8 +12,8 @@ const ReviewFormHeader = ({ beer, className }: ReviewFormHeaderProps) => {
   return (
     <div
       className={cn(
-        "flex flex-col items-center gap-y-6 overflow-hidden px-12 py-14 drop-shadow",
-        "border-b-2 md:rounded md:border-2",
+        "flex flex-col items-center gap-y-4 overflow-hidden px-12 drop-shadow",
+        "border-b-2 py-16 md:rounded md:border-2 md:py-20",
         "bg-primary-50 dark:bg-primary-800",
         className,
       )}
@@ -29,7 +29,7 @@ const ReviewFormHeader = ({ beer, className }: ReviewFormHeaderProps) => {
           className="size-3 @3xl:size-3.5"
         />
 
-        <p className="text-sm @3xl:text-base">{beer.brewery.name}</p>
+        <p className="text-base @3xl:text-lg">{beer.brewery.name}</p>
       </div>
     </div>
   );

src/app/[locale]/(business)/(without-header)/search/_components/tab/beer/result/index.tsx

@@ -33,8 +33,8 @@ const BeerSearchResult = ({
     <div className="flex w-full flex-row items-center gap-x-4">
       <ColoredPintIcon color={color} size={40} className="size-10" />
 
-      <div className="flex flex-col gap-y-1 overflow-hidden">
-        <p className="font-title truncate text-lg">{name}</p>
+      <div className="flex flex-col gap-y-1.5 overflow-hidden">
+        <p className="font-title truncate text-lg leading-none">{name}</p>
 
         <div className="flex flex-row items-center gap-x-1">
           <CountryFlag

src/app/[locale]/(business)/(without-header)/search/_components/tab/brewery/result/index.tsx

@@ -23,21 +23,19 @@ const BrewerySearchResult = ({
   const t = useTranslations();
 
   return (
-    <div className="flex grow flex-col gap-y-1">
-      <div className="flex grow flex-col">
-        <p className="font-title truncate text-lg">{name}</p>
-
-        <div className="flex flex-row gap-x-1">
-          <CountryFlag
-            country={location.country}
-            size={14}
-            className="size-3.5"
-          />
-
-          <p className="text-foreground/62.5 text-sm leading-none">
-            {location.country.name}
-          </p>
-        </div>
+    <div className="flex grow flex-col gap-y-1.5">
+      <p className="font-title truncate text-lg leading-none">{name}</p>
+
+      <div className="flex flex-row gap-x-1">
+        <CountryFlag
+          country={location.country}
+          size={14}
+          className="size-3.5"
+        />
+
+        <p className="text-foreground/62.5 text-sm leading-none">
+          {location.country.name}
+        </p>
       </div>
 
       <Chip className="w-fit truncate">

src/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/page.tsx

@@ -207,7 +207,7 @@ const UserReviewPage = async ({ params }: UserReviewPageProps) => {
               })}
             </p>
 
-            <p className={cn("text-foreground/50", "text-xs md:text-base")}>
+            <p className={cn("text-foreground/50", "text-sm md:text-base")}>
               {formatter.dateTime(review.createdAt, {
                 dateStyle: "short",
                 timeStyle: "short",

src/app/_components/ui/chip-tabs/index.tsx

@@ -66,7 +66,7 @@ const ChipTabTrigger = ({
     <TabsPrimitive.Trigger
       data-slot="chip-tab-trigger"
       className={cn(
-        "rounded-full px-4 py-2.5 text-xs text-nowrap ring-0 outline-none",
+        "rounded-full px-4 py-2.5 text-nowrap ring-0 outline-none",
         "bg-stone-300 data-[state=active]:bg-stone-50 dark:bg-stone-500 dark:data-[state=active]:bg-stone-700",
         "not-data-[state=active]:cursor-pointer",
         "hover:inset-shadow not-data-[state=active]:hover:inset-shadow-primary data-[state=active]:focus-visible:inset-shadow-primary",

src/app/_components/ui/chip/index.tsx

@@ -6,7 +6,7 @@ const Chip = ({ className, children, ...restProps }: ComponentProps<"p">) => {
   return (
     <p
       className={cn(
-        "bg-foreground/7.5 text-foreground/62.5 rounded-full px-2 py-1 text-xs",
+        "bg-foreground/7.5 text-foreground/62.5 rounded-full px-2 py-1 text-sm",
         className,
       )}
       {...restProps}

src/app/_components/ui/description-list/index.tsx

@@ -25,17 +25,14 @@ const DescriptionList = ({
     >
       <dt
         data-slot="description-term"
-        className={cn(
-          "font-title uppercase opacity-50",
-          "text-[10px] md:text-xs",
-        )}
+        className={cn("font-title uppercase opacity-50", "text-xs md:text-sm")}
       >
         {label}
       </dt>
 
       <dd
         data-slot="description-details"
-        className={cn("text-left", "text-xs md:text-sm")}
+        className={cn("text-left", "text-sm md:text-base")}
       >
         {value}
       </dd>

src/app/_components/ui/dropdown-menu/index.tsx

@@ -217,10 +217,7 @@ const DropdownMenuShortcut = ({
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-foreground-muted ml-auto text-xs tracking-widest",
-        className,
-      )}
+      className={cn("text-foreground-muted ml-auto tracking-widest", className)}
       {...restProps}
     />
   );

src/app/_components/ui/file-upload/index.tsx

@@ -123,11 +123,11 @@ const FileUpload = ({
               <div className="flex flex-col items-center justify-center px-4 py-3 text-center">
                 <ImageUpIcon className="mb-4 size-12 stroke-1" />
 
-                <p className="mb-1.5 text-sm font-medium">
+                <p className="mb-1.5 font-medium">
                   {t("form.fields.fileUpload.ctaImageSingle")}
                 </p>
 
-                <p className="text-muted-foreground text-xs">
+                <p className="text-muted-foreground text-sm">
                   {t("form.fields.fileUpload.description", {
                     allowedExtensions:
                       extensions.length === 1

src/app/_components/ui/form-error/index.tsx

@@ -21,7 +21,7 @@ const FormError = ({ errors, className, ...restProps }: FormErrorProps) => {
     <p
       data-slot="form-error"
       className={cn(
-        "text-destructive mt-1 -mb-1 flex h-0 flex-col pl-3 text-xs",
+        "text-destructive mt-1 -mb-1 flex h-0 flex-col pl-3 text-sm",
         className,
       )}
       {...restProps}

src/app/_components/ui/input/index.tsx

@@ -30,7 +30,6 @@ const Input = ({ className, type, ...restProps }: ComponentProps<"input">) => {
         type={type === "password" && showPassword ? "text" : type}
         className={cn(
           "bg-background border-foreground flex w-full min-w-0 rounded border-2 px-5 py-4",
-          "text-sm md:text-base",
           "dark:bg-stone-700",
           "placeholder:text-foreground-muted placeholder:select-none",
           "disabled:bg-background-muted disabled:pointer-events-none disabled:cursor-not-allowed",

src/app/_components/ui/tab/index.tsx

@@ -15,7 +15,7 @@ const Tab = ({
   return (
     <button
       className={cn(
-        "rounded-full px-4 py-2.5 text-xs focus-visible:ring-0 focus-visible:outline-none",
+        "rounded-full px-4 py-2.5 text-sm focus-visible:ring-0 focus-visible:outline-none",
         active
           ? "bg-background border-2 drop-shadow focus-visible:bg-stone-200"
           : "hover:inset-shadow focus-visible:inset-shadow cursor-pointer bg-stone-300 dark:bg-stone-600",