wip: responsiveness to keyboard shortcuts panel

This commit is contained in:
David Hill
2025-12-22 15:44:04 +00:00
committed by Adam
parent 7050bdd43a
commit 8cab430199

View File

@@ -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;
}