fixed the mobile UI bugs

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 // Removed unused google fonts since we use local Custom Mono
 import "./globals.css";
+import ThemeScript from "./components/ThemeScript";
 
 export const metadata: Metadata = {
   title: "dvorakmortonxd.dev",
@@ -25,14 +26,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" data-theme="skeuo" suppressHydrationWarning>
-      <head>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `(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){}})();`,
-          }}
-        />
-      </head>
       <body className="antialiased">
+        <ThemeScript />
         {children}
       </body>
     </html>