From 140fd6f0522542be177679276fb6e5c9f4ec8b90 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Jan 2026 10:00:39 +0000
Subject: [PATCH] fix(settings): fill container width on desktop and add mobile
 back nav

- Remove max-w-2xl constraint from SettingsContainer to fill available width
- Add back button to settings view visible only on mobile (lg:hidden)
- Pass onBack callback from BookmarkList to enable navigation back to bookmarks
---
 src/components/bookmarks/BookmarkList.jsx |  2 +-
 src/components/ui/SettingsLayout.jsx      |  2 +-
 src/components/ui/SettingsView.jsx        | 11 ++++++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/bookmarks/BookmarkList.jsx b/src/components/bookmarks/BookmarkList.jsx
index 1aa8e71..994357b 100644
--- a/src/components/bookmarks/BookmarkList.jsx
+++ b/src/components/bookmarks/BookmarkList.jsx
@@ -204,7 +204,7 @@ export function BookmarkList() {
 
         {currentView === 'settings' && (
           <div className="flex-1 overflow-y-auto bg-background">
-            <SettingsView />
+            <SettingsView onBack={() => setCurrentView('bookmarks')} />
           </div>
         )}
       </div>
diff --git a/src/components/ui/SettingsLayout.jsx b/src/components/ui/SettingsLayout.jsx
index 3446934..2f7253b 100644
--- a/src/components/ui/SettingsLayout.jsx
+++ b/src/components/ui/SettingsLayout.jsx
@@ -44,7 +44,7 @@ export function SettingCard({ children, className }) {
 
 export function SettingsContainer({ children, className }) {
   return (
-    <div className={cn("max-w-2xl mx-auto px-6 py-8", className)}>
+    <div className={cn("w-full px-6 py-8", className)}>
       {children}
     </div>
   )
diff --git a/src/components/ui/SettingsView.jsx b/src/components/ui/SettingsView.jsx
index 4d54597..ac86d4e 100644
--- a/src/components/ui/SettingsView.jsx
+++ b/src/components/ui/SettingsView.jsx
@@ -8,7 +8,7 @@ import { SettingSection, SettingRow, SettingCard, SettingsContainer } from './Se
 import { RelayConfigurationView } from './RelayConfigurationView'
 import { DiagnosticsView } from './DiagnosticsView'
 
-export function SettingsView() {
+export function SettingsView({ onBack }) {
   const [showPairing, setShowPairing] = useState(false)
   const [showRelayConfig, setShowRelayConfig] = useState(false)
   const [showDiagnostics, setShowDiagnostics] = useState(false)
@@ -123,6 +123,15 @@ export function SettingsView() {
 
   return (
     <SettingsContainer>
+      {onBack && (
+        <button
+          onClick={onBack}
+          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground -ml-1 mb-2 transition-colors lg:hidden"
+        >
+          <ChevronLeft className="w-4 h-4" />
+          Bookmarks
+        </button>
+      )}
       <h1 className="text-2xl font-semibold mb-8">Settings</h1>
 
       <SettingSection title="Sync">