Improve settings view navigation and layout responsiveness

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>

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>
   )

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">