From 8d16540ad52bd53ee551e14e0552bb2de7b875f6 Mon Sep 17 00:00:00 2001
From: whereareiam <mmm.g032@gmail.com>
Date: Thu, 22 Oct 2026 22:38:05 +0200
Subject: [PATCH] fix(editor): GitHub's editor box for new, edited and uploaded
 files

The file editor's Edit/Preview/Preview changes tabs and its find
button floated above the editor. GitHub draws them as the header of the
editor's box: a bar on the box header colour, joined to the editor
below it, with 32px controls.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/build-output.test.ts                 |  6 ++++++
 styles/components/repo/repo_file_view.ts | 25 +++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/build-output.test.ts b/src/build-output.test.ts
index 3157b27b..6e8448ef 100644
--- a/src/build-output.test.ts
+++ b/src/build-output.test.ts
@@ -643,6 +643,12 @@ describe("Forgejo 15 native integration", () => {
     expect([...order].sort((a, b) => a - b)).toEqual(order);
   });
 
+  it("joins the file editor's tabs and find button to the editor as GitHub's box header", () => {
+    const style = fs.readFileSync(path.join(ROOT_DIR, "styles", "components", "repo", "repo_file_view.ts"), "utf-8");
+    expect(style).toContain("#editor-bar ~ .ui.bottom.tab.segment {");
+    expect(style).toContain("background: ${themeVars.color.box.header};");
+  });
+
   it("matches GitHub's repository About, visibility, and code-search details", () => {
     const headerStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "templates", "repo", "header.ts"), "utf-8");
     const headerTemplate = fs.readFileSync(path.join(ROOT_DIR, "templates", "repo", "home_header.tmpl"), "utf-8");
diff --git a/styles/components/repo/repo_file_view.ts b/styles/components/repo/repo_file_view.ts
index 659cba94..7ffd65d2 100644
--- a/styles/components/repo/repo_file_view.ts
+++ b/styles/components/repo/repo_file_view.ts
@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import { css, cssCombine, themeVars } from "@lutinglt/gitea-github-theme/core";
+import { css, cssCombine, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
 
 const codeEditor = css`
   .codemirror-container {
@@ -94,6 +94,29 @@ const fileEditor = css`
     #editor-bar .switch .item svg {
       display: none;
     }
+    /* GitHub's editor box: the Edit/Preview tabs and the find button in a header bar joined to the editor. */
+    #editor-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin: 0;
+      padding: 8px;
+      border: 1px solid ${themeVars.color.light.border};
+      border-bottom: 0;
+      border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
+      background: ${themeVars.color.box.header};
+      > .button {
+        height: 32px;
+        min-height: 32px;
+        margin: 0;
+      }
+    }
+    #editor-bar ~ .ui.bottom.tab.segment {
+      margin-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
   }
 `;