🤖 fix: make settings modal responsive for mobile

- Changed modal layout to stack vertically on mobile (flex-col, md:flex-row)
- Converted sidebar to horizontal scrollable tabs on mobile
- Added close button to header on mobile (hidden on desktop)
- Reduced padding and gaps on mobile for better space usage
- Made model form wrap on smaller screens
- Adjusted provider width in model rows for mobile

_Generated with `mux`_

Author: ibetitsmike

src/browser/components/Settings/SettingsModal.tsx

@@ -63,22 +63,31 @@ export function SettingsModal() {
         aria-modal="true"
         aria-labelledby="settings-title"
         onClick={(e) => e.stopPropagation()}
-        className="bg-dark border-border flex h-[70vh] max-h-[600px] w-[90%] max-w-[800px] overflow-hidden rounded-lg border shadow-lg"
+        className="bg-dark border-border flex h-[80vh] max-h-[600px] w-[95%] max-w-[800px] flex-col overflow-hidden rounded-lg border shadow-lg md:h-[70vh] md:flex-row"
       >
-        {/* Sidebar */}
-        <div className="border-border-medium flex w-48 shrink-0 flex-col border-r">
-          <div className="border-border-medium flex h-12 items-center border-b px-4">
+        {/* Sidebar - horizontal tabs on mobile, vertical on desktop */}
+        <div className="border-border-medium flex shrink-0 flex-col border-b md:w-48 md:border-r md:border-b-0">
+          <div className="border-border-medium flex h-12 items-center justify-between border-b px-4 md:justify-start">
             <span id="settings-title" className="text-foreground text-sm font-semibold">
               Settings
             </span>
+            {/* Close button in header on mobile only */}
+            <button
+              type="button"
+              onClick={handleClose}
+              className="text-muted hover:text-foreground rounded p-1 transition-colors md:hidden"
+              aria-label="Close settings"
+            >
+              <X className="h-4 w-4" />
+            </button>
           </div>
-          <nav className="flex-1 overflow-y-auto p-2">
+          <nav className="flex overflow-x-auto p-2 md:flex-1 md:flex-col md:overflow-y-auto">
             {SECTIONS.map((section) => (
               <button
                 key={section.id}
                 type="button"
                 onClick={() => setActiveSection(section.id)}
-                className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors ${
+                className={`flex shrink-0 items-center gap-2 rounded-md px-3 py-2 text-left text-sm whitespace-nowrap transition-colors md:w-full ${
                   activeSection === section.id
                     ? "bg-accent/20 text-accent"
                     : "text-muted hover:bg-hover hover:text-foreground"
@@ -92,8 +101,8 @@ export function SettingsModal() {
         </div>
 
         {/* Content */}
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <div className="border-border-medium flex h-12 items-center justify-between border-b px-6">
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="border-border-medium hidden h-12 items-center justify-between border-b px-6 md:flex">
             <span className="text-foreground text-sm font-medium">{currentSection.label}</span>
             <button
               type="button"
@@ -104,7 +113,7 @@ export function SettingsModal() {
               <X className="h-4 w-4" />
             </button>
           </div>
-          <div className="flex-1 overflow-y-auto p-6">
+          <div className="flex-1 overflow-y-auto p-4 md:p-6">
             <SectionComponent />
           </div>
         </div>

src/browser/components/Settings/sections/ModelRow.tsx

@@ -26,12 +26,12 @@ export interface ModelRowProps {
 
 export function ModelRow(props: ModelRowProps) {
   return (
-    <div className="border-border-medium bg-background-secondary flex items-center justify-between rounded-md border px-3 py-1.5">
-      <div className="flex min-w-0 flex-1 items-center gap-2">
+    <div className="border-border-medium bg-background-secondary flex items-center justify-between gap-2 rounded-md border px-2 py-1.5 md:px-3">
+      <div className="flex min-w-0 flex-1 items-center gap-1.5 md:gap-2">
         <ProviderWithIcon
           provider={props.provider}
           displayName
-          className="text-muted w-20 shrink-0 text-xs"
+          className="text-muted w-16 shrink-0 text-xs md:w-20"
         />
         {props.isEditing ? (
           <div className="flex min-w-0 flex-1 items-center gap-1">

src/browser/components/Settings/sections/ModelsSection.tsx

@@ -160,11 +160,11 @@ export function ModelsSection() {
 
         {/* Add new model form */}
         <div className="border-border-medium bg-background-secondary rounded-md border p-2">
-          <div className="flex gap-1.5">
+          <div className="flex flex-wrap gap-1.5">
             <select
               value={newModel.provider}
               onChange={(e) => setNewModel((prev) => ({ ...prev, provider: e.target.value }))}
-              className="bg-modal-bg border-border-medium focus:border-accent rounded border px-2 py-1 text-xs focus:outline-none"
+              className="bg-modal-bg border-border-medium focus:border-accent shrink-0 rounded border px-2 py-1 text-xs focus:outline-none"
             >
               <option value="">Provider</option>
               {SUPPORTED_PROVIDERS.map((p) => (
@@ -178,7 +178,7 @@ export function ModelsSection() {
               value={newModel.modelId}
               onChange={(e) => setNewModel((prev) => ({ ...prev, modelId: e.target.value }))}
               placeholder="model-id"
-              className="bg-modal-bg border-border-medium focus:border-accent flex-1 rounded border px-2 py-1 font-mono text-xs focus:outline-none"
+              className="bg-modal-bg border-border-medium focus:border-accent min-w-0 flex-1 rounded border px-2 py-1 font-mono text-xs focus:outline-none"
               onKeyDown={(e) => {
                 if (e.key === "Enter") void handleAddModel();
               }}
@@ -187,7 +187,7 @@ export function ModelsSection() {
               type="button"
               onClick={handleAddModel}
               disabled={!newModel.provider || !newModel.modelId.trim()}
-              className="bg-accent hover:bg-accent-dark disabled:bg-border-medium flex items-center gap-1 rounded px-2 py-1 text-xs text-white transition-colors disabled:cursor-not-allowed"
+              className="bg-accent hover:bg-accent-dark disabled:bg-border-medium flex shrink-0 items-center gap-1 rounded px-2 py-1 text-xs text-white transition-colors disabled:cursor-not-allowed"
             >
               <Plus className="h-3.5 w-3.5" />
               Add