fix(docs-infra): align search result icon with text on mobile#68012
fix(docs-infra): align search result icon with text on mobile#68012funsaized wants to merge 1 commit intoangular:mainfrom
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
|
Deployed adev-preview for 8c5134f to: https://ng-dev-previews-fw--pr-angular-angular-68012-adev-prev-jeurun9f.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
It seems the same behavior is still occurring on my phone (Poco F5 Pro) 
|
There was a problem hiding this comment.
I believe this issue can't be fixed with CSS alone. There should be an HTML structure change. The icon, title text, and package badge (when present) can be wrapped together in a single container element or some other way so they always stay on the same flex line, preventing the icon from being separated from the text on narrow viewports.
|
@erkamyaman Updated the approach after testing locally. The previous commit wrapped icon + title + badge in a single container, but that caused the package badge to wrap underneath the icon on narrow viewports — same visual problem, different element. The fix now keeps the icon as a direct child of
Tested locally on narrow viewports — icon stays aligned with the title, and the badge wraps within the text column as expected. |
|
@funsaized I believe that you should use rebase for collapse in single commit |
On narrow viewports, the search result icon was pushed to its own flex line when the title text was too long, causing vertical misalignment. The fix wraps the title text and package badge in a single container that manages its own flex layout, preventing the icon from being separated from the text on narrow viewports. Fixes angular#68005
1676665 to
8c5134f
Compare
Ah good call. |
Summary
Fixes the vertically misaligned icon in search result items on mobile viewports.
Closes #68005
Problem
On narrow (mobile) viewports, the search result icon was pushed to its own flex line when the title text was too long. This caused the icon to appear at the top of the item, visually disconnected from the title text.
The root cause:
.docs-search-result__labelusesdisplay: flexwithflex-wrap: wrap. When the title span's min-content width (longest unbreakable word) plus the icon exceeded the container width, the title wrapped to the next flex line — leaving the icon orphaned on the first line.Fix
An HTML structure change in
search-dialog.component.htmland corresponding CSS update insearch-dialog.component.scss:The title text and package badge are wrapped in a new
<span class="docs-search-result__label__text">container, while the icon stays as a direct sibling. This gives two flex children in__label:flex-shrink: 0) — fixed-size, never squeezed or separated.flex: 1; min-width: 0; display: flex; flex-wrap: wrap) — takes remaining space; title text and badge flow inside it.Since
__labelno longer hasflex-wrap: wrap, the icon and text wrapper are always on the same flex line. Long title text word-wraps internally (overflow-wrap: break-word+min-width: 0). When the package badge doesn't fit, it wraps to the next line within the text wrapper — staying indented past the icon rather than dropping underneath it.