You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When a history entry with a long title (e.g., "Tripadvisor: Over a billion reviews & contributions for Hotels, Attractions, Restaurants, and more") was selected in the omnibar, the suffix text pushed the user's typed text off-screen.
Root cause: The input's padding-right was set from a JS-measured suffix text width via canvas measureText(). For long titles, this consumed nearly the entire input width.
Fix: Replaced JS text measurement with CSS-only flex layout:
Input padding-right now only reserves space for the close button
.suffixSpacer (flex: none) positions the suffix after the completion text
.suffix truncates with ellipsis when space is limited
Removed the measureText canvas function entirely
Also updated suggestion list items to better match native macOS address bar:
Removed hard max-width: 60% cap on title
Title shrinks 1.5x faster than suffix (flex: 0 1.5 auto) matching native's lower title compression resistance
Suffix fills remaining space to right edge (flex: 1 1 auto)
Added text-align: left to override <button> default center alignment
Medium Risk
Medium risk because it changes omnibar input/suggestions layout and relies on CSS overflow/flex behavior that can differ across browsers, plus updates test expectations.
Overview
Fixes an omnibar rendering bug where long selected-suggestion suffixes could consume the input width and hide the user’s typed text by removing JS canvas text measurement and switching to a CSS-only flex/ellipsis layout (input only reserves space for the close button).
Tweaks suggestion row layout to better balance title vs suffix truncation (flex adjustments and text-align: left). Adds a component showcase for omnibar states (with mock provider/data), extends mocks to include a long history entry, and updates/expands Playwright coverage (suggestion count + new long-suggestion screenshot test).
Written by Cursor Bugbot for commit 3f4324e. This will update automatically on new commits. Configure here.
When a suggestion with a long title was selected, the suffix text width
(measured via canvas) was used to set the input's padding-right, consuming
nearly the entire input width and hiding the user's typed text.
Replaced JS-based text measurement with CSS-only flex layout:
- Input padding-right now only reserves space for the close button
- suffixSpacer (flex: none) positions the suffix after the completion text
- suffix truncates with ellipsis when space is limited
Also updated suggestion list items to match native macOS address bar layout:
- Removed hard 60% max-width cap on title
- Title and suffix share space proportionally (title flex-shrink: 1.5)
- Suffix fills remaining space to the right edge (flex: 1 1 auto)
- Added text-align: left to override button default center alignment
Added component showcase examples and screenshot test for long suggestions.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The reason will be displayed to describe this comment to others. Learn more.
Stale comment
Web Compatibility Assessment
No findings (no error/warning) in hostile-page API override categories. This PR does not touch injected runtime surfaces (wrapper-utils, DDGProxy, captured-globals, message bridge) and stays within special-pages/pages/new-tab omnibar UI/layout and test data.
special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css and SuggestionsList.module.css: flex/ellipsis-based truncation is consistent with native-like behavior and avoids previously fixed-width suffix reservation pushing input text off-screen.
Security Assessment
No findings (critical/error/warning).
No changes to privileged messaging transport, origin checks, event secrets, or config gating.
No new dynamic code execution (eval/Function), no new network requests, no postMessage changes, and no unsafe HTML injection patterns.
Added mock/example data is static and rendered as text nodes in Preact; no new data-exfiltration vector introduced.
Risk Level
Low Risk — scope is limited to omnibar presentation logic, mock data, examples, and screenshot/integration expectations, with no modifications to injected security-sensitive infrastructure.
Recommendations
Run special-pages screenshot tests on at least macOS + Windows projects to confirm truncation behavior remains stable across font metrics.
Add a focused integration assertion that the typed input remains visible when selected suggestion has a very long suffix (guard against regression of this exact bug class).
Keep the new omnibar examples as golden cases and include one RTL locale screenshot in follow-up coverage to validate truncation/alignment invariants.
The reason will be displayed to describe this comment to others. Learn more.
Web Compatibility Assessment
No blocking findings.
special-pages/pages/new-tab/app/omnibar/components/SearchForm.js (~62-63, ~116-123, ~184-223), info: Replacing dynamic canvas text measurement with CSS truncation reduces layout fragility and removes a runtime throw path from canvas.getContext('2d') failure. This aligns with compatibility-safe behavior for long suffixes and keeps input interaction contract unchanged.
special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css (~13-44, ~49-57), info: The new flex/ellipsis handling for .suffixSpacer and .suffix is consistent with the intended UI contract (input text remains visible; long suffixes truncate) and avoids prior right-padding over-allocation.
Security Assessment
No findings.
Scope is limited to special-pages/pages/new-tab UI/styles/mocks/tests; there are no changes to injected hostile-page runtime surfaces (captured-globals, wrapper utilities, DDGProxy, message bridge, platform transports, or config patching logic).
Risk Level
Low Risk: Changes are confined to NTP omnibar presentation and test fixtures/snapshots, with no modifications to security-critical injection or messaging paths.
Recommendations
Add one assertion in omnibar integration tests to verify typed text/caret remains visible with long selected suffix on narrow viewport widths (not just screenshot baselines).
Extend screenshot coverage to at least one non-darwin rendering target to catch font-metric/flex truncation differences across platforms.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
semver-patchBug fix / internal — no release needed
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1213440750515602
Description
When a history entry with a long title (e.g., "Tripadvisor: Over a billion reviews & contributions for Hotels, Attractions, Restaurants, and more") was selected in the omnibar, the suffix text pushed the user's typed text off-screen.
Root cause: The input's
padding-rightwas set from a JS-measured suffix text width via canvasmeasureText(). For long titles, this consumed nearly the entire input width.Fix: Replaced JS text measurement with CSS-only flex layout:
padding-rightnow only reserves space for the close button.suffixSpacer(flex: none) positions the suffix after the completion text.suffixtruncates with ellipsis when space is limitedmeasureTextcanvas function entirelyAlso updated suggestion list items to better match native macOS address bar:
max-width: 60%cap on titleflex: 0 1.5 auto) matching native's lower title compression resistanceflex: 1 1 auto)text-align: leftto override<button>default center alignmentTesting Steps
Checklist
🤖 Generated with Claude Code
Note
Medium Risk
Medium risk because it changes omnibar input/suggestions layout and relies on CSS overflow/flex behavior that can differ across browsers, plus updates test expectations.
Overview
Fixes an omnibar rendering bug where long selected-suggestion suffixes could consume the input width and hide the user’s typed text by removing JS canvas text measurement and switching to a CSS-only flex/ellipsis layout (input only reserves space for the close button).
Tweaks suggestion row layout to better balance title vs suffix truncation (
flexadjustments andtext-align: left). Adds a component showcase for omnibar states (with mock provider/data), extends mocks to include a long history entry, and updates/expands Playwright coverage (suggestion count + new long-suggestion screenshot test).Written by Cursor Bugbot for commit 3f4324e. This will update automatically on new commits. Configure here.