Skip to content

Commit 9204da0

Browse files
mlaetitiaclaude
andcommitted
Take the dropdown chevron out of the text flow, so the label no longer collapses into an ellipsis
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011rCHPCdbV5C5dDJjEmMDuy
1 parent 2b3b10b commit 9204da0

3 files changed

Lines changed: 13 additions & 14 deletions

File tree

‎themes/osi/assets/scss/_6_components.navigation--subnav.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -387,22 +387,22 @@ $chevronDown: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/sv
387387
}
388388

389389
& > a {
390-
padding-right: .5em;
390+
padding-right: 1.15em;
391391

392392
// masked so the chevron takes the link's colour; empty content keeps it out of
393393
// the accessible name, and aria-expanded carries the open state
394+
// out of flow: the anchor is `text-overflow: ellipsis`, and an inline chevron
395+
// counts toward the text width, so it pushed the label into an ellipsis
394396
&::after {
395-
backface-visibility: hidden;
396397
background-color: currentColor;
397398
content: '';
398-
display: inline-block;
399399
height: .45em;
400-
margin-left: .45em;
400+
margin-top: -.225em;
401401
mask: $chevronDown;
402+
position: absolute;
403+
right: 0;
404+
top: 50%;
402405
transition: transform .2s ease;
403-
// the mask re-rasterizes every frame of the rotation without its own layer
404-
will-change: transform;
405-
vertical-align: middle;
406406
width: .7em;
407407
-webkit-mask: $chevronDown;
408408
}

‎themes/osi/style.css‎

Lines changed: 5 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)