fix(docs): search filter UI fixes for long tag names

packages/bruno-api-docs/src/components/Search/SearchBar/SearchBar.tsx

@@ -243,27 +243,22 @@ export const SearchBar: React.FC<SearchBarProps> = ({ open, onOpenChange, focusN
             <div className="search-results" data-testid="search-scroll">
               {showInitial ? (
                 <div className="search-empty">
-                  <span className="search-empty-icon" data-tone="brand" aria-hidden="true">
+                  <span className="search-empty-icon" aria-hidden="true">
                     <SearchIcon />
                   </span>
                   <p className="search-empty-title">Search the collection</p>
                   <p className="search-empty-text">Find by name or endpoint.</p>
                 </div>
               ) : results.length === 0 ? (
                 <div className="search-empty">
-                  <span className="search-empty-icon" data-tone="muted" aria-hidden="true">
+                  <span className="search-empty-icon" aria-hidden="true">
                     <SearchIcon />
                   </span>
                   <p className="search-empty-title">No matches</p>
                   <p className="search-empty-text">
                     Nothing matches {hasQuery ? <>“<b>{query}</b>”</> : 'these filters'}. Try a different
                     term or clear the filters.
                   </p>
-                  {hasFilter && (
-                    <button type="button" className="search-empty-clear" onClick={clearFilters}>
-                      Clear filters
-                    </button>
-                  )}
                 </div>
               ) : (
                 <ul

packages/bruno-api-docs/src/components/Search/SearchBar/StyledWrapper.ts

@@ -120,7 +120,10 @@ export const StyledWrapper = styled.div`
     flex-shrink: 0;
     border-bottom: 0.0625rem solid var(--oc-border-border0);
   }
-  [data-testid='search-folder-filter'],
+  [data-testid='search-tag-filter'] {
+    flex: 0 10000 auto;
+    min-width: 3.5rem;
+  }
   .search-clear {
     flex: 0 0 auto;
   }
@@ -177,15 +180,9 @@ export const StyledWrapper = styled.div`
     height: 3rem;
     margin-bottom: 0.625rem;
     border-radius: var(--oc-radius);
-  }
-  .search-empty-icon[data-tone='brand'] {
     background: color-mix(in srgb, var(--oc-accents-primary) 8%, transparent);
     color: var(--oc-accents-primary);
   }
-  .search-empty-icon[data-tone='muted'] {
-    background: var(--oc-background-surface0);
-    color: var(--oc-colors-text-subtext1);
-  }
   .search-empty-icon svg {
     width: 1.375rem;
     height: 1.375rem;
@@ -205,17 +202,6 @@ export const StyledWrapper = styled.div`
     color: var(--oc-text);
     font-weight: 500;
   }
-  .search-empty-clear {
-    margin-top: 0.625rem;
-    padding: 0.375rem 0.875rem;
-    cursor: pointer;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--oc-accents-primary);
-    background: color-mix(in srgb, var(--oc-accents-primary) 8%, transparent);
-    border: 0;
-    border-radius: var(--oc-radius);
-  }
 
   /* Collapsed = the below-desktop layout (icon + reveal row), driven by the
      shell's docs-area-derived mode — not a viewport media query, because the

packages/bruno-api-docs/src/components/Tags/StyledWrapper.ts

@@ -7,10 +7,10 @@ export const StyledWrapper = styled.div`
 
   .tag-chip {
     display: inline-flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 0.25rem;
-    height: 1.75rem;
-    padding: 0 0.25rem;
+    max-width: 100%;
+    padding: 0.3125rem 0.375rem;
     box-sizing: border-box;
     border: 1px solid var(--oc-border-border0);
     border-radius: var(--oc-radius);
@@ -32,6 +32,8 @@ export const StyledWrapper = styled.div`
   }
 
   .tag-chip-label {
-    line-height: 1;
+    min-width: 0;
+    line-height: 1.15;
+    overflow-wrap: anywhere;
   }
 `;

packages/bruno-api-docs/src/sampleCollection.ts

@@ -2235,7 +2235,7 @@ items:
   - name: "get users"
     type: "http"
     seq: 1
-    tags: ["users", "smoke"]
+    tags: ["users", "smoke", "extremely-long-tag-name-used-to-verify-the-search-filter-trigger-truncates-instead-of-wrapping"]
     method: "GET"
     url: "{{host}}/api/users?page=1&limit=10"
     headers:

packages/bruno-api-docs/src/ui/Dropdown/Dropdown.tsx

@@ -62,7 +62,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
         aria-controls={open ? menuId : undefined}
         onClick={() => setOpen((p) => !p)}
       >
-        {label}
+        <span className="dropdown-trigger-label">{label}</span>
         <span className="dropdown-chevron">
           <ChevronDownIcon />
         </span>

packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts

@@ -3,12 +3,16 @@ import styled from '@emotion/styled';
 export const StyledWrapper = styled.div`
   position: relative;
   display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
 
   .dropdown-button {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     height: 23px;
+    min-width: 0;
+    max-width: 100%;
     padding: 0 8px;
     box-sizing: border-box;
     font-family: 'Fira Code', var(--font-mono);
@@ -34,8 +38,16 @@ export const StyledWrapper = styled.div`
     outline-offset: 1px;
   }
 
+  .dropdown-trigger-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .dropdown-chevron {
     display: inline-flex;
+    flex-shrink: 0;
     transition: transform 0.12s ease;
   }
   .dropdown-button[aria-expanded='true'] .dropdown-chevron {
@@ -77,6 +89,9 @@ export const StyledWrapper = styled.div`
     border: 0;
     border-radius: var(--oc-radius);
   }
+  .dropdown-menu li + li {
+    margin-top: 2px;
+  }
   .dropdown-option:hover,
   .dropdown-option:focus-visible {
     outline: none;