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%;
left: 0;
text-align: center;
max-height: calc(100vh - 83px);
max-height: calc(100vh - var(--header-height));
overflow: auto;
> *:not(:last-child) {
margin-bottom: 24px;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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