From d2f6eb146baf29f03b0f45385293c6fff835ac2d Mon Sep 17 00:00:00 2001
From: SahilShameerDev <77446748+SahilShameerDev@users.noreply.github.com>
Date: Fri, 27 Mar 2026 19:44:59 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20make=20documentation,=20folder=20docs=20?=
 =?UTF-8?q?and=20collection=20docs=20edit=20button=20=E2=80=A6=20(#7151)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: make documentation, folder docs and collection docs edit button sticky

* Update packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/bruno-app/src/components/FolderSettings/StyledWrapper.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* refactor: move sticky edit button styles to specific doc components

* style: clean up redundant css rules in markdown-body

* Update packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../CollectionSettings/Docs/StyledWrapper.js     | 16 ++++++++++++++++
 .../CollectionSettings/StyledWrapper.js          |  9 +++++++--
 .../components/Documentation/StyledWrapper.js    | 12 ++++++++++++
 .../components/FolderSettings/StyledWrapper.js   |  6 ++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
index 4c3130e3d..2e9c8defb 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
@@ -1,9 +1,25 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
 
   .editing-mode {
     cursor: pointer;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: ${(props) => props.theme.bg};
+    padding: 6px 0;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .markdown-body {
+    height: auto !important;
+    overflow-y: visible !important;
   }
 `;
 
diff --git a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
index 4c6612e3e..21c18e6cc 100644
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  .markdown-body {
+    height: auto !important;
+    overflow-y: visible !important;
+  }
   div.tabs {
     div.tab {
       padding: 6px 0px;
@@ -24,7 +28,8 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
+        font-weight: ${(props) =>
+          props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
@@ -45,7 +50,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.colors.text.muted};
   }
 
-  input[type='radio'] {
+  input[type="radio"] {
     cursor: pointer;
     accent-color: ${(props) => props.theme.primary.solid};
   }
diff --git a/packages/bruno-app/src/components/Documentation/StyledWrapper.js b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
index af80d4c08..8fd5d2376 100644
--- a/packages/bruno-app/src/components/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@@ -1,8 +1,20 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
   .editing-mode {
     cursor: pointer;
+    position: sticky;
+    z-index: 10;
+    top: 0;
+    background: ${(props) => props.theme.bg};
+    padding-bottom: 0.5em;
+  }
+  .markdown-body {
+    height: auto !important;
+    overflow-y: visible !important;
   }
 `;
 
diff --git a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
index 8e95363c6..5cc692b17 100644
--- a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
@@ -2,6 +2,12 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   max-width: 800px;
+  position: relative;
+
+  .markdown-body {
+    height: auto !important;
+    overflow-y: visible !important;
+  }
 
   div.tabs {
     div.tab {