fix: status bar & dev tools z-index issue (#5132)

packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js

@@ -13,7 +13,7 @@ const StyledWrapper = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px 16px;
+    padding: 0 16px;
     background: ${(props) => props.theme.console.headerBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
     flex-shrink: 0;

packages/bruno-app/src/components/Devtools/index.js

@@ -66,7 +66,6 @@ const Devtools = ({ mainSectionRef }) => {
   return (
     <>
       <div 
-        className="devtools-resize-handle"
         onMouseDown={handleDevtoolsResizeStart}
         style={{
           height: '4px',
@@ -79,7 +78,7 @@ const Devtools = ({ mainSectionRef }) => {
         onMouseEnter={(e) => e.target.style.backgroundColor = '#0078d4'}
         onMouseLeave={(e) => e.target.style.backgroundColor = isResizingDevtools ? '#0078d4' : 'transparent'}
       />
-      <div style={{ height: `${devtoolsHeight}px`, overflow: 'hidden', zIndex: 20, position: 'relative' }}>
+      <div style={{ height: `${devtoolsHeight}px`, overflow: 'hidden', position: 'relative' }}>
         <Console />
       </div>
     </>

packages/bruno-app/src/components/StatusBar/StyledWrapper.js

@@ -13,14 +13,12 @@ const StyledWrapper = styled.div`
     font-size: 12px;
     user-select: none;
     position: relative;
-    z-index: 15;
   }
 
   .status-bar-section {
     display: flex;
     align-items: center;
     position: relative;
-    z-index: 1;
   }
 
   .status-bar-group {