diff --git a/docs/architecture/ribbon.md b/docs/architecture/ribbon.md
index be83264..69efed9 100644
--- a/docs/architecture/ribbon.md
+++ b/docs/architecture/ribbon.md
@@ -53,6 +53,15 @@ The band's height never changes: it scrolls horizontally with a hidden scrollbar
collapsing groups into popovers the way Word does when the window narrows. That is the single
biggest simplification here, and the reason two things below are necessary.
+A chevron in the tab strip drops the band entirely, leaving the strip (`odf-editor-ribbon-collapsed`).
+Clicking any tab brings it back — Word instead floats it over the document until the next click
+lands in the text, which is the part not built.
+
+Word puts that chevron in the band's bottom-right corner, and this one did too. Both ways of
+reserving that corner failed: as a layer it covered whichever group's dialog launcher reached the
+edge, and since the band scrolls, which one that is varies; in the flow it cost the band a column
+at every height. A flex row cannot reserve width in part of its height, so it moved to the strip.
+
- **A menu must leave the flow.** `.ribbon-body` clips its own overflow, so the `anchored` action
(`ribbon/menu.svelte.ts`) switches a panel to `position: fixed` and pins it under its wrapper,
clamped inside the window. Panels drop below the **whole band**, not below their own button —
diff --git a/src/lib/components/ribbon/Ribbon.svelte b/src/lib/components/ribbon/Ribbon.svelte
index 50a8133..78e306e 100644
--- a/src/lib/components/ribbon/Ribbon.svelte
+++ b/src/lib/components/ribbon/Ribbon.svelte
@@ -19,7 +19,7 @@
import { t } from '../../i18n/i18n.svelte';
import { withShortcut } from '../../i18n/shortcut';
import { shortcutHint } from '../../editor/shortcuts';
- import type { ChromeMode, ThemeMode } from '../../storage/theme';
+ import { loadRibbonCollapsed, saveRibbonCollapsed, type ChromeMode, type ThemeMode } from '../../storage/theme';
import type { StyleFamily } from '../../styles/styleSheet';
import { DEFAULT_MARGINS, type PageMargins } from '../../storage/pageMargins';
import type { Orientation } from '../../storage/pageOrientation';
@@ -130,6 +130,9 @@
let paragraphDialogOpen = $state(false);
let tabsDialogOpen = $state(false);
+ let collapsed = $state(loadRibbonCollapsed());
+ $effect(() => saveRibbonCollapsed(collapsed));
+
function run(fn?: () => void) {
closeMenu();
fn?.();
@@ -202,7 +205,7 @@
class="ribbon-tab"
class:active={tab === id}
class:contextual={!(TABS as readonly string[]).includes(id)}
- onclick={() => (tab = id)}
+ onclick={() => { tab = id; collapsed = false; }}
>
{t().ribbon.tabs[id]}
@@ -225,6 +228,20 @@
.odt
+
+
+