From 7fe6b47aa0849cdaea03eb55aa35f6b19259574e Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop@usebruno.com>
Date: Wed, 10 Dec 2025 04:30:58 +0530
Subject: [PATCH] chore: updated request tab padding (#6368)

* chore: updated request tab padding
---
 .../src/components/CollectionSettings/StyledWrapper.js    | 1 +
 .../Environments/EnvironmentSelector/StyledWrapper.js     | 4 ++--
 .../src/components/FolderSettings/StyledWrapper.js        | 1 +
 .../RequestPane/GrpcRequestPane/StyledWrapper.js          | 1 +
 .../RequestPane/RequestPaneTabs/StyledWrapper.js          | 8 +++-----
 .../src/components/RequestPane/RequestPaneTabs/index.js   | 7 ++++---
 .../components/RequestTabs/RequestTab/StyledWrapper.js    | 3 +++
 .../ResponseExampleResponsePane/StyledWrapper.js          | 1 +
 .../GrpcResponsePane/GrpcQueryResult/StyledWrapper.js     | 1 +
 .../ResponsePane/GrpcResponsePane/StyledWrapper.js        | 1 +
 .../src/components/ResponsePane/StyledWrapper.js          | 1 +
 .../ResponsePane/WsResponsePane/StyledWrapper.js          | 1 +
 .../RunnerResults/ResponsePane/StyledWrapper.js           | 1 +
 .../src/components/ShareCollection/StyledWrapper.js       | 1 +
 packages/bruno-app/src/themes/dark.js                     | 1 +
 packages/bruno-app/src/themes/light.js                    | 4 +++-
 16 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
index ac94e59d2..e1dcbf99a 100644
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index 1f05e9c03..d70c10b76 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   .current-environment {
     border-radius: ${(props) => props.theme.border.radius.base};
-    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    padding: 0.25rem 0.3rem 0.25rem 0.5rem;
     user-select: none;
     background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.bg};
     border: 1px solid ${(props) => props.theme.app.collection.toolbar.environmentSelector.border};
@@ -34,7 +34,7 @@ const Wrapper = styled.div`
 
     .env-separator {
       color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.separator};
-      margin: 0 0.25rem;
+      margin: 0 0.35rem;
     }
 
     .env-text-inactive {
diff --git a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
index f94cf0c99..1cde03f32 100644
--- a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
@@ -22,6 +22,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
index 44afba38d..efcd744e2 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
index ef1b84e02..22a18996b 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
@@ -3,11 +3,8 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   &.tabs {
     div.more-tabs {
-      color: ${(props) => props.theme.text} !important;
-      background-color: ${(props) => props.theme.requestTabs.bg} !important;
-      &:hover {
-        background-color: ${(props) => props.theme.requestTabs.icon.hoverBg} !important;
-      }
+      color: var(--color-tab-inactive) !important;
+      border-bottom: solid 2px transparent;
     }
 
     div.tab {
@@ -34,6 +31,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js
index c01364c29..1705168b9 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import Dropdown from 'components/Dropdown';
-import { IconDots } from '@tabler/icons';
+import { IconChevronDown } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const DROPDOWN_WIDTH = 60;
@@ -154,8 +154,9 @@ const RequestPaneTabs = ({
       {overflowTabs.length > 0 && (
         <Dropdown
           icon={(
-            <div className="tab more-tabs select-none flex items-center cursor-pointer rounded-md" style={{ padding: '2px 8px' }}>
-              <IconDots size={18} />
+            <div className="more-tabs select-none flex items-center cursor-pointer gap-1">
+              <span>More</span>
+              <IconChevronDown size={14} strokeWidth={2} />
             </div>
           )}
           placement="bottom-start"
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
index da3cdd108..1ce1ee691 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -24,6 +24,9 @@ const StyledWrapper = styled.div`
     overflow: hidden;
     white-space: nowrap;
     font-size: 0.8125rem;
+
+    // so that the name does not cutoff when italicized
+    padding-right: 2px;
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
index 72d0c5260..a4b6a0ab7 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
index 0be8ab9e4..b374ef9fd 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
@@ -51,6 +51,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
index f11509db7..d702b1537 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
@@ -25,6 +25,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
index 584588821..4d08d70a3 100644
--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
index f11509db7..d702b1537 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
@@ -25,6 +25,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
index 730df9033..7d0909815 100644
--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
index 72e42bb6a..07f04445c 100644
--- a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index 1199a60de..e5a8fa48b 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -334,6 +334,7 @@ const darkTheme = {
   tabs: {
     marginRight: '1.2rem',
     active: {
+      fontWeight: 400,
       color: '#CCCCCC',
       border: '#d9a342'
     },
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index 17ddee43c..6f038a70d 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -7,6 +7,7 @@ const colors = {
 
   WHITE: '#fff',
   BLACK: '#000',
+  SLATE_BLACK: '#343434',
   GREEN: '#047857',
   YELLOW: '#cf8730',
 
@@ -340,7 +341,8 @@ const lightTheme = {
   tabs: {
     marginRight: '1.2rem',
     active: {
-      color: '#343434',
+      fontWeight: 400,
+      color: colors.SLATE_BLACK,
       border: '#cf8730'
     },
     secondary: {