fixes lol

frontend/src/app.css

@@ -79,6 +79,15 @@ body {
     -ms-overflow-style: none; /* IE/Edge */
 }
 
+/* Safe area support for notched devices (iPhone X+) */
+@supports (padding: max(0px)) {
+    body {
+        padding-left: env(safe-area-inset-left);
+        padding-right: env(safe-area-inset-right);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}
+
 body::-webkit-scrollbar {
     display: none; /* Chrome/Safari/Opera */
 }
@@ -338,16 +347,48 @@ html, body, #app {
     .container {
         padding: 1rem;
     }
-    
+
     .nav-links {
         flex-wrap: wrap;
         gap: 1rem;
     }
-    
+
     .tabs {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }
+
+    .table {
+        display: block;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+/* Small device optimizations */
+@media (max-width: 480px) {
+    .container {
+        padding: 0.75rem;
+    }
+
+    .auth-container {
+        margin: 2rem auto;
+        padding: 1.5rem;
+        border-radius: 0;
+        border-left: none;
+        border-right: none;
+    }
+
+    .modal-content {
+        width: 100%;
+        max-width: 100%;
+        border-radius: 0;
+        max-height: 100vh;
+    }
+
+    .grid {
+        grid-template-columns: 1fr;
+    }
 }
 
 .avatar {

frontend/src/routes/+layout.svelte

@@ -443,6 +443,27 @@
         font-weight: 500;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }
+
+    /* Mobile optimizations */
+    @media (max-width: 480px) {
+        .nav-container {
+            padding: 0 1rem;
+        }
+
+        .nav-brand-logo {
+            max-height: 28px;
+            max-width: 100px;
+        }
+
+        .dropdown {
+            position: fixed;
+            right: 0.5rem;
+            left: 0.5rem;
+            min-width: unset;
+            width: auto;
+            max-width: calc(100vw - 1rem);
+        }
+    }
 </style>
 
 {#if !isPopoutPage}