From b641ab0b8fc020f6c18e50b83f92433fbfd80174 Mon Sep 17 00:00:00 2001
From: "yves.gugger" <yves.gugger@gentwo.com>
Date: Mon, 8 Dec 2025 15:27:42 +0100
Subject: [PATCH] fix: Mobile optimization improvements

Settings Page:
- Horizontal scrollable tabs on mobile (< lg breakpoint)
- Vertical sidebar on desktop (lg+)
- Hide plan info card on mobile (visible in billing tab)

Header:
- Added Settings link in mobile menu for authenticated users

Global CSS:
- Added scrollbar-hide utility class
- Added smooth scrolling for touch devices
- Added touch-pan-x for horizontal scroll areas
- Removed tap highlight on mobile
- select-none utility class
---
 frontend/src/app/globals.css       | 33 ++++++++++++++++++++++++++++++
 frontend/src/app/settings/page.tsx | 28 +++++++++++++++++++++----
 frontend/src/components/Header.tsx | 10 +++++++++
 3 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 30b036d..4e6872e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -140,6 +140,32 @@
   @apply bg-border-hover;
 }
 
+/* Hide scrollbar utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Smooth scrolling for touch devices */
+.scroll-smooth {
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Prevent text selection on interactive elements */
+.select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Touch action for horizontal scrolling */
+.touch-pan-x {
+  touch-action: pan-x;
+}
+
 /* Animation delays */
 .delay-100 { animation-delay: 100ms; }
 .delay-150 { animation-delay: 150ms; }
@@ -148,3 +174,10 @@
 .delay-300 { animation-delay: 300ms; }
 .delay-400 { animation-delay: 400ms; }
 .delay-500 { animation-delay: 500ms; }
+
+/* Mobile tap highlight removal */
+@media (max-width: 640px) {
+  button, a, input, select, textarea {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index 2fbfb33..7549e5a 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -192,9 +192,29 @@ export default function SettingsPage() {
           )}
 
           <div className="flex flex-col lg:flex-row gap-6">
-            {/* Sidebar */}
+            {/* Sidebar - Horizontal scroll on mobile, vertical on desktop */}
             <div className="lg:w-64 shrink-0">
-              <nav className="p-2 bg-background-secondary/50 border border-border rounded-xl">
+              {/* Mobile: Horizontal scroll tabs */}
+              <nav className="lg:hidden flex gap-2 overflow-x-auto pb-2 -mx-4 px-4 scrollbar-hide">
+                {tabs.map((tab) => (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={clsx(
+                      "flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium rounded-xl whitespace-nowrap transition-all",
+                      activeTab === tab.id
+                        ? "bg-foreground text-background"
+                        : "bg-background-secondary/50 text-foreground-muted hover:text-foreground border border-border"
+                    )}
+                  >
+                    <tab.icon className="w-4 h-4" />
+                    {tab.label}
+                  </button>
+                ))}
+              </nav>
+              
+              {/* Desktop: Vertical tabs */}
+              <nav className="hidden lg:block p-2 bg-background-secondary/50 border border-border rounded-xl">
                 {tabs.map((tab) => (
                   <button
                     key={tab.id}
@@ -212,8 +232,8 @@ export default function SettingsPage() {
                 ))}
               </nav>
 
-              {/* Plan info */}
-              <div className="mt-4 p-4 bg-background-secondary/30 border border-border rounded-xl">
+              {/* Plan info - hidden on mobile, shown in content area instead */}
+              <div className="hidden lg:block mt-4 p-4 bg-background-secondary/30 border border-border rounded-xl">
                 <div className="flex items-center gap-2 mb-2">
                   {isProOrHigher ? <Crown className="w-4 h-4 text-accent" /> : <Zap className="w-4 h-4 text-foreground-muted" />}
                   <span className="text-body-sm font-medium text-foreground">{tierName} Plan</span>
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 41d4053..50b63ce 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -151,6 +151,16 @@ export function Header() {
                   <LayoutDashboard className="w-5 h-5" />
                   <span>Dashboard</span>
                 </Link>
+                <Link
+                  href="/settings"
+                  className="flex items-center gap-3 px-4 py-3 text-body-sm text-foreground-muted 
+                             hover:text-foreground hover:bg-background-secondary rounded-xl
+                             transition-all duration-300"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  <Settings className="w-5 h-5" />
+                  <span>Settings</span>
+                </Link>
                 <button
                   onClick={() => {
                     logout()