From 87e6d3ede93b63d7649c69f4073d00ca25c472f1 Mon Sep 17 00:00:00 2001
From: doomtube <doomtube@realms.pub>
Date: Thu, 8 Jan 2026 13:55:33 -0500
Subject: [PATCH] fixes lol

---
 frontend/src/app.css               | 45 ++++++++++++++++++++++++++++--
 frontend/src/routes/+layout.svelte | 21 ++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index ed8a61b..5374924 100644
--- a/frontend/src/app.css
+++ b/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 {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index b2b6efa..d570d2e 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/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}