From c72e78ac82bab647270d431a254095000008a008 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D1=83=D1=80=D0=BD=D0=B0=D1=82=20=D0=90=D0=BD=D0=B4?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B9?= <sevenhill@live.ru>
Date: Tue, 2 Jun 2026 09:19:05 +0300
Subject: [PATCH] Keep QWord ribbon above document viewport

---
 src/features/qword/QWord.test.tsx | 37 +++++++++++++++++++++++++++++++
 src/features/qword/QWord.tsx      |  6 ++---
 src/styles.css                    | 12 ++++++++++
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/features/qword/QWord.test.tsx b/src/features/qword/QWord.test.tsx
index ee303b5..21390da 100644
--- a/src/features/qword/QWord.test.tsx
+++ b/src/features/qword/QWord.test.tsx
@@ -23,6 +23,43 @@ describe("qwordCurrentPageFromViewport", () => {
 });
 
 describe("QWord", () => {
+  it("держит ленту QWord вне прокручиваемой области документа", () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+
+    globalThis.ResizeObserver = class {
+      observe() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+    window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    }) as typeof window.requestAnimationFrame;
+
+    const document: WordDocument = {
+      id: "word-ribbon-layout-test",
+      title: "Лента.docx",
+      updatedAt: "2026-06-02T00:00:00.000Z",
+      html: "<p>Текст</p>"
+    };
+
+    try {
+      const view = render(<QWord document={document} onChange={vi.fn()} />);
+      const toolbar = view.container.querySelector(".word-module-toolbar") as HTMLElement;
+      const stage = view.container.querySelector(".document-stage") as HTMLElement;
+
+      expect(toolbar).toBeInTheDocument();
+      expect(stage).toBeInTheDocument();
+      expect(stage).not.toContainElement(toolbar);
+      expect(toolbar.querySelector(".word-ribbon-tabs")).toBeInTheDocument();
+      expect(stage.querySelector(".page-ruler")).toBeInTheDocument();
+      expect(stage.querySelector(".paper-frame")).toBeInTheDocument();
+    } finally {
+      globalThis.ResizeObserver = originalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+    }
+  });
+
   it("переключает вкладки ленты и показывает команды выбранной вкладки", () => {
     const originalResizeObserver = globalThis.ResizeObserver;
     const originalRequestAnimationFrame = window.requestAnimationFrame;
diff --git a/src/features/qword/QWord.tsx b/src/features/qword/QWord.tsx
index 46e439d..016aa06 100644
--- a/src/features/qword/QWord.tsx
+++ b/src/features/qword/QWord.tsx
@@ -686,8 +686,7 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
 
   return (
     <div className="editor-layout qword-layout">
-      <section ref={stageRef} className={stageClassName} style={stageStyle} onScroll={refreshPageView} aria-label="Редактор QWord">
-        <div className="module-toolbar word-module-toolbar">
+      <div className="module-toolbar word-module-toolbar">
           <input
             ref={fileInputRef}
             className="hidden-file-input"
@@ -984,8 +983,9 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
             </section>
             ) : null}
           </div>
-        </div>
+      </div>
 
+      <section ref={stageRef} className={stageClassName} style={stageStyle} onScroll={refreshPageView} aria-label="Редактор QWord">
         <div className="page-ruler" aria-hidden="true">
           {Array.from({ length: 9 }, (_, index) => (
             <span key={index}>{index + 1}</span>
diff --git a/src/styles.css b/src/styles.css
index 4bec1ce..522ea83 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -365,6 +365,10 @@ button {
   min-height: 0;
 }
 
+.qword-layout {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
 .document-stage,
 .spreadsheet-stage,
 .slide-stage {
@@ -393,6 +397,9 @@ button {
 }
 
 .word-module-toolbar {
+  position: relative;
+  top: auto;
+  z-index: 3;
   display: block;
   min-height: 154px;
   padding: 0;
@@ -2227,6 +2234,11 @@ button {
     overflow-y: auto;
   }
 
+  .word-module-toolbar {
+    max-height: none;
+    overflow: hidden;
+  }
+
   .file-title-input {
     min-width: 0;
     flex: 1 1 220px;