From 47e420dec17bd5936aaed0a8bff3c0178e637d4e Mon Sep 17 00:00:00 2001
From: Maintainer Bruno <code@usebruno.com>
Date: Fri, 27 Jun 2025 13:00:52 +0530
Subject: [PATCH] fix(layout): minor layout css fixes

---
 .../RequestPane/RequestBody/RequestBodyMode/index.js   |  4 ++--
 .../src/components/RequestTabPanel/StyledWrapper.js    | 10 +++++++++-
 .../bruno-app/src/components/ResponsePane/index.js     |  4 ++--
 .../bruno-app/src/components/Table/StyledWrapper.js    |  3 ---
 packages/bruno-app/src/components/Table/index.js       |  2 +-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
index db73597df..caeb555ff 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
@@ -21,7 +21,7 @@ const RequestBodyMode = ({ item, collection }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
-        {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
+        {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
       </div>
     );
   });
@@ -149,7 +149,7 @@ const RequestBodyMode = ({ item, collection }) => {
         </Dropdown>
       </div>
       {(bodyMode === 'json' || bodyMode === 'xml') && (
-        <button className="ml-1" onClick={onPrettify}>
+        <button className="ml-2" onClick={onPrettify}>
           Prettify
         </button>
       )}
diff --git a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
index 8339af6dc..3bee80c40 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
@@ -32,17 +32,25 @@ const StyledWrapper = styled.div`
   }
 
   &.vertical-layout {
+    .request-pane {
+      padding-bottom: 0.5rem;
+    }
+
+    .response-pane {
+      padding-top: 0.5rem;
+    }
+
     div.dragbar-wrapper {
       width: 100%;
       height: 10px;
       cursor: row-resize;
+      padding: 0 1rem;
 
       div.dragbar-handle {
         width: 100%;
         height: 1px;
         border-left: none;
         border-top: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
-        margin-top: 0.5rem;
       }
 
       &:hover div.dragbar-handle {
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index 5d85ce086..447eab43b 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -133,7 +133,7 @@ const ResponsePane = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
+      <div className="flex flex-wrap items-center px-4 tabs" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
           Response
         </div>
@@ -176,7 +176,7 @@ const ResponsePane = ({ item, collection }) => {
         ) : null}
       </div>
       <section
-        className={`flex flex-col min-h-0 relative pl-3 pr-4 auto`}
+        className={`flex flex-col min-h-0 relative px-4 auto`}
         style={{
           flex: '1 1 0',
           height: hasScriptError && showScriptErrorCard ? 'auto' : '100%'
diff --git a/packages/bruno-app/src/components/Table/StyledWrapper.js b/packages/bruno-app/src/components/Table/StyledWrapper.js
index eeead4ed2..53cddc0b2 100644
--- a/packages/bruno-app/src/components/Table/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Table/StyledWrapper.js
@@ -9,9 +9,6 @@ const StyledWrapper = styled.div`
 
     // for icon hover
     position: inherit;
-    left: -4px;
-    padding-left: 4px;
-    padding-right: 4px;
 
     grid-template-columns: ${({ columns }) =>
       columns?.[0]?.width
diff --git a/packages/bruno-app/src/components/Table/index.js b/packages/bruno-app/src/components/Table/index.js
index 7c9b48d7d..4944276c6 100644
--- a/packages/bruno-app/src/components/Table/index.js
+++ b/packages/bruno-app/src/components/Table/index.js
@@ -86,7 +86,7 @@ const Table = ({ minColumnWidth = 1, headers = [], children }) => {
   return (
     <StyledWrapper columns={columns}>
       <div className="relative">
-        <table ref={tableRef} className="px-4 inherit left-[4px]">
+        <table ref={tableRef} className="inherit">
           <thead>
             <tr>
               {columns.map(({ ref, name }, i) => (