fix: set global input font size to avoid iPhone auto zoom in

recally-io · Aug 24, 2024 · 762b147 · 762b147
1 parent ef3f88b
commit 762b147
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/web/src/components/layout.jsx b/web/src/components/layout.jsx
@@ -1,4 +1,4 @@
-import { AppShell, createTheme, MantineProvider } from "@mantine/core";
+import { AppShell, createTheme, Input, MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import { ModalsProvider } from "@mantine/modals";
 import { Notifications } from "@mantine/notifications";
@@ -10,7 +10,17 @@ import { queryClient } from "../libs/api";
 import useStore from "../libs/store";
 import Header from "./header";
 
-const theme = createTheme({});
+const theme = createTheme({
+  components: {
+    Input: Input.extend({
+      styles: {
+        input: {
+          fontSize: "16px",
+        },
+      },
+    }),
+  },
+});
 
 export default function Layout({ main, nav = null, header = null }) {
   let haveNav = nav !== null;

diff --git a/web/src/components/thread-input.jsx b/web/src/components/thread-input.jsx
@@ -181,7 +181,6 @@ export function ThreadChatInput() {
             maxRows={5}
             autosize
             w="100%"
-            styles={{ input: { fontSize: "16px" } }} // Prevent auto-zoom on iPhone
             disabled={sendMessage.isPending}
             onKeyDown={async (e) => {
               // Shift + Enter to send