diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index b98001bcf2..e7b207a58f 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -66,6 +66,7 @@
   width: 100%;
   position: relative;
   padding: 12px 16px;
+  flex-shrink: 0;
 }
 
 .shortcuts-tabs-row > [data-component="icon-button"] {
@@ -121,6 +122,49 @@
   align-content: start;
 }
 
+@media (max-width: 1200px) {
+  .shortcuts-grid {
+    grid-template-columns: repeat(3, 240px);
+    gap: 4px 32px;
+  }
+
+  .shortcuts-panel [data-slot="tabs-list"] {
+    gap: 16px;
+  }
+}
+
+@media (max-width: 900px) {
+  .shortcuts-grid {
+    grid-template-columns: repeat(2, 240px);
+    gap: 4px 24px;
+  }
+
+  .shortcuts-panel [data-slot="tabs-list"] {
+    gap: 8px;
+  }
+}
+
+@media (max-width: 600px) {
+  .shortcuts-grid {
+    grid-template-columns: repeat(2, minmax(160px, 1fr));
+    gap: 4px 24px;
+  }
+
+  .shortcuts-panel [data-slot="tabs-list"] {
+    gap: 4px;
+  }
+
+  .shortcuts-panel [data-slot="tabs-trigger"] {
+    padding: 4px 8px;
+  }
+}
+
+@media (max-width: 420px) {
+  .shortcuts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .shortcut-item {
   display: flex;
   align-items: center;
@@ -208,3 +252,12 @@ main.shortcuts-open {
 .sidebar-shortcuts-open {
   padding-bottom: 280px;
 }
+
+/* Adjust dialogs when shortcuts panel is open */
+body:has([data-component="shortcuts-panel"]) [data-component="dialog"] {
+  bottom: 280px;
+}
+
+body:has([data-component="shortcuts-panel"]) [data-component="dialog-overlay"] {
+  bottom: 280px;
+}