Avoid clipping focus indicator around site title#2714
Avoid clipping focus indicator around site title#2714techfg wants to merge 1 commit intowithastro:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 72384d8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Hey @techfg! Sorry it took me so long to review this. Was just testing it now and it looks like this does introduce some layout issues. If I add a long title with the current version of Starlight it correctly hides behind the other items in the header UI: But with this branch, the search icon gets pushed behind the menu icon (and eventually off screen when the name is long enough/viewport is narrow enough): Given the issue currently only impacts sites that explicitly customize the focus styles AND have long titles, I’ll close this PR for now. Feel free to open a new one if you can figure out a solution that works properly for this scenario. |
|
Hi @delucis - Thanks for looking at this. My apologies, this PR originally included the change that was in #2722 but I ended up splitting the PRs since the fix in #2722 was related but also separate issue. This caused the I've submitted #3058 which is the same as this PR, just with |
Description
focus:visibleoutline ofsite-titlenot visible #2696overflow: hiddenand appliesmin-widthto ensure thetitle-wrapperis constrained to available space by flexbox. Additionally, it styles the title text (if its displayed) with elipses providing an improved UI so that text is no longer abruptly cut-off but rather gives an indication that there is more text that just isn't visible. If a logo is present, it will be automatically scaled and therefore doesn't require a container withoverflow: hidden. Tested in Edge, Chrome & Firefox.With a forced outline of
10px solid green:Before:
After:
Important
In performing testing on this PR, I identified other issues related to the way the header is displayed with large images and/or long text.
Will create a separate issue to track those.Created #2715.