fix: keep keys on one line in the keyboard shortcuts help and line up its global section

This commit is contained in:
Linus Rath
2026-10-28 10:29:41 +01:00
parent f1c209beaa
commit 72da158c45
5 changed files with 21 additions and 16 deletions
+12 -7
View File
@@ -130,7 +130,9 @@ export function KeyboardShortcutsModal({ isOpen, onClose, app }: KeyboardShortcu
<h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">
{t(section.title)}
</h3>
<div className={cn(section.wide ? "grid grid-cols-1 md:grid-cols-2 gap-2" : "space-y-2")}>
{/* A wide section's two columns line up with the columns of the
sections above it: the same 2rem gap as the panel grid. */}
<div className={cn(section.wide ? "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2" : "space-y-2")}>
{rows.map((shortcut) => (
<ShortcutRow
key={`${shortcut.key}:${shortcut.description}`}
@@ -176,15 +178,18 @@ function ShortcutRow({
const keys = shortcutAlternatives(shortcutKey);
return (
<div className="flex items-center justify-between py-1.5">
<span className="text-sm text-muted-foreground">{description}</span>
<div className="flex items-center gap-1.5 ms-4">
<div className="flex items-center justify-between gap-4 py-1.5">
<span className="min-w-0 text-sm text-muted-foreground">{description}</span>
{/* The description wraps first. A key never breaks inside ("Shift + ↓"),
and an alternative keeps its "or" with it ("n or c"); only a very
long list wraps, between alternatives. */}
<div className="flex flex-wrap items-center justify-end gap-x-1.5 gap-y-1 shrink-0 max-w-[75%]">
{keys.map((key, index) => (
<span key={index}>
{index > 0 && <span className="text-muted-foreground/50 mx-1 text-xs">{t("or")}</span>}
<span key={index} className="inline-flex items-center gap-1.5 whitespace-nowrap">
{index > 0 && <span className="text-muted-foreground/50 text-xs">{t("or")}</span>}
<kbd
className={cn(
"inline-flex items-center justify-center",
"inline-flex items-center justify-center whitespace-nowrap",
"px-2 py-0.5 text-xs font-mono font-medium",
"bg-muted border border-border rounded",
"text-foreground shadow-sm",
+2 -2
View File
@@ -119,7 +119,7 @@
"loading_mailboxes": "Loading mailboxes...",
"push_connected": "Real-time updates active",
"push_disconnected": "Real-time updates inactive",
"keyboard_shortcuts": "Keyboard Shortcuts",
"keyboard_shortcuts": "Keyboard shortcuts",
"theme": {
"light": "Light mode",
"dark": "Dark mode",
@@ -3020,7 +3020,7 @@
"delete_with_contents_confirm": "Delete folder and messages"
},
"shortcuts": {
"title": "Keyboard Shortcuts",
"title": "Keyboard shortcuts",
"tip": "Press ? anytime to show this help",
"or": "or",
"sections": {
+2 -2
View File
@@ -2246,7 +2246,7 @@
"description": "Mostrar imágenes de perfil y favicons de remitentes en la carpeta de spam. Desactivado por defecto para no dar apariencia legítima a los intentos de phishing."
},
"keyboard_shortcuts": {
"label": "Atajos de Teclado",
"label": "Atajos de teclado",
"description": "Ver atajos de teclado disponibles",
"button": "Ver Atajos"
},
@@ -3020,7 +3020,7 @@
"rename_confirm": "Renombrar"
},
"shortcuts": {
"title": "Atajos de Teclado",
"title": "Atajos de teclado",
"tip": "Presione ? en cualquier momento para mostrar esta ayuda",
"or": "o",
"sections": {
+2 -2
View File
@@ -2246,7 +2246,7 @@
"description": "Exibir imagens de perfil e favicons dos remetentes na pasta de spam. Desativado por padrão para não dar aparência legítima a tentativas de phishing."
},
"keyboard_shortcuts": {
"label": "Atalhos de Teclado",
"label": "Atalhos de teclado",
"description": "Visualizar atalhos de teclado disponíveis",
"button": "Ver Atalhos"
},
@@ -3020,7 +3020,7 @@
"rename_confirm": "Renomear"
},
"shortcuts": {
"title": "Atalhos de Teclado",
"title": "Atalhos de teclado",
"tip": "Pressione ? a qualquer momento para mostrar esta ajuda",
"or": "ou",
"sections": {
+3 -3
View File
@@ -119,7 +119,7 @@
"loading_mailboxes": "Posta kutuları yükleniyor...",
"push_connected": "Anlık güncellemeler aktif",
"push_disconnected": "Anlık güncellemeler devre dışı",
"keyboard_shortcuts": "Klavye Kısayolları",
"keyboard_shortcuts": "Klavye kısayolları",
"theme": {
"light": "Açık tema",
"dark": "Koyu tema",
@@ -2246,7 +2246,7 @@
"description": "İstem dışı klasöründeki göndericiler için profil resimleri ve favorikonları göster. Kimlik avı girişimlerine görsel meşruiyet kazandırmamak için varsayılan olarak kapalıdır."
},
"keyboard_shortcuts": {
"label": "Klavye Kısayolları",
"label": "Klavye kısayolları",
"description": "Mevcut klavye kısayollarını görüntüleyin",
"button": "Kısayolları Görüntüle"
},
@@ -3020,7 +3020,7 @@
"delete_with_contents_confirm": "Klasörü ve iletileri sil"
},
"shortcuts": {
"title": "Klavye Kısayolları",
"title": "Klavye kısayolları",
"tip": "Bu yardımı görmek için istediğiniz zaman ? tuşuna basın",
"or": "veya",
"sections": {