fix header height

This commit is contained in:
Max S 2024-07-25 10:27:40 +02:00
parent cd84395308
commit 5efd8b3713
11 changed files with 21 additions and 18 deletions

View File

@ -11,7 +11,7 @@
width: 100%; width: 100%;
left: 0; left: 0;
text-align: center; text-align: center;
max-height: calc(100vh - 83px); max-height: calc(100vh - var(--header-height));
overflow: auto; overflow: auto;
> *:not(:last-child) { > *:not(:last-child) {
margin-bottom: 24px; margin-bottom: 24px;

View File

@ -6,7 +6,7 @@
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
height: 75px; height: var(--header-height);
padding: 0px var(--spacing-lg, 24px); padding: 0px var(--spacing-lg, 24px);
border-bottom: 1px solid var(--menu-border, #d7dce0); border-bottom: 1px solid var(--menu-border, #d7dce0);

View File

@ -23,6 +23,8 @@ type IProps = {
isUserConnected: boolean; isUserConnected: boolean;
}; };
const headerHeight = 75;
export default function Header(props: IProps) { export default function Header(props: IProps) {
const { isUserConnected } = props; const { isUserConnected } = props;
@ -44,6 +46,7 @@ export default function Header(props: IProps) {
}, []); }, []);
useEffect(() => { useEffect(() => {
document.documentElement.style.setProperty("--header-height", `${headerHeight}px`);
loadSubscription(); loadSubscription();
}, [loadSubscription]); }, [loadSubscription]);

View File

@ -14,7 +14,7 @@
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
.overlay { .overlay {
position: absolute; position: absolute;
@ -66,7 +66,7 @@
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200) solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {

View File

@ -14,7 +14,7 @@
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
.overlay { .overlay {
position: absolute; position: absolute;
@ -66,7 +66,7 @@
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200) solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {

View File

@ -14,7 +14,7 @@
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
.overlay { .overlay {
position: absolute; position: absolute;
@ -66,7 +66,7 @@
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200) solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {

View File

@ -5,7 +5,7 @@
.content { .content {
display: flex; display: flex;
.sides { .sides {
min-height: calc(100vh - 83px); min-height: calc(100vh - var(--header-height));
width: 50%; width: 50%;
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
width: 100%; width: 100%;
@ -31,7 +31,7 @@
width: 50vw; width: 50vw;
top: 83px; top: 83px;
right: 0; right: 0;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
display: none; display: none;
} }

View File

@ -15,7 +15,7 @@
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
.overlay { .overlay {
position: absolute; position: absolute;
@ -67,7 +67,7 @@
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200) solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {

View File

@ -14,7 +14,7 @@
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
.overlay { .overlay {
position: absolute; position: absolute;
@ -66,7 +66,7 @@
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200) solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {

View File

@ -14,7 +14,7 @@
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
.overlay { .overlay {
position: absolute; position: absolute;
@ -66,7 +66,7 @@
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200) solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {

View File

@ -14,7 +14,7 @@
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
.overlay { .overlay {
position: absolute; position: absolute;
@ -66,7 +66,7 @@
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200 solid); border-right: 1px var(--color-neutral-200 solid);
@media (min-width: $screen-m) { @media (min-width: $screen-m) {