diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index 60765d8..afc6afe 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -176,6 +176,7 @@ function SettingsTreeItem(props: {
             display: "flex",
             "align-items": "center",
             width: "100%",
+            "min-width": "0",
             gap: "6px",
             padding: `4px 8px 4px ${8 + props.depth * 16}px`,
             background: isActive() ? "var(--jb-list-active-bg, rgba(255,255,255,0.08))" : "transparent",
@@ -966,14 +967,14 @@ export function SettingsDialog(props: SettingsDialogProps) {
           <Show when={!showJsonView()}>
           <div style={{ display: "flex", height: "calc(90vh - 120px)", overflow: "hidden" }}>
             {/* Sidebar */}
-            <div style={{
+            <div class="settings-sidebar" style={{
               width: "256px",
-              "min-width": "200px",
+              "min-width": "120px",
               "border-right": "1px solid var(--jb-border-default)",
               "overflow-y": "auto",
-              "overflow-x": "auto",
+              "overflow-x": "hidden",
               padding: "8px",
-              "flex-shrink": "0",
+              "flex-shrink": "1",
               background: "var(--jb-panel)",
             }}>
               {/* Modified filter toggle */}
@@ -1002,7 +1003,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                   title={showModifiedOnly() ? "Show all settings" : "Show only modified settings"}
                 >
                   <Icon name="filter" style={{ width: "14px", height: "14px" }} />
-                  <Text size="sm" style={{ flex: "1", "text-align": "left" }}>Modified</Text>
+                  <Text size="sm" style={{ flex: "1", "text-align": "left", overflow: "hidden", "white-space": "nowrap", "text-overflow": "ellipsis" }}>Modified</Text>
                   <Show when={totalModifiedCount() > 0}>
                     <Badge 
                       size="sm" 
diff --git a/src/styles/settings.css b/src/styles/settings.css
index e1ed6f7..ce77d96 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -860,3 +860,26 @@
     gap: 8px;
   }
 }
+
+/* Sidebar responsive: collapse to dropdown at very narrow widths */
+@media (max-width: 500px) {
+  .settings-sidebar {
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    flex-shrink: 1 !important;
+    padding: 4px !important;
+  }
+
+  .settings-sidebar .settings-tab-button {
+    font-size: 12px;
+    padding-left: 4px !important;
+    padding-right: 4px !important;
+  }
+
+  .settings-sidebar .settings-tree-node span[style*="flex: 1"] {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}