quivr/frontend/lib/components/PageHeader/PageHeader.module.scss
Antoine Dewez bbbf0d1217
fix(frontend): UI Notification Ring and Fix Page Header Display on Mobile (#2771)
…y and responsiveness.

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
2024-06-27 16:14:52 +02:00

42 lines
843 B
SCSS

@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Typography.module.scss";
.page_header_wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: Spacings.$spacing04;
padding-left: Spacings.$spacing09;
border-bottom: 1px solid var(--border-1);
height: 3rem;
width: 100%;
.left {
@include Typography.H2;
display: flex;
align-items: center;
gap: Spacings.$spacing03;
visibility: visible;
&.menu_closed {
visibility: visible;
padding-left: Spacings.$spacing07;
}
}
.buttons_wrapper {
display: flex;
gap: Spacings.$spacing04;
align-items: center;
justify-content: flex-end;
}
@media (max-width: ScreenSizes.$small) {
justify-content: flex-end;
.left {
display: none;
}
}
}