fixes (#6372)

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

@@ -74,7 +74,7 @@ const ExampleTab = ({ tab, collection }) => {
   }
 
   return (
-    <StyledWrapper className="flex items-center justify-between tab-container px-3">
+    <StyledWrapper className="flex items-center justify-between tab-container px-2">
       {showConfirmClose && (
         <ConfirmRequestClose
           item={item}
@@ -102,7 +102,7 @@ const ExampleTab = ({ tab, collection }) => {
         />
       )}
       <div
-        className={`flex items-center tab-label pl-2 ${tab.preview ? 'italic' : ''}`}
+        className={`flex items-center tab-label ${tab.preview ? 'italic' : ''}`}
         onContextMenu={handleRightClick}
         onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
         onMouseUp={(e) => {

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

@@ -33,7 +33,7 @@ const Wrapper = styled.div`
   }
 
   ul {
-    padding: 0 2px;
+    padding: 0 3px;
     margin: 0;
     display: flex;
     align-items: flex-end;
@@ -122,13 +122,13 @@ const Wrapper = styled.div`
         &::before {
           content: '';
           position: absolute;
-          bottom: -1px;
+          bottom: 1px;
           left: -8px;
           width: 8px;
           height: 8px;
           background: transparent;
-          border-bottom-right-radius: 8px;
-          box-shadow: 2px 2px 0 0 ${(props) => props.theme.bg || '#ffffff'};
+          border-bottom-right-radius: 6px;
+          box-shadow: 3px 3px 0 0 ${(props) => props.theme.bg || '#ffffff'};
           border-right: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
           border-bottom: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
         }
@@ -136,13 +136,13 @@ const Wrapper = styled.div`
         &::after {
           content: '';
           position: absolute;
-          bottom: -1px;
+          bottom: 1px;
           right: -8px;
           width: 8px;
           height: 8px;
           background: transparent;
-          border-bottom-left-radius: 8px;
-          box-shadow: -2px 2px 0 0 ${(props) => props.theme.bg || '#ffffff'};
+          border-bottom-left-radius: 6px;
+          box-shadow: -3px 3px 0 0 ${(props) => props.theme.bg || '#ffffff'};
           border-left: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
           border-bottom: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
         }

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js

@@ -26,6 +26,7 @@ const ExampleItem = ({ example, item, collection }) => {
   const [showRenameModal, setShowRenameModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const dropdownTippyRef = useRef(null);
+  const exampleRef = useRef(null);
 
   // Calculate indentation: item depth + 1 for examples
   const indents = range((item.depth || 0) + 1);
@@ -57,6 +58,16 @@ const ExampleItem = ({ example, item, collection }) => {
     setEditName(example.name);
   }, [example.name]);
 
+  useEffect(() => {
+    if (isExampleActive && exampleRef.current) {
+      try {
+        exampleRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      } catch (err) {
+        // ignore scroll errors
+      }
+    }
+  }, [isExampleActive]);
+
   const handleClone = async () => {
     // Calculate the index where the cloned example will be saved
     // It will be at the end of the examples array
@@ -137,6 +148,7 @@ const ExampleItem = ({ example, item, collection }) => {
 
   return (
     <StyledWrapper
+      ref={exampleRef}
       className={itemRowClassName}
       onClick={handleExampleClick}
       onDoubleClick={handleDoubleClick}

packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js

@@ -245,6 +245,16 @@ const Collection = ({ collection, searchText }) => {
     dragPreview(getEmptyImage(), { captureDraggingState: true });
   }, []);
 
+  useEffect(() => {
+    if (isCollectionFocused && collectionRef.current) {
+      try {
+        collectionRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      } catch (err) {
+        // ignore scroll errors
+      }
+    }
+  }, [isCollectionFocused]);
+
   if (searchText && searchText.length) {
     if (!doesCollectionHaveItemsMatchingSearchText(collection, searchText)) {
       return null;

packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js

@@ -41,7 +41,6 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 10px;
     padding: 10px 0;
-    background: ${(props) => props.theme.workspace.card.bg};
     border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.hoverBg};
     cursor: pointer;
 

packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js

@@ -8,6 +8,7 @@ import { createWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/ac
 import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
 import { multiLineMsg } from 'utils/common/index';
 import { formatIpcError } from 'utils/common/error';
+import Help from 'components/Help';
 
 const CreateWorkspace = ({ onClose }) => {
   const inputRef = useRef();
@@ -106,13 +107,16 @@ const CreateWorkspace = ({ onClose }) => {
           </div>
 
           <div className="mb-4">
-            <label htmlFor="workspaceLocation" className="block font-semibold mb-2">
+            <label htmlFor="workspaceLocation" className="font-semibold mb-2 flex items-center">
               Location
-              <span className="ml-1 text-gray-500 text-sm">
-                <svg className="inline w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-                </svg>
-              </span>
+              <Help>
+                <p>
+                  Bruno stores your workspaces on your computer's filesystem.
+                </p>
+                <p className="mt-2">
+                  Choose the location where you want to store this workspace.
+                </p>
+              </Help>
             </label>
             <div className="flex gap-2">
               <input
@@ -120,12 +124,13 @@ const CreateWorkspace = ({ onClose }) => {
                 type="text"
                 name="workspaceLocation"
                 readOnly={true}
-                className="block textbox flex-1 bg-gray-50"
+                className="block textbox flex-1 bg-gray-50 cursor-pointer"
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
                 value={formik.values.workspaceLocation || ''}
+                onClick={browse}
               />
               <button type="button" className="btn btn-sm btn-secondary" onClick={browse}>
                 Browse