From ea0ef94b16ce19a2e44e2c7384201202d9c9113e Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Wed, 2 Sep 2026 13:50:41 +0530
Subject: [PATCH] fix(docs): align gRPC page header spacing with other request
 pages

The gRPC request page relied on Tailwind margin utilities for the title,
URL bar and description, but the Heading's Emotion styles reset margin
to 0 and won the cascade, collapsing the gap below the breadcrumb. Give
those elements page-scoped classNames and set the margins from the page
StyledWrapper, matching the spacing RequestPageLayout uses.
---
 .../src/pages/GrpcRequest/GrpcRequest.tsx            |  6 +++---
 .../src/pages/GrpcRequest/StyledWrapper.ts           | 12 ++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/bruno-api-docs/src/pages/GrpcRequest/GrpcRequest.tsx b/packages/bruno-api-docs/src/pages/GrpcRequest/GrpcRequest.tsx
index cd1584c2..eb9ceffe 100644
--- a/packages/bruno-api-docs/src/pages/GrpcRequest/GrpcRequest.tsx
+++ b/packages/bruno-api-docs/src/pages/GrpcRequest/GrpcRequest.tsx
@@ -184,11 +184,11 @@ export const GrpcRequest: React.FC<GrpcRequestProps> = ({
           testId="grpc-request-breadcrumb"
         />
 
-        <Heading size="md" className="mt-1" testId="grpc-request-title">{name}</Heading>
+        <Heading size="md" className="grpc-request-title" testId="grpc-request-title">{name}</Heading>
 
-        <RequestUrlBar method="gRPC" capitalizeMethod={false} url={url} className="mt-3" />
+        <RequestUrlBar method="gRPC" capitalizeMethod={false} url={url} className="grpc-request-url-bar" />
         {descHtml && (
-          <ViewMore className="mt-6" collapsedHeight="4.5rem" testId="grpc-request-description">
+          <ViewMore className="grpc-request-description" collapsedHeight="4.5rem" testId="grpc-request-description">
             <div
               className="markdown-documentation"
               data-nav-headings
diff --git a/packages/bruno-api-docs/src/pages/GrpcRequest/StyledWrapper.ts b/packages/bruno-api-docs/src/pages/GrpcRequest/StyledWrapper.ts
index 959b39d6..7ccbe294 100644
--- a/packages/bruno-api-docs/src/pages/GrpcRequest/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/pages/GrpcRequest/StyledWrapper.ts
@@ -7,6 +7,18 @@ export const StyledWrapper = styled.div`
   padding-top: 0.1rem;
   padding-bottom: 0.1rem;
 
+  .grpc-request-title {
+    margin-top: 0.25rem;
+  }
+
+  .grpc-request-url-bar {
+    margin-top: 0.75rem;
+  }
+
+  .grpc-request-description {
+    margin-top: 1.5rem;
+  }
+
   .grpc-request-empty {
     margin-top: 1.5rem;
   }