feat(component): improve header overflow handling #4273
Conversation
|
Related Previews |
|
This reverts commit 8f8cdb6.
There was a problem hiding this comment.
As mentioned before, we could replace the implemented breakpoint detection by just using the now existing breakpoints utility in the components package.
You can see how it works in the <post-footer> component or come to me and ask, if you have questions.
I don't say it's mandatory to implement it here, but it would probably make a lot of sense.
There was a problem hiding this comment.
Can you create a ticket for that?
| .left-scroll-button { | ||
| inset-inline-start: 0; | ||
| padding-inline-end: 20px; | ||
| } | ||
|
|
||
| .right-scroll-button { | ||
| inset-inline-end: 0; | ||
| padding-inline-start: 20px; | ||
| } |
There was a problem hiding this comment.
The box-shadow on the buttons (on desktop) gets cut off, because the inline paddings are to small.
This inline paddings should be at least 28px.
| background: var(--post-core-color-brand-white); | ||
| padding: var(--post-core-dimension-16); | ||
| box-shadow: var(--post-core-elevation-5); | ||
| line-height: var(--post-core-line-height-100); |
There was a problem hiding this comment.
I once more recommend: Never use core- or semantic-tokens, but instead use hardcoded values for now.
There was a problem hiding this comment.
First time with me!
Can we discuss this? Currently the whole header is using semantic tokens and I would like to understand why you prefer raw values. Also, I would rather handle this in a separate ticket as it would involve a lot of changes not related to this PR.
packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
Show resolved
Hide resolved
packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx
Outdated
Show resolved
Hide resolved
|
No description provided.