fixed the mobile UI bugs

src/app/components/ThemeScript.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useRef } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+
+// Runs before paint so the saved theme and the phone/desktop split are applied
+// without a flash. It is injected with useServerInsertedHTML so the <script>
+// lives in the SSR HTML stream instead of inside the React tree — React 19
+// logs an error for script tags rendered by components on the client.
+const INIT_SCRIPT = `(function(){try{var t=localStorage.getItem('theme');if(t==='terminal'||t==='skeuo'){document.documentElement.setAttribute('data-theme',t);}var ua=navigator.userAgent||'';var phone=/(iPhone|iPod|Android.+Mobile|Windows Phone|IEMobile|BlackBerry|Opera Mini|Mobile)/i.test(ua);document.documentElement.setAttribute('data-device',phone?'phone':'desktop');}catch(e){}})();`;
+
+export default function ThemeScript() {
+  // useServerInsertedHTML can fire several times during a single render pass;
+  // guard so the script only lands in the document once.
+  const inserted = useRef(false);
+
+  useServerInsertedHTML(() => {
+    if (inserted.current) return null;
+    inserted.current = true;
+    return (
+      <script
+        id="theme-init"
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: INIT_SCRIPT }}
+      />
+    );
+  });
+
+  return null;
+}