fix: resolve tab flickering when switching between requests (#6825)

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

@@ -14,6 +14,10 @@ const Wrapper = styled.div`
     z-index: 0;
   }
 
+  .scroll-chevrons.hidden {
+    display: none;
+  }
+
   .tabs-scroll-container {
     overflow-x: auto;
     overflow-y: clip;
@@ -192,10 +196,6 @@ const Wrapper = styled.div`
     }
   }
 
-  &.has-chevrons ul {
-    padding-left: 0;
-  }
-
   .special-tab-icon {
     color: ${(props) => props.theme.primary.text};
   }

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

@@ -103,14 +103,9 @@ const RequestTabs = () => {
     });
   };
 
-  const getRootClassname = () => {
-    return classnames({
-      'has-chevrons': showChevrons
-    });
-  };
   // Todo: Must support ephemeral requests
   return (
-    <StyledWrapper className={getRootClassname()}>
+    <StyledWrapper>
       {newRequestModalOpen && (
         <NewRequest collectionUid={activeCollection?.uid} onClose={() => setNewRequestModalOpen(false)} />
       )}
@@ -118,12 +113,11 @@ const RequestTabs = () => {
         <>
           <CollectionToolBar collection={activeCollection} />
           <div className="flex items-center gap-2 pl-2" ref={collectionTabsRef}>
-
-            {showChevrons ? (
+            <div className={classnames('scroll-chevrons', { hidden: !showChevrons })}>
               <ActionIcon size="lg" onClick={leftSlide} aria-label="Left Chevron" style={{ marginBottom: '3px' }}>
                 <IconChevronLeft size={18} strokeWidth={1.5} />
               </ActionIcon>
-            ) : null}
+            </div>
             {/* Moved to post mvp */}
             {/* <li className="select-none new-tab mr-1" onClick={createNewTab}>
               <div className="flex items-center home-icon-container">
@@ -175,11 +169,11 @@ const RequestTabs = () => {
               </ActionIcon>
             )}
 
-            {showChevrons ? (
+            <div className={classnames('scroll-chevrons', { hidden: !showChevrons })}>
               <ActionIcon size="lg" onClick={rightSlide} aria-label="Right Chevron" style={{ marginBottom: '3px' }}>
                 <IconChevronRight size={18} strokeWidth={1.5} />
               </ActionIcon>
-            ) : null}
+            </div>
             {/* Moved to post mvp */}
             {/* <li className="select-none new-tab choose-request">
                 <div className="flex items-center">