Fix broken PC UI on iOS

src/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import config from "../../public/config/config.json";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -9,10 +8,7 @@ const inter = Inter({
   preload: true,
 });
 
-export const metadata: Metadata = {
-  title: config.name.join(" "),
-  description: "Portfolio",
-};
+export const metadata: Metadata = { title: "Portfolio" };
 
 export default function RootLayout({
   children,

src/components/scene/Scene.tsx

@@ -244,7 +244,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                           currentView === View.PCView ? "auto" : "none"
                         }
                         occlude="blending"
-                        className="w-[1452px] h-[810px] bg-neutral-400"
+                        className="w-[1452px] h-[810px] bg-[#0e1838]"
                         scale={10}
                         position={[0, 170, 0.25]}
                         raycast={
@@ -253,12 +253,8 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                             : undefined
                         }
                         distanceFactor={10}
-                        style={{
-                          backgroundImage: "url(/assets/pc-bg.webp)",
-                          backgroundColor: "#111535",
-                        }}
                       >
-                        <div className="w-full h-full backdrop-blur-md">
+                        <div className="size-full">
                           <PCUI />
                         </div>
                       </Html>

src/components/ui/PCUI.tsx

@@ -308,11 +308,11 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
         <div className="flex h-full space-x-1">
           <Icon
             path={mdiFolder}
-            className="text-neutral-400 h-full w-fit rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
+            className="text-neutral-400 size-8 rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
           />
           <Icon
             path={mdiPin}
-            className="text-neutral-400 h-full w-fit rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
+            className="text-neutral-400 size-8 rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
           />
         </div>
         <p className="absolute left-1/2 transform -translate-x-1/2 text-white">
@@ -321,21 +321,21 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
         <div className="flex h-full space-x-1 ml-auto justify-end">
           <Icon
             path={mdiWindowMinimize}
-            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
           />
           <Icon
             path={mdiWindowRestore}
-            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
           />
           <Icon
             path={mdiWindowClose}
-            className="text-neutral-100 h-full w-fit rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
           />
         </div>
       </div>
       <div className="flex bg-neutral-950 size-full rounded-b-lg text-white">
         <div className="h-full w-fit bg-neutral-950 flex flex-col rounded-bl-lg">
-          <div className="h-14 p-2 pr-1 flex justify-center w-fit space-x-1">
+          <div className="h-14 p-2 pr-1 flex justify-center w-36 space-x-1">
             <Icon
               path={mdiArrowLeft}
               className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -402,7 +402,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
               >
                 <Icon
                   path={mdiHelp}
-                  className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
+                  className="text-neutral-100 size-11 rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
                 />
               </button>
             </div>
@@ -417,7 +417,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
                 defaultValue="/home/ahmed/Desktop/projects"
               />
             </div>
-            <div className="flex justify-center h-full w-fit space-x-1">
+            <div className="flex justify-center h-full w-36 space-x-1">
               <Icon
                 path={mdiBackspace}
                 className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -446,7 +446,7 @@ const Taskbar = () => {
         <div className="flex space-x-4 h-full w-fit items-center">
           <SiArchlinux
             color={SiArchlinuxHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
           />
           <div className="w-8 h-full">
             <div className="w-full h-1/2 bg-blue-900 outline-1 outline-blue-600 transition-all hover:bg-blue-700 hover:outline-blue-400" />
@@ -454,19 +454,19 @@ const Taskbar = () => {
           </div>
           <Icon
             path={mdiFolder}
-            className="text-blue-500 h-full w-fit transition-transform hover:scale-110 border-b-2"
+            className="text-blue-500 size-10 transition-transform hover:scale-110 border-b-2"
           />
           <SiVscodium
             color={SiVscodiumHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
           />
           <Icon
             path={mdiConsole}
-            className="text-neutral-400 h-full w-fit transition-transform hover:scale-110"
+            className="text-neutral-400 size-10 transition-transform hover:scale-110"
           />
           <SiFirefoxbrowser
             color={SiFirefoxbrowserHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
           />
         </div>
         <div className="flex space-x-2 h-full w-fit items-center">