From 15bac66ae72dd0c0ae6dd9c92fecbe8a0071920f Mon Sep 17 00:00:00 2001 From: Sundram Gupta Date: Mon, 31 Aug 2026 16:04:11 +0530 Subject: [PATCH 1/3] fix(docs): truncate long tag filter labels and remove redundant clear button (BRU-4028) A single selected long tag now ellipsizes in the search filter row instead of wrapping and clipping the row; the method chips keep their width while the tag trigger absorbs the shrink. The no-matches state loses its duplicate Clear filters button (Clear all in the filter row already covers it) and its search icon now uses the brand tone, matching the initial empty state. --- .../components/Search/SearchBar/SearchBar.tsx | 9 ++------ .../Search/SearchBar/StyledWrapper.ts | 22 ++++--------------- .../bruno-api-docs/src/sampleCollection.ts | 2 +- .../src/ui/Dropdown/Dropdown.tsx | 2 +- .../src/ui/Dropdown/StyledWrapper.ts | 12 ++++++++++ 5 files changed, 20 insertions(+), 27 deletions(-) diff --git a/packages/bruno-api-docs/src/components/Search/SearchBar/SearchBar.tsx b/packages/bruno-api-docs/src/components/Search/SearchBar/SearchBar.tsx index f46d140b..145730e3 100644 --- a/packages/bruno-api-docs/src/components/Search/SearchBar/SearchBar.tsx +++ b/packages/bruno-api-docs/src/components/Search/SearchBar/SearchBar.tsx @@ -243,7 +243,7 @@ export const SearchBar: React.FC = ({ open, onOpenChange, focusN
{showInitial ? (
-
) : results.length === 0 ? (
-
) : (
    = ({ aria-controls={open ? menuId : undefined} onClick={() => setOpen((p) => !p)} > - {label} + {label} diff --git a/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts b/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts index db9f679c..55ce9ac9 100644 --- a/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts +++ b/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 { From c3a7b8e8e5a18c84dbcd51379adaddcaa8eafef0 Mon Sep 17 00:00:00 2001 From: Sundram Gupta Date: Mon, 31 Aug 2026 19:27:12 +0530 Subject: [PATCH 2/3] fix(ui): added margin to the tag dropdown options --- packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts b/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts index 55ce9ac9..8ff62543 100644 --- a/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts +++ b/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts @@ -87,6 +87,7 @@ export const StyledWrapper = styled.div` color: var(--oc-text); background: transparent; border: 0; + margin-top: 2px; border-radius: var(--oc-radius); } .dropdown-option:hover, From 9d4a6c1373b5b9c2114208d858c9902fa5dc00a3 Mon Sep 17 00:00:00 2001 From: Sundram Gupta Date: Mon, 31 Aug 2026 19:42:08 +0530 Subject: [PATCH 3/3] fix(docs): addressed qa comments --- .../src/components/Tags/StyledWrapper.ts | 10 ++++++---- packages/bruno-api-docs/src/sampleCollection.ts | 4 ++-- .../bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts | 4 +++- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/bruno-api-docs/src/components/Tags/StyledWrapper.ts b/packages/bruno-api-docs/src/components/Tags/StyledWrapper.ts index 595b37ef..ba516622 100644 --- a/packages/bruno-api-docs/src/components/Tags/StyledWrapper.ts +++ b/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; } `; diff --git a/packages/bruno-api-docs/src/sampleCollection.ts b/packages/bruno-api-docs/src/sampleCollection.ts index d596f2c2..9bf0445d 100644 --- a/packages/bruno-api-docs/src/sampleCollection.ts +++ b/packages/bruno-api-docs/src/sampleCollection.ts @@ -137,7 +137,7 @@ items: - name: "Live Updates" description: "Streams live order updates over a WebSocket connection." type: "websocket" - tags: ["realtime", "extremely-long-tag-name-used-to-verify-the-search-filter-trigger-truncates-instead-of-wrapping"] + tags: ["realtime"] url: "{{host}}/ws/updates" docs: | # Websockets @@ -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: diff --git a/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts b/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts index 8ff62543..f34107f2 100644 --- a/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts +++ b/packages/bruno-api-docs/src/ui/Dropdown/StyledWrapper.ts @@ -87,9 +87,11 @@ export const StyledWrapper = styled.div` color: var(--oc-text); background: transparent; border: 0; - margin-top: 2px; border-radius: var(--oc-radius); } + .dropdown-menu li + li { + margin-top: 2px; + } .dropdown-option:hover, .dropdown-option:focus-visible { outline: none;