docs(adev): fix mobile layout shift in API reference filters#67670
docs(adev): fix mobile layout shift in API reference filters#67670anushkasingh-commits wants to merge 13 commits intoangular:mainfrom
Conversation
Improved wording to clarify how beginners can verify their environment and IDE are correctly set up after running the app.
…typically used to derive read-only state from other signals, `linkedSignal` is useful when the derived state should remain writable or preserve user-driven updates as its source changes. Use `linkedSignal` when the value depends on another signal but still needs to be explicitly set or updated in response to user interaction. Additionally, `linkedSignal` should be used when you need access to the previous state while reacting to a source signal.
|
Deployed adev-preview for ec2a1d2 to: https://ng-dev-previews-fw--pr-angular-angular-67670-adev-prev-cqiie38c.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
hawkgs
left a comment
There was a problem hiding this comment.
Thanks for the contribution @anushkasingh-commits! Unfortunately, I don't think your change addresses the actual issue. Ideally, we would like the width of the filter chip to accommodate for the checkmark that appears in front of the text when the filter is selected. The chip text could also be centered. Would you be able to update that?
Also, adev is not a valid scope. Please rename your commit to docs(docs-infra): ... instead.
|
Thanks for the feedback! I see what you mean about the checkmark causing the layout shift. I'll update the filter chip styling to reserve space for the icon and keep the text centered. I'll also rename the commit to use the correct scope. Working on the update now. |
6b5212e to
ee22dfb
Compare
|
@anushkasingh-commits, there are no changes to review now. Also, all commits should be squashed into a single one. |
df0aa77 to
ffe6dee
Compare
Fix layout shift in the API reference filters on mobile devices. Replaces `justify-content: space-between` with `flex-start` to prevent filter elements from redistributing space when toggled. Also adds a row gap to maintain spacing when items wrap.
ffe6dee to
ec2a1d2
Compare
|
@anushkasingh-commits, the diff contains unrelated code and at the same time doesn't contain the requested changes. |
|
#67690 is closer to what to we would expect. |
What does this PR do?
Fixes a layout shift in the API Reference filters on mobile devices.
The filter container used
justify-content: space-between, which caused elements to redistribute space when filters were toggled. This resulted in visible layout shifts and misalignment on smaller screens.This change replaces
space-betweenwithflex-startand adds a smallrow-gapto maintain consistent spacing when items wrap.Why is this change useful?
It prevents filter controls from jumping horizontally when their state changes, improving layout stability and usability on mobile devices.
Type of change
Documentation site styling improvement (no framework or runtime changes).