From 4f5c73840cf13c69285c912d7cfc8cabf58db02c Mon Sep 17 00:00:00 2001
From: Pooja <pooja@usebruno.com>
Date: Tue, 31 Mar 2026 16:39:14 +0530
Subject: [PATCH] fix: folder docs edit button style (#7630)

---
 .../Documentation/StyledWrapper.js            |  9 +++
 .../folder-docs-sticky.spec.ts                | 59 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 tests/collection/folder-docs-sticky/folder-docs-sticky.spec.ts

diff --git a/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js
index f159d94dc..e13734397 100644
--- a/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js
@@ -1,9 +1,18 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+
   .editing-mode {
     cursor: pointer;
     color: ${(props) => props.theme.colors.text.yellow};
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: ${(props) => props.theme.bg};
+    padding-bottom: 0.5em;
   }
 `;
 
diff --git a/tests/collection/folder-docs-sticky/folder-docs-sticky.spec.ts b/tests/collection/folder-docs-sticky/folder-docs-sticky.spec.ts
new file mode 100644
index 000000000..d9a88ef77
--- /dev/null
+++ b/tests/collection/folder-docs-sticky/folder-docs-sticky.spec.ts
@@ -0,0 +1,59 @@
+import { test, expect } from '../../../playwright';
+import { buildCommonLocators } from '../../utils/page/locators';
+import { createCollection, createFolder, closeAllCollections } from '../../utils/page/actions';
+
+test.describe('Folder docs sticky edit/preview button', () => {
+  test.afterEach(async ({ page }) => {
+    await closeAllCollections(page);
+  });
+
+  test('edit/preview button should remain visible when scrolling folder docs', async ({ page, createTmpDir }) => {
+    const tmpDir = await createTmpDir('folder-docs-sticky');
+    const locators = buildCommonLocators(page);
+
+    // Create collection and folder
+    await createCollection(page, 'sticky-docs-test', tmpDir);
+    await createFolder(page, 'test-folder', 'sticky-docs-test');
+
+    // Click on the folder to open folder settings
+    await locators.sidebar.folder('test-folder').click();
+
+    // Navigate to the Docs tab
+    const docsTab = locators.paneTabs.folderSettingsTab('docs');
+    await docsTab.click();
+
+    // The editing-mode toggle should show "Edit" initially
+    const editToggle = page.locator('.editing-mode');
+    await expect(editToggle).toBeVisible();
+    await expect(editToggle).toHaveText('Edit');
+
+    // Click "Edit" to enter editing mode
+    await editToggle.click();
+    await expect(editToggle).toHaveText('Preview');
+
+    // Type long content into the CodeMirror editor to make it scrollable
+    const codeMirror = page.locator('.CodeMirror');
+    await codeMirror.click();
+    const longContent = Array.from({ length: 60 }, (_, i) => `Line ${i + 1}: Some documentation content to make this area scrollable.`).join('\n');
+    await page.locator('.CodeMirror textarea').fill(longContent);
+
+    // Save the docs
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Switch to preview mode to see rendered markdown
+    await editToggle.click();
+    await expect(editToggle).toHaveText('Edit');
+
+    // Get the StyledWrapper (parent of editing-mode) which is the scroll container
+    const scrollContainer = editToggle.locator('..');
+
+    // Scroll down within the docs container
+    await scrollContainer.evaluate((el) => {
+      el.scrollTop = el.scrollHeight;
+    });
+
+    // The edit/preview toggle should still be visible due to sticky positioning
+    await expect(editToggle).toBeVisible();
+    await expect(editToggle).toBeInViewport();
+  });
+});