theme: fix input zoom in on iOS

src/material/theme.css

@@ -18,6 +18,12 @@
       --body-size: 0.9375rem;
     }
   }
+
+  input,
+  textarea {
+    /* iOS will zoom in if the font-size is smaller than 16px (or 1rem? i dont know) */
+    font-size: 1rem;
+  }
 }
 
 [lang^="zh"],
@@ -99,6 +105,7 @@
   --tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);
 
   @media (max-width: 300px) {
+
     /* XS screen, like wearables */
     & {
       --tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std);
@@ -106,6 +113,7 @@
   }
 
   @media (max-width: 600px) {
+
     /* Mobile */
     & {
       --tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std);
@@ -113,6 +121,7 @@
   }
 
   @media (max-width: 1200px) {
+
     /* Tablet */
     & {
       --tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std);
@@ -139,4 +148,4 @@
 
 body {
   font-size: var(--body-size, 1rem);
-}
+}

src/timelines/TootBottomSheet.tsx

@@ -128,7 +128,7 @@ const TootBottomSheet: Component = (props) => {
             <Avatar src={profile()!.inf?.avatar} />
             <textarea
               placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
-              style={{ width: "100%", "font-size": "1rem", border: "none" }}
+              style={{ width: "100%", border: "none" }}
             ></textarea>
             <IconButton>
               <Send />