Add a timer container with min width so the rest of the navbar does not jump around

This commit is contained in:
Daniel Schädler 2025-03-14 12:19:16 +01:00
parent 6455a3c087
commit e489ebec7a
2 changed files with 6 additions and 1 deletions

View File

@ -62,7 +62,7 @@ function FullscreenPageHeader(props) {
<FilterDropdown {...props.filter} /> <FilterDropdown {...props.filter} />
<NavbarBrand>{props.title}</NavbarBrand> <NavbarBrand>{props.title}</NavbarBrand>
{props.timerEnd && {props.timerEnd &&
<div className="ml-auto">Spielzeit: <NavbarBrand><Timer timerEnd={props.timerEnd}/></NavbarBrand></div> <div className="ml-auto timer-container">Spielzeit: <NavbarBrand><Timer timerEnd={props.timerEnd}/></NavbarBrand></div>
} }
</Navbar> </Navbar>
); );

View File

@ -26,3 +26,8 @@
.scoreInput { .scoreInput {
width: 11rem; width: 11rem;
} }
.timer-container {
min-width: 20%; /* Adjust the percentage as needed */
text-align: right; /* Optional: Align text to the right */
}