From 4486e2697426b6605ded39b5f5321371dfc47e90 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 14:47:04 +0530
Subject: [PATCH 01/14] Make a common component for No content text

---
 .../Views/Common/AuthTab/AuthTab.spec.tsx     |  6 +-
 .../Content/Views/Common/AuthTab/AuthTab.tsx  |  7 +-
 .../Views/Common/AuthTab/StyledWrapper.ts     |  7 --
 .../Views/Common/ResponseHeadersTab.tsx       | 72 ++++++++++---------
 .../Content/Views/Common/TestResultsTab.tsx   | 12 +---
 .../src/ui/NoContentText/NoContentText.tsx    | 22 ++++++
 .../src/ui/NoContentText/StyledWrapper.tsx    |  7 ++
 7 files changed, 75 insertions(+), 58 deletions(-)
 create mode 100644 packages/oc-docs/src/ui/NoContentText/NoContentText.tsx
 create mode 100644 packages/oc-docs/src/ui/NoContentText/StyledWrapper.tsx

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx
index 0fa07417..f878b687 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { parse } from 'node-html-parser';
 import { describe, it, expect } from 'vitest';
-import { query } from '../../../../../../test-utils/dom';
+import { getByTestId, query } from '../../../../../../test-utils/dom';
 import { AUTH_DEFAULTS, AUTH_MODE_LABELS, PLACEMENT_OPTIONS } from '../../../../../../constants';
 import { AuthTab } from './AuthTab';
 
@@ -48,12 +48,12 @@ describe('AuthTab', () => {
     const { root, byTestId } = renderAuth(undefined);
     expect(root.querySelector('.auth-form')).toBeNull();
     expect(byTestId('auth-username')).toBeNull();
-    expect(query(root, '.auth-empty').text.trim()).toBe('No authentication configured.');
+    expect(getByTestId(root, 'no-content-text').text.trim()).toBe('No authentication configured.');
   });
 
   it('shows an inherit note for inherited auth', () => {
     const { root } = renderAuth('inherit', { showInherit: true });
-    expect(query(root, '.auth-empty').text.trim()).toBe('Inherits auth from parent collection.');
+    expect(getByTestId(root, 'no-content-text').text.trim()).toBe('Inherits auth from parent collection.');
   });
 
   it('renders basic auth with a plain username and a masked, revealable password', () => {
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
index f94abe52..75ed59d7 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
@@ -3,6 +3,7 @@ import { Field, type SelectOption } from '../../../../../../ui/Field';
 import { AUTH_DEFAULTS, AUTH_MODE_LABELS, PLACEMENT_OPTIONS } from '../../../../../../constants';
 import { REQUEST_PROTOCOL_KEYS } from '../../../../../../utils/schemaHelpers';
 import { StyledWrapper } from './StyledWrapper';
+import NoContentText from '../../../../../../ui/NoContentText/NoContentText';
 
 interface AuthTabProps {
   auth: any;
@@ -135,15 +136,15 @@ export const AuthTab: React.FC<AuthTabProps> = ({
 
   const renderBody = () => {
     if (!auth) {
-      return <p className="auth-empty">No authentication configured.</p>;
+      return <NoContentText text='No authentication configured.' />
     }
     if (auth === 'inherit') {
-      return <p className="auth-empty">Inherits auth from parent collection.</p>;
+      return <NoContentText text='Inherits auth from parent collection.' />
     }
     if (showFullAuth) {
       return <div className="auth-form">{renderForm()}</div>;
     }
-    return <p className="auth-empty">{title} auth is configured elsewhere.</p>;
+    return <NoContentText text='{title} auth is configured elsewhere.' />
   };
 
   return (
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts
index 48f7a6f8..b7364401 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/StyledWrapper.ts
@@ -22,13 +22,6 @@ export const StyledWrapper = styled.div`
     gap: 1rem;
   }
 
-  .auth-empty {
-    margin: 0;
-    font-style: italic;
-    font-size: 0.8125rem;
-    color: var(--text-muted);
-  }
-
   .auth-form {
     display: flex;
     flex-direction: column;
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx
index 215f79a8..e3a2b995 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ResponseHeadersTab.tsx
@@ -1,51 +1,53 @@
 import React from 'react';
+import NoContentText from '../../../../../ui/NoContentText/NoContentText';
 
 interface ResponseHeadersTabProps {
   headers?: Record<string, any>;
 }
 
 const ResponseHeadersTab: React.FC<ResponseHeadersTabProps> = ({ headers }) => {
+
+  if(!headers) {
+    return (
+      <NoContentText text='No response headers' />
+    )
+  }
+
   return (
     <div className="h-full overflow-auto">
       <div className="py-3">
-        {headers ? (
-          <div className="space-y-0">
-            {Object.entries(headers).map(([key, value], index) => (
-              <div 
-                key={key} 
-                className="flex items-center gap-4 py-1.5 border-b"
+        <div className="space-y-0">
+          {Object.entries(headers).map(([key, value], index) => (
+            <div 
+              key={key} 
+              className="flex items-center gap-4 py-1.5 border-b"
+              style={{ 
+                borderColor: 'var(--border-color)',
+                borderBottomWidth: index === Object.entries(headers).length - 1 ? '0' : '1px'
+              }}
+            >
+              <span 
+                className="font-mono text-xs font-medium" 
+                style={{ 
+                  color: 'var(--text-primary)', 
+                  minWidth: '180px',
+                  letterSpacing: '0.01em'
+                }}
+              >
+                {key}
+              </span>
+              <span 
+                className="font-mono text-xs flex-1 break-all" 
                 style={{ 
-                  borderColor: 'var(--border-color)',
-                  borderBottomWidth: index === Object.entries(headers).length - 1 ? '0' : '1px'
+                  color: 'var(--text-secondary)',
+                  letterSpacing: '0.01em'
                 }}
               >
-                <span 
-                  className="font-mono text-xs font-medium" 
-                  style={{ 
-                    color: 'var(--text-primary)', 
-                    minWidth: '180px',
-                    letterSpacing: '0.01em'
-                  }}
-                >
-                  {key}
-                </span>
-                <span 
-                  className="font-mono text-xs flex-1 break-all" 
-                  style={{ 
-                    color: 'var(--text-secondary)',
-                    letterSpacing: '0.01em'
-                  }}
-                >
-                  {String(value)}
-                </span>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="text-center py-12" style={{ color: 'var(--text-secondary)' }}>
-            <span className="text-xs">No response headers</span>
-          </div>
-        )}
+                {String(value)}
+              </span>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx
index 977b379e..d556f857 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestResultsTab.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import type { TestResultsResponse, AssertionResultsResponse } from '../../../../../runner';
+import NoContentText from '../../../../../ui/NoContentText/NoContentText';
 
 interface TestResultsTabProps {
   testResults?: TestResultsResponse;
@@ -15,16 +16,7 @@ const TestResultsTab: React.FC<TestResultsTabProps> = ({ testResults, assertionR
 
   if (!hasTests && !hasAssertions) {
     return (
-      <div className="h-full flex items-center justify-center" style={{ backgroundColor: 'var(--bg-primary)' }}>
-        <div className="text-center py-12">
-          <div className="w-16 h-16 mx-auto mb-4 opacity-50">
-            <svg fill="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
-              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-            </svg>
-          </div>
-          <p style={{ color: 'var(--text-secondary)' }}>No tests or assertions were run</p>
-        </div>
-      </div>
+      <NoContentText text='No tests or assertions were run' />
     );
   }
 
diff --git a/packages/oc-docs/src/ui/NoContentText/NoContentText.tsx b/packages/oc-docs/src/ui/NoContentText/NoContentText.tsx
new file mode 100644
index 00000000..96f4d8b9
--- /dev/null
+++ b/packages/oc-docs/src/ui/NoContentText/NoContentText.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyledWrapper } from './StyledWrapper';
+
+interface NoContentTextProps {
+  className?: string;
+  text: string;
+  testId?: string
+}
+
+const NoContentText : React.FC<NoContentTextProps> = ({ 
+  className,
+  text,
+  testId = 'no-content-text' 
+}) => {
+  return (
+    <StyledWrapper className={className} data-testid={testId}>
+      {text}
+    </StyledWrapper>
+  )
+}
+
+export default NoContentText
\ No newline at end of file
diff --git a/packages/oc-docs/src/ui/NoContentText/StyledWrapper.tsx b/packages/oc-docs/src/ui/NoContentText/StyledWrapper.tsx
new file mode 100644
index 00000000..b642faaf
--- /dev/null
+++ b/packages/oc-docs/src/ui/NoContentText/StyledWrapper.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.p`
+  font-style: italic;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+`;

From 0f70e0a81ee94c6999992eb98b3060441da5cc72 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 14:51:44 +0530
Subject: [PATCH 02/14] Improve the font size and spacing between the query bar
 and content

---
 .../Playground/Content/Views/PlaygroundView/PlaygroundView.tsx  | 2 +-
 packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/PlaygroundView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/PlaygroundView.tsx
index 468d2687..00c341fd 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/PlaygroundView.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/PlaygroundView.tsx
@@ -108,7 +108,7 @@ const HttpRequestPlaygroundView: React.FC<PlaygroundViewProps> = ({ item, collec
       
       <div
         ref={containerRef}
-        className={`flex flex-1 overflow-hidden pt-2 ${orientation === 'vertical' ? 'flex-col' : 'flex-row'}`}
+        className={`flex flex-1 overflow-hidden pt-4 ${orientation === 'vertical' ? 'flex-col' : 'flex-row'}`}
         style={{ userSelect: isResizing ? 'none' : undefined }}
       >
         <div
diff --git a/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts b/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts
index 260bd981..ee57919c 100644
--- a/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/TitleLabel/StyledWrapper.ts
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export const StyledWrapper = styled.h2`
   font-family: var(--font-sans);
   font-weight: 500;
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   line-height: 1;
   letter-spacing: 0;
   color: var(--text-secondary);

From 4115e02df547e47353b63a734fcc9a004a3ff476 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 14:55:43 +0530
Subject: [PATCH 03/14] Fix the styling for the Body formatter button on right
 of the tabs

---
 .../Content/Views/Common/BodyModeSelector/StyledWrapper.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts
index c2d2c1db..244548d5 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/BodyModeSelector/StyledWrapper.ts
@@ -7,12 +7,13 @@ import styled from '@emotion/styled';
 export const TriggerButton = styled.button`
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0;
+  padding: 0 0 0.25rem;
   background: transparent;
   border: none;
   font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
   color: var(--oc-primary-text);
   cursor: pointer;
   user-select: none;

From 0242c3e83d8f56a0af48cfe4158d25529770c6b2 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 15:07:24 +0530
Subject: [PATCH 04/14] Fix the content for all tab panels inside the request
 pane

---
 .../CollectionSettingsView.tsx                |  4 ----
 .../Views/Common/AssertsTab/AssertsTab.tsx    |  4 ++--
 .../Content/Views/Common/AuthTab/AuthTab.tsx  |  4 ++--
 .../Views/Common/HeadersTab/HeadersTab.tsx    |  2 +-
 .../Content/Views/Common/ParamsTab.tsx        |  1 -
 .../Views/Common/ScriptsTab/ScriptsTab.tsx    |  2 +-
 .../Views/Common/TestsTab/TestsTab.tsx        |  2 +-
 .../FolderSettingsView/FolderSettingsView.tsx |  5 ----
 .../RequestPane/RequestPane.tsx               | 23 ++++++++-----------
 9 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
index 2357b52f..d26defc5 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
@@ -93,7 +93,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
         <HeadersTab
           headers={headers}
           onHeadersChange={handleHeadersChange}
-          title=""
           description="Add request headers that will be sent with every request in this collection."
         />
       )
@@ -109,7 +108,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
           postResponseVars={postResponseVars}
           onPostResponseVarsChange={handlePostResponseVarsChange}
           exprHelp="You can write any valid JS Template Literal here"
-          title=""
         />
       )
     },
@@ -122,7 +120,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
           onAuthChange={handleAuthChange}
           onItemChange={handleCollectionChange}
           item={collection}
-          title=""
           description="Configures authentication for the entire collection. This applies to all requests using the Inherit option in the Auth tab."
           showInherit={false}
           showFullAuth={true}
@@ -137,7 +134,6 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
         <ScriptsTab
           scripts={scripts}
           onScriptChange={handleScriptChange}
-          title=""
           description="Write pre and post-request scripts that will run before and after any request in this collection is sent."
           showTests={false}
         />
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx
index 58e272ed..9d9f3c98 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AssertsTab/AssertsTab.tsx
@@ -104,7 +104,7 @@ interface AssertsTabProps {
 export const AssertsTab: React.FC<AssertsTabProps> = ({
   assertions,
   onAssertionsChange,
-  title = 'Assertions',
+  title,
   description
 }) => {
   const assertionsData: KeyValueRow[] = (assertions || []).map((assertion, index) => ({
@@ -141,7 +141,7 @@ export const AssertsTab: React.FC<AssertsTabProps> = ({
   return (
     <StyledWrapper className="space-y-3">
       <div className="flex items-center justify-between mb-2">
-        <span className="asserts-title text-sm font-semibold">{title}</span>
+        {title && <span className="asserts-title text-sm font-semibold">{title}</span>}
         {description && <span className="asserts-description text-xs leading-tight">{description}</span>}
       </div>
       <KeyValueTable
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
index 75ed59d7..d062097f 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/AuthTab/AuthTab.tsx
@@ -21,7 +21,7 @@ export const AuthTab: React.FC<AuthTabProps> = ({
   onAuthChange,
   onItemChange,
   item,
-  title = 'Authentication',
+  title,
   description,
   showInherit = false,
   showFullAuth = false
@@ -151,7 +151,7 @@ export const AuthTab: React.FC<AuthTabProps> = ({
     <StyledWrapper className="auth-tab">
       {(Boolean(title) || Boolean(description)) && (
         <div className="auth-header flex items-center justify-between">
-          {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
+          {title && <span className="title text-sm font-semibold">{title}</span>}
           {description && <span className="description text-xs leading-tight">{description}</span>}
         </div>
       )}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
index d4e3821e..3c14514e 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
@@ -72,7 +72,7 @@ export const HeadersTab: React.FC<HeadersTabProps> = ({ headers, onHeadersChange
   return (
     <StyledWrapper className="space-y-3">
       <div className="flex items-center justify-between mb-4">
-        {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
+        {title && <span className="title text-sm font-semibold">{title}</span>}
         {description && <span className="description text-xs leading-tight">{description}</span>}
       </div>
       <HeadersDisplay headers={headers} onHeadersChange={onHeadersChange} />
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx
index d2e4b9db..0d79be59 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx
@@ -51,7 +51,6 @@ const ParamsSection: React.FC<ParamsSectionProps> = React.memo(({
       data={data}
       onChange={onChange}
       keyPlaceholder={keyLabel}
-      valuePlaceholder="Value"
       showEnabled={showEnabled}
       showActions={showActions}
       disableNewRow={disableNewRow}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
index 2e891565..0246dbcb 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
@@ -20,7 +20,7 @@ interface ScriptsTabProps {
 export const ScriptsTab: React.FC<ScriptsTabProps> = ({
   scripts,
   onScriptChange,
-  title = 'Scripts',
+  title,
   description,
   showTests = true
 }) => {
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx
index 1bc4b7ac..16751f89 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/TestsTab/TestsTab.tsx
@@ -16,7 +16,7 @@ export const TestsTab: React.FC<TestsTabProps> = ({ scripts, onScriptChange, tit
     <StyledWrapper className="space-y-3">
       {(Boolean(title) || Boolean(description)) && (
         <div className="flex items-center justify-between mb-4">
-          {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
+          {title && <span className="title text-sm font-semibold">{title}</span>}
           {description && <span className="description text-xs leading-tight">{description}</span>}
         </div>
       )}
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx b/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
index ff74cff8..274c4464 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
@@ -138,7 +138,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <HeadersTab
       headers={folder.request?.headers || []}
       onHeadersChange={handleHeadersChange}
-      title=""
       description="Request headers that will be sent with every request inside this folder."
     />
   );
@@ -147,7 +146,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <VariablesTab
       variables={folder.request?.variables || []}
       onVariablesChange={handleVariablesChange}
-      title=""
       description="Variables available to every request inside this folder."
     />
   );
@@ -158,7 +156,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
       onAuthChange={handleAuthChange}
       onItemChange={handleFolderAuthChange}
       item={folder}
-      title=""
       description="Configures authentication for this folder. This applies to all requests using the Inherit option in the Auth tab."
       showInherit={true}
       showFullAuth={true}
@@ -171,7 +168,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <ScriptsTab
       scripts={scripts}
       onScriptChange={handleScriptChange}
-      title=""
       description="Pre and post-request scripts that will run before and after any request inside this folder is sent."
       showTests={false}
     />
@@ -181,7 +177,6 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, onFolderChange
     <TestsTab
       scripts={scripts}
       onScriptChange={handleScriptChange}
-      title=""
       description="These tests will run any time a request in this folder is sent."
     />
   );
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
index ab551455..f59f9726 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
@@ -146,8 +146,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onVariablesChange={handleRequestVariablesChange}
       postResponseVars={postResponseVars}
       onPostResponseVarsChange={handlePostResponseVarsChange}
-      title="Request Variables"
-      description="These variables will be available to this request"
     />
   );
 
@@ -155,7 +153,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <HeadersTab
       headers={headers}
       onHeadersChange={handleHeadersChange}
-      title="Headers"
     />
   );
 
@@ -173,7 +170,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onAuthChange={() => {}} // Not used for full auth
       onItemChange={onItemChange}
       item={item}
-      title="Authentication"
       showFullAuth={true}
     />
   );
@@ -182,7 +178,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <ScriptsTab
       scripts={scriptsObj}
       onScriptChange={handleScriptChange}
-      title="Scripts"
       showTests={false}
     />
   );
@@ -217,7 +212,7 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       id: 'overview',
       label: 'Overview',
       content: (
-        <div className="py-3">
+        <div className="pb-3">
           <OverviewTab
             docs={getItemDocs(item)}
             emptyStateSubheading="This request has no docs. Add one in Bruno to introduce your API to readers: what it does, who it's for, and how to authenticate."
@@ -229,50 +224,50 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       id: 'params',
       label: 'Params',
       contentIndicator: params?.length || undefined, 
-      content: <div className="py-3">{renderParams()}</div> 
+      content: <div className="pb-3">{renderParams()}</div> 
     },
     { 
       id: 'variables', 
       label: 'Variables', 
       contentIndicator: variables?.length || undefined,
-      content: <div className="py-3">{renderVariables()}</div>
+      content: <div className="pb-3">{renderVariables()}</div>
     },
     { 
       id: 'headers', 
       label: 'Headers', 
       contentIndicator: headers?.length || undefined, 
-      content: <div className="py-3">{renderHeaders()}</div> 
+      content: <div className="pb-3">{renderHeaders()}</div> 
     },
     {
       id: 'body',
       label: 'Body',
       contentIndicator: hasBody ? '•' : undefined,
       rightElement: <BodyModeSelector body={body} onItemChange={onItemChange} item={item} />,
-      content: <div className="py-3">{renderBody()}</div>
+      content: <div className="pb-3">{renderBody()}</div>
     },
     { 
       id: 'auth', 
       label: 'Auth',
       contentIndicator: auth ? '•' : undefined,
-      content: <div className="py-3">{renderAuth()}</div> 
+      content: <div className="pb-3">{renderAuth()}</div> 
     },
     { 
       id: 'scripts', 
       label: 'Scripts',
       contentIndicator: hasScripts ? '•' : undefined,
-      content: <div className="py-3">{renderScripts()}</div> 
+      content: <div className="pb-3">{renderScripts()}</div> 
     },
     { 
       id: 'assertions', 
       label: 'Assertions', 
       contentIndicator: assertions?.length || undefined, 
-      content: <div className="py-3">{renderAssertions()}</div> 
+      content: <div className="pb-3">{renderAssertions()}</div> 
     },
     { 
       id: 'tests', 
       label: 'Tests',
       contentIndicator: hasTests ? '•' : undefined,
-      content: <div className="py-3">{renderTests()}</div> 
+      content: <div className="pb-3">{renderTests()}</div> 
     }
   ];
 

From d7b5602e275634d8a97ddf089682f7203bc626a4 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 15:40:08 +0530
Subject: [PATCH 05/14] Fix the coloring and font size for Environments page

---
 .../Views/EnvironmentsView/StyledWrapper.ts    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts
index 013a4dc1..2289cf90 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/StyledWrapper.ts
@@ -9,13 +9,14 @@ export const StyledWrapper = styled.div`
   background-color: var(--oc-background-base);
 
   .env-header {
-    padding: 16px 24px 0;
+    padding: 1rem 1.5rem 0;
     flex-shrink: 0;
   }
 
   .env-title {
-    font-size: 18px;
+    font-size: 1.125rem;
     font-weight: 600;
+    font-size: 0.8125rem;
     color: var(--oc-text);
   }
 
@@ -32,14 +33,14 @@ export const StyledWrapper = styled.div`
   .env-pills {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    padding: 16px 24px;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
   }
 
   .env-pill {
     display: inline-flex;
     align-items: center;
-    padding: 6px 12px;
+    padding: 0.25rem 0.5rem;
     border: 1px solid var(--oc-border-border2);
     border-radius: var(--oc-border-radius-md);
     background: transparent;
@@ -58,8 +59,7 @@ export const StyledWrapper = styled.div`
 
   .env-pill.active {
     color: var(--oc-text);
-    border-color: var(--oc-text-link);
-    background: color-mix(in srgb, var(--oc-text-link) 8%, transparent);
+    border-color: var(--primary-color);
   }
 
   .env-tabs-area {
@@ -68,10 +68,10 @@ export const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     min-height: 0;
-    padding: 0 24px 24px;
+    padding: 0 1.5rem 1.5rem;
   }
 
   .env-tabs-area .tab-content {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 `;

From 4294807f3e850eb19106cf75150efb118d205f6c Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 15:57:30 +0530
Subject: [PATCH 06/14] Fix the alignment of data visible in Environments page

---
 .../Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
index 177c4b9d..3f64a449 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
@@ -53,13 +53,11 @@ export const StyledWrapper = styled.div`
 
   .env-card .value .value-secret {
     flex: 1;
-    padding: 0 0.5rem;
   }
 
   .env-card .value-input {
     flex: 0 1 auto;
     field-sizing: content;
-    min-width: 40px;
     max-width: 100%;
     border: none;
     outline: none;
@@ -78,7 +76,6 @@ export const StyledWrapper = styled.div`
 
   .env-card .value .var-type {
     flex-shrink: 0;
-    margin-left: auto;
   }
 
   .env-card .delete {

From d2d87e9af503b698be67bb3bc14e28df4673bf1a Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 17:06:37 +0530
Subject: [PATCH 07/14] Improve the no-response UI on the playground

---
 packages/oc-docs/src/assets/icons/SendIcon.tsx  |  9 +++++++--
 .../Views/Common/OverviewTab/OverviewTab.tsx    | 16 +++++++++++++---
 .../PlaygroundView/RequestPane/RequestPane.tsx  |  1 +
 .../ResponsePane/ResponsePane.tsx               | 17 +++++++----------
 .../ResponsePane/StyledWrapper.ts               | 16 ++++++++++++++++
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/packages/oc-docs/src/assets/icons/SendIcon.tsx b/packages/oc-docs/src/assets/icons/SendIcon.tsx
index 19a6b4dd..739e5c5d 100644
--- a/packages/oc-docs/src/assets/icons/SendIcon.tsx
+++ b/packages/oc-docs/src/assets/icons/SendIcon.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import { baseIconProps } from './baseIconProps';
 
+interface SendIconProps {
+  width?: number;
+  height?: number;
+}
+
 /** Paper-plane "send" icon used by the Try action. */
-export const SendIcon: React.FC = () => (
-  <svg {...baseIconProps} width={11} height={11}>
+export const SendIcon: React.FC<SendIconProps> = ({ width = 11, height = 11 }) => (
+  <svg {...baseIconProps} width={width} height={height}>
     <line x1="22" y1="2" x2="11" y2="13" />
     <polygon points="22 2 15 22 11 13 2 9 22 2" />
   </svg>
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx
index 5bcbbaf2..22c69229 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/OverviewTab/OverviewTab.tsx
@@ -3,10 +3,18 @@ import { useMemo } from 'react';
 import { StyledWrapper } from './StyledWrapper';
 import { EmptyState } from '../../../../../../ui/EmptyState/EmptyState';
 import { BookIcon } from '../../../../../../assets/icons';
+import NoContentText from '../../../../../../ui/NoContentText/NoContentText';
 
-const OverviewTab: React.FC<{ docs?: string; emptyStateSubheading: string }> = ({
+interface OverviewTabProps {
+  docs?: string;
+  emptyStateSubheading: string;
+  displayEmptyStateBox?: boolean;
+}
+
+const OverviewTab: React.FC<OverviewTabProps> = ({
   docs,
-  emptyStateSubheading
+  emptyStateSubheading,
+  displayEmptyStateBox = true
 }) => {
   const md = useMarkdownRenderer();
   const docsHtml = useMemo(() => {
@@ -14,13 +22,15 @@ const OverviewTab: React.FC<{ docs?: string; emptyStateSubheading: string }> = (
   }, [md, docs]);
 
   if (!docsHtml) {
-    return (
+    return displayEmptyStateBox ? (
       <EmptyState
         testId="overview-empty"
         icon={<BookIcon />}
         heading="No overview content yet"
         subheading={emptyStateSubheading}
       />
+    ) : (
+      <NoContentText text="No overview content yet" />
     );
   }
 
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
index f59f9726..d9f99816 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
@@ -216,6 +216,7 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
           <OverviewTab
             docs={getItemDocs(item)}
             emptyStateSubheading="This request has no docs. Add one in Bruno to introduce your API to readers: what it does, who it's for, and how to authenticate."
+            displayEmptyStateBox={false}
           />
         </div>
       )
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx
index 7eaabd34..41e4f500 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/ResponsePane.tsx
@@ -4,7 +4,8 @@ import ResponseBodyTab from '../../Common/ResponseBodyTab';
 import ResponseHeadersTab from '../../Common/ResponseHeadersTab';
 import TestResultsTab from '../../Common/TestResultsTab';
 import ErrorBanner from '../../../../../../ui/ErrorBanner/ErrorBanner';
-import { StyledWrapper } from './StyledWrapper';
+import { SendIconWrapper, StyledWrapper } from './StyledWrapper';
+import { SendIcon } from '../../../../../../assets/icons';
 
 interface ResponsePaneProps {
   response: any;
@@ -37,15 +38,11 @@ const ResponsePane: React.FC<ResponsePaneProps> = ({ response, isLoading }) => {
 
   if (!response) {
     return (
-      <div className="h-full flex items-center justify-center" style={{ backgroundColor: 'var(--bg-primary)' }}>
-        <div className="text-center">
-          <div className="w-16 h-16 mx-auto mb-4 opacity-50">
-            <svg fill="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-            </svg>
-          </div>
-          <p style={{ color: 'var(--text-secondary)' }}>Click Send to make a request</p>
-        </div>
+      <div className="h-full flex flex-col items-center justify-center" style={{ backgroundColor: 'var(--bg-primary)' }}>
+        <SendIconWrapper className="mb-4 send-icon">
+          <SendIcon width={26} height={24} />
+        </SendIconWrapper>
+        <p style={{ color: 'var(--oc-tabs-secondary-inactive-color)' }}>Click Send to make a request</p>
       </div>
     );
   }
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts
index 367a61f5..0acdcbc4 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/ResponsePane/StyledWrapper.ts
@@ -9,4 +9,20 @@ export const StyledWrapper = styled.div`
     min-height: 0;
     overflow-y: auto;
   }
+
+  & .send-icon {
+    padding: 0.5625rem;
+    border-radius: 50%;
+    background: var(--oc-background-mantle);
+  }
 `;
+
+export const SendIconWrapper = styled.div`
+  padding: 0.5625rem;
+  border-radius: 50%;
+  background: var(--oc-background-mantle);
+
+  svg {
+    color: var(--text-muted);
+  }
+`

From 9ff4b533f502d09a2073b263d7e2bb7b4d89d9ec Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 17:48:40 +0530
Subject: [PATCH 08/14] Show `JS` for a script during pagination

---
 packages/oc-docs/src/components/PrevNext/PrevNext.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/oc-docs/src/components/PrevNext/PrevNext.tsx b/packages/oc-docs/src/components/PrevNext/PrevNext.tsx
index e13ceae4..a5b22a2b 100644
--- a/packages/oc-docs/src/components/PrevNext/PrevNext.tsx
+++ b/packages/oc-docs/src/components/PrevNext/PrevNext.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import type { SeqNeighbor } from '../../routing/types';
+import type { PageType, SeqNeighbor } from '../../routing/types';
 import { getMethodColorVar } from '../../theme/methodColors';
 import { getShortMethod } from '../../utils/request';
 import { ChevronLeftIcon, ChevronRightIcon } from '../../assets/icons';
@@ -8,12 +8,14 @@ import { StyledWrapper } from './StyledWrapper';
 
 const toPath = (slug: string) => `/${slug}`;
 
-const MethodTag: React.FC<{ method?: string }> = ({ method }) =>
+const MethodTag: React.FC<{ method?: string, type: PageType }> = ({ method, type }) =>
   method ? (
     <span className="prevnext-method" style={{ color: getMethodColorVar(method) }}>
       {getShortMethod(method)}
     </span>
-  ) : null;
+  ) : type === 'script' ? (
+    <span className="prevnext-method" style={{ color: 'var(--oc-primary-text)' }}>JS</span>
+  ): null;
 
 const Card: React.FC<{ dir: 'prev' | 'next'; neighbor: SeqNeighbor; search: string }> = ({ dir, neighbor, search }) => (
   <Link
@@ -29,7 +31,7 @@ const Card: React.FC<{ dir: 'prev' | 'next'; neighbor: SeqNeighbor; search: stri
     <span className="prevnext-textcol">
       <span className="prevnext-label">{dir === 'prev' ? 'Previous' : 'Next'}</span>
       <span className="prevnext-name">
-        <MethodTag method={neighbor.method} />
+        <MethodTag method={neighbor.method} type={neighbor.type} />
         <span className="prevnext-name-text">{neighbor.name}</span>
       </span>
     </span>

From 5ce1b68b47a04ccf30b27ce82b817096be456359 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 17:59:46 +0530
Subject: [PATCH 09/14] Fix the `g` getting clipped from bottom

---
 packages/oc-docs/src/components/PrevNext/StyledWrapper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts b/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts
index 1e63b993..f0b43daf 100644
--- a/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/PrevNext/StyledWrapper.ts
@@ -74,7 +74,7 @@ export const StyledWrapper = styled.nav`
     max-width: 100%;
     min-width: 0;
     font-size: 0.8125rem;
-    line-height: 1;
+    line-height: 1.2;
     font-weight: 600;
     color: var(--oc-text);
   }

From 343b7a96252fdb55f60dba94bf192a7a949b7b55 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 18:27:14 +0530
Subject: [PATCH 10/14] Improve the styling for the sidebar component and
 overview page

---
 .../Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx |  4 ++--
 .../src/components/Docs/Sidebar/StyledWrapper.ts   | 10 +++++-----
 .../src/components/PageWrapper/StyledWrapper.ts    |  2 +-
 .../Playground/PlaygroundSidebar/StyledWrapper.ts  | 14 +++++++-------
 .../oc-docs/src/pages/Overview/StyledWrapper.ts    |  4 ++--
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
index d70e0bc2..8033e406 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
+++ b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
@@ -57,8 +57,8 @@ const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({
       // indent, while each level's glyph still lines up under its parent. Right
       // margin keeps the highlight short of the edge: 8px at root, 4px when nested.
       style={{
-        marginLeft: `${(level * 19 + 4) / 16}rem`,
-        paddingLeft: '0.25rem',
+        marginLeft: `${(level * 19) / 16}rem`,
+        paddingLeft: '0.5rem',
         marginRight: level === 0 ? '0.5rem' : '0.25rem'
       }}
       data-testid={testId}
diff --git a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
index cfc625bf..69824b75 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
@@ -9,7 +9,7 @@ export const StyledWrapper = styled.div`
   color: var(--oc-sidebar-color);
 
   .sidebar-items::-webkit-scrollbar {
-    width: 6px;
+    width: 0.375rem;
   }
   .sidebar-items::-webkit-scrollbar-track {
     background: transparent;
@@ -18,7 +18,7 @@ export const StyledWrapper = styled.div`
   .sidebar-items::-webkit-scrollbar-thumb {
     background-color: transparent;
     border: none;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     transition: background-color 0.4s ease;
   }
   .sidebar-items.scrolling::-webkit-scrollbar-thumb {
@@ -30,13 +30,13 @@ export const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     gap: 1px;
-    padding: 10px 6px 0 6px;
+    padding: 0.625rem 0.75rem 0 0.75rem;
   }
 
   .sidebar-divider {
     flex-shrink: 0;
     height: 1px;
-    margin: 8px 0;
+    margin: 0.5rem 0;
     background-color: var(--oc-border-border0);
   }
 
@@ -48,6 +48,6 @@ export const StyledWrapper = styled.div`
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 0 0 0 0.375rem;
+    padding: 0 0 0 0.75rem;
   }
 `;
diff --git a/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts
index 9983c7a1..3f25c5e0 100644
--- a/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export const StyledWrapper = styled.div`
   max-width: 100rem;
   margin-inline: auto;
-  padding: 2rem 3rem;
+  padding: 1rem 3rem;
 
   @container docs (max-width: 768px) {
     padding: 0.9375rem 1.25rem;
diff --git a/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
index 4af54756..7f899672 100644
--- a/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
@@ -10,9 +10,9 @@ export const StyledWrapper = styled.div`
   .controls {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
     flex-shrink: 0;
-    padding: 12px;
+    padding: 0.75rem;
   }
 
   .controls > :first-child {
@@ -22,9 +22,9 @@ export const StyledWrapper = styled.div`
 
   .controls .env-switcher-trigger {
     width: 100%;
-    height: 28px;
+    height: 1.75rem;
     justify-content: space-between;
-    padding: 5px 8px;
+    padding: 0.3125rem 0.5rem;
     border-radius: var(--oc-radius);
   }
 
@@ -34,8 +34,8 @@ export const StyledWrapper = styled.div`
 
   .env-settings {
     flex: none;
-    width: 28px;
-    height: 28px;
+    width: 1.75rem;
+    height: 1.75rem;
     border: 1px solid var(--oc-border-border2);
     border-radius: var(--oc-radius);
     color: var(--text-secondary);
@@ -55,7 +55,7 @@ export const StyledWrapper = styled.div`
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 4px 6px 12px;
+    padding: 0.25rem 0.5rem 0.75rem;
   }
 
   &.mobile .navlink-main {
diff --git a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts
index b078f674..cbdb8ce4 100644
--- a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts
+++ b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts
@@ -25,8 +25,8 @@ export const StyledWrapper = styled.div`
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 2rem;
-    margin-top: 2rem;
-    padding-top: 2rem;
+    margin-top: 1.75rem;
+    padding-top: 1.625rem;
     border-top: 1px solid var(--border-color);
   }
 

From 5d4fab113542e27a53a037ae557271f7832cd520 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 18:31:20 +0530
Subject: [PATCH 11/14] Minor fix

---
 .../components/Playground/PlaygroundSidebar/StyledWrapper.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
index 7f899672..bcae86de 100644
--- a/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/PlaygroundSidebar/StyledWrapper.ts
@@ -55,7 +55,7 @@ export const StyledWrapper = styled.div`
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 0.25rem 0.5rem 0.75rem;
+    padding: 0.25rem 0.75rem 0.75rem;
   }
 
   &.mobile .navlink-main {

From 642449197d6954d0f084e3d6e41eb32efdd06072 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Wed, 22 Jul 2026 18:42:11 +0530
Subject: [PATCH 12/14] Update the title styling for params tab

---
 .../Views/Common/{ => ParamsTab}/ParamsTab.tsx  | 11 ++++++-----
 .../Views/Common/ParamsTab/StyledWrapper.ts     | 17 +++++++++++++++++
 .../PlaygroundView/RequestPane/RequestPane.tsx  |  2 +-
 3 files changed, 24 insertions(+), 6 deletions(-)
 rename packages/oc-docs/src/components/Playground/Content/Views/Common/{ => ParamsTab}/ParamsTab.tsx (93%)
 create mode 100644 packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
similarity index 93%
rename from packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx
rename to packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
index 0d79be59..ab64f4f7 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
-import KeyValueTable, { type KeyValueRow } from '../../../../../components/KeyValueTable/KeyValueTable';
+import KeyValueTable, { type KeyValueRow } from '../../../../../KeyValueTable/KeyValueTable';
+import { StyledWrapper } from './StyledWrapper';
 
 interface ParamsTabProps {
   params: Array<{ name?: string; value?: string; disabled?: boolean; type?: string }>;
@@ -38,11 +39,11 @@ const ParamsSection: React.FC<ParamsSectionProps> = React.memo(({
 }) => (
   <div className="space-y-3">
     <div className="flex items-center justify-between mb-2">
-      <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+      <span className="params-section-title">
         {title}
       </span>
       {description && (
-        <span className="text-xs leading-tight" style={{ color: 'var(--text-secondary)' }}>
+        <span className="text-xs leading-tight description">
           {description}
         </span>
       )}
@@ -108,7 +109,7 @@ export const ParamsTab: React.FC<ParamsTabProps> = ({
   const hasPath = pathData.length > 0;
 
   return (
-    <div className="space-y-4">
+    <StyledWrapper className="space-y-4">
       {/* Query table: always shown so query params can be viewed/added
           regardless of whether the request currently has any. */}
       <ParamsSection
@@ -131,7 +132,7 @@ export const ParamsTab: React.FC<ParamsTabProps> = ({
           readOnlyKey={true}
         />
       )}
-    </div>
+    </StyledWrapper>
   );
 };
 
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts
new file mode 100644
index 00000000..c3836d38
--- /dev/null
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ParamsTab/StyledWrapper.ts
@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.div`
+
+  .description {
+    color: 'var(--text-secondary)'
+  }
+  
+  .params-section-title {
+    margin: 0 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0;
+    color: var(--oc-colors-text-subtext2);
+  }
+`;
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
index d9f99816..2d39903b 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
@@ -5,7 +5,7 @@ import Tabs from '../../../../../../ui/Tabs/Tabs';
 import { KeyValueRow } from '../../../../../../components/KeyValueTable/KeyValueTable';
 import { rowToVariable } from '../../../../../../utils/variableDataType';
 import HeadersTab from '../../Common/HeadersTab/HeadersTab';
-import ParamsTab from '../../Common/ParamsTab';
+import ParamsTab from '../../Common/ParamsTab/ParamsTab';
 import BodyTab from '../../Common/BodyTab';
 import BodyModeSelector from '../../Common/BodyModeSelector/BodyModeSelector';
 import AuthTab from '../../Common/AuthTab/AuthTab';

From 0ac37ce0bb978784373e4019be96f0823ffde452 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Thu, 23 Jul 2026 12:04:13 +0530
Subject: [PATCH 13/14] Request page changes

---
 .../Content/Views/Common/HeadersTab/HeadersTab.tsx   | 12 +++++++-----
 .../Content/Views/Common/ScriptsTab/ScriptsTab.tsx   | 10 ++++++----
 .../Views/PlaygroundView/RequestPane/RequestPane.tsx |  6 ------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
index 3c14514e..c68b9edd 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
@@ -68,13 +68,15 @@ const HeadersDisplay: React.FC<Omit<HeadersTabProps, 'title' | 'description'>> =
   );
 };
 
-export const HeadersTab: React.FC<HeadersTabProps> = ({ headers, onHeadersChange, title = 'Headers', description }) => {
+export const HeadersTab: React.FC<HeadersTabProps> = ({ headers, onHeadersChange, title, description }) => {
   return (
     <StyledWrapper className="space-y-3">
-      <div className="flex items-center justify-between mb-4">
-        {title && <span className="title text-sm font-semibold">{title}</span>}
-        {description && <span className="description text-xs leading-tight">{description}</span>}
-      </div>
+      {(Boolean(title) || Boolean(description)) && (
+        <div className="flex items-center justify-between mb-4">
+          {title && <span className="title text-sm font-semibold">{title}</span>}
+          {description && <span className="description text-xs leading-tight">{description}</span>}
+        </div>
+      )}
       <HeadersDisplay headers={headers} onHeadersChange={onHeadersChange} />
     </StyledWrapper>
   );
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
index 0246dbcb..8cbfd435 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/Common/ScriptsTab/ScriptsTab.tsx
@@ -65,10 +65,12 @@ export const ScriptsTab: React.FC<ScriptsTabProps> = ({
 
   return (
     <StyledWrapper className="space-y-4">
-      <div className="flex items-center justify-between mb-4">
-        {Boolean(title) && <span className="title text-sm font-semibold">{title}</span>}
-        {description && <span className="description text-xs leading-tight">{description}</span>}
-      </div>
+      {(Boolean(title) || Boolean(description)) && (
+        <div className="flex items-center justify-between mb-4">
+          {title && <span className="title text-sm font-semibold">{title}</span>}
+          {description && <span className="description text-xs leading-tight">{description}</span>}
+        </div>
+      )}
 
       <div className="space-y-4">
         <Tabs
diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
index 083fff60..35801f49 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
@@ -147,7 +147,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onVariablesChange={handleRequestVariablesChange}
       postResponseVars={postResponseVars}
       onPostResponseVarsChange={handlePostResponseVarsChange}
-      description="These variables will be available to this request."
     />
   );
 
@@ -155,7 +154,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <HeadersTab
       headers={headers}
       onHeadersChange={handleHeadersChange}
-      description="Headers sent with this request."
     />
   );
 
@@ -173,7 +171,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onAuthChange={() => {}} // Not used for full auth
       onItemChange={onItemChange}
       item={item}
-      description="Configures authentication for this request."
       showFullAuth={true}
     />
   );
@@ -182,7 +179,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <ScriptsTab
       scripts={scriptsObj}
       onScriptChange={handleScriptChange}
-      description="Pre and post-request scripts that run before and after this request is sent."
       showTests={false}
     />
   );
@@ -192,7 +188,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       assertions={assertions}
       onAssertionsChange={handleAssertionsChange}
       title=""
-      description="Assertions that validate the response of this request."
     />
   );
 
@@ -200,7 +195,6 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <TestsTab
       scripts={scriptsObj}
       onScriptChange={handleScriptChange}
-      description="These tests run every time this request is sent."
     />
   );
 

From 28665530404326f2751e341390ba46cc8cf38a4c Mon Sep 17 00:00:00 2001
From: Vineet Sharma <vineet@usebruno.com>
Date: Thu, 23 Jul 2026 13:29:03 +0530
Subject: [PATCH 14/14] Restore descriptions for tab panels in request pane

---
 .../Content/Views/PlaygroundView/RequestPane/RequestPane.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
index 35801f49..41eba746 100644
--- a/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
+++ b/packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
@@ -147,6 +147,7 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onVariablesChange={handleRequestVariablesChange}
       postResponseVars={postResponseVars}
       onPostResponseVarsChange={handlePostResponseVarsChange}
+      description="These variables will be available to this request."
     />
   );
 
@@ -154,6 +155,7 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
     <HeadersTab
       headers={headers}
       onHeadersChange={handleHeadersChange}
+      description="Headers sent with this request."
     />
   );
 
@@ -172,6 +174,7 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       onItemChange={onItemChange}
       item={item}
       showFullAuth={true}
+      description="Configures authentication for this request."
     />
   );
 
@@ -180,6 +183,7 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange }) => {
       scripts={scriptsObj}
       onScriptChange={handleScriptChange}
       showTests={false}
+      description="Pre and post-request scripts that run before and after this request is sent."
     />
   );