Merge pull request #4994 from maintainer-bruno/fix/minor-layout-fixes

fix(layout): minor layout css fixes

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>
       )}

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 {

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%'

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

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) => (