From 656f5e0a7fe36393d60d216c390f42f814c5ea14 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Feb 2026 20:02:37 +0200
Subject: [PATCH] feat(options/shortcuts): make header and footer sticky
 (closes #8675)

---
 .../type_widgets/options/shortcuts.css        | 23 +++++++++++++++++++
 .../type_widgets/options/shortcuts.tsx        | 17 ++++++--------
 2 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/options/shortcuts.css

diff --git a/apps/client/src/widgets/type_widgets/options/shortcuts.css b/apps/client/src/widgets/type_widgets/options/shortcuts.css
new file mode 100644
index 0000000000..58392ba083
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/options/shortcuts.css
@@ -0,0 +1,23 @@
+.shortcuts-options-section {
+    > header {
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        background: var(--main-background-color);
+        padding-block: 0.5em;
+        border-bottom: 1px solid var(--main-border-color);
+    }
+
+    > footer {
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: var(--main-background-color);
+        padding-block: 0.5em;
+        border-top: 1px solid var(--main-border-color);
+        display: flex;
+        justify-content: space-between;
+    }
+}
diff --git a/apps/client/src/widgets/type_widgets/options/shortcuts.tsx b/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
index 33a74e2df4..4370eece9b 100644
--- a/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
+++ b/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
@@ -2,7 +2,6 @@ import { ActionKeyboardShortcut, KeyboardShortcut, OptionNames } from "@triliumn
 import { t } from "../../../services/i18n";
 import { arrayEqual, reloadFrontendApp } from "../../../services/utils";
 import Button from "../../react/Button";
-import FormGroup from "../../react/FormGroup";
 import FormText from "../../react/FormText";
 import FormTextBox from "../../react/FormTextBox";
 import RawHtml from "../../react/RawHtml";
@@ -12,6 +11,7 @@ import server from "../../../services/server";
 import options from "../../../services/options";
 import dialog from "../../../services/dialog";
 import { useTriliumEvent } from "../../react/hooks";
+import "./shortcuts.css";
 
 export default function ShortcutSettings() {
     const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]);
@@ -73,26 +73,23 @@ export default function ShortcutSettings() {
     return (
         <OptionsSection
             className="shortcuts-options-section"
-            style={{ display: "flex", flexDirection: "column", height: "100%" }}
             noCard
         >
             <FormText>
-                {t("shortcuts.multiple_shortcuts")}
+                {t("shortcuts.multiple_shortcuts")}{" "}
                 <RawHtml html={t("shortcuts.electron_documentation")} />
             </FormText>
 
-            <FormGroup name="keyboard-shortcut-filter">
+            <header>
                 <FormTextBox
                     placeholder={t("shortcuts.type_text_to_filter")}
                     currentValue={filter} onChange={(value) => setFilter(value.toLowerCase())}
                 />
-            </FormGroup>
+            </header>
 
-            <div style={{overflow: "auto", flexGrow: 1, flexShrink: 1}}>
-                <KeyboardShortcutTable keyboardShortcuts={keyboardShortcuts} filter={filter} />
-            </div>
+            <KeyboardShortcutTable keyboardShortcuts={keyboardShortcuts} filter={filter} />
 
-            <div style={{ display: "flex", justifyContent: "space-between", margin: "15px 15px 0 15px"}}>
+            <footer>
                 <Button
                     text={t("shortcuts.reload_app")}
                     onClick={reloadFrontendApp}
@@ -102,7 +99,7 @@ export default function ShortcutSettings() {
                     text={t("shortcuts.set_all_to_default")}
                     onClick={resetShortcuts}
                 />
-            </div>
+            </footer>
         </OptionsSection>
     )
 }