feat(core): ✨ add overflow handling for citizen inner header

StarCitizenTools · Jul 20, 2023 · fab4d27 · fab4d27
1 parent d3cc5fd
commit fab4d27
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 14 deletions.
diff --git a/resources/skins.citizen.styles/common/progressbar.less b/resources/skins.citizen.styles/common/progressbar.less
@@ -25,8 +25,7 @@
 	// Align style with the form
 	border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
 	// Animates the progress-bar.
-	animation:
- progress-bar
+	animation: progress-bar
 		1200ms
 		linear
 		var( --delay-progress-bar )

diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
@@ -93,6 +93,7 @@
 		flex-grow: 1;
 		justify-content: space-between;
 		gap: var( --space-xxs );
+		overflow-x: auto;
 
 		.citizen-menu-checkbox-checkbox:checked {
 			~ .citizen-header__button {
@@ -110,6 +111,7 @@
 	&__end {
 		display: flex;
 		flex-direction: var( --header-direction );
+		flex-shrink: 0; // let _inner handle the overflow
 		gap: var( --space-xxs );
 	}
 

diff --git a/resources/skins.citizen.styles/layout.less b/resources/skins.citizen.styles/layout.less
@@ -16,8 +16,7 @@
 	padding: 0 var( --padding-page );
 	margin: var( --space-xl ) 0; // don't collide with other components (e.g. notice)
 	gap: var( --space-md ) var( --space-xl );
-	grid-template-areas:
- 'header'
+	grid-template-areas: 'header'
 		'content'
 		'footer';
 	// Using auto as min value will cause overflow
@@ -60,8 +59,7 @@
 	.citizen-toc-enabled {
 		.citizen-body-container {
 			display: grid;
-			grid-template-areas:
- 'header header'
+			grid-template-areas: 'header header'
 				'content toc'
 				'footer footer';
 			grid-template-columns: minmax( 0, var( --width-layout ) ) var( --width-toc );

diff --git a/skinStyles/extensions/MultimediaViewer/mmv.less b/skinStyles/extensions/MultimediaViewer/mmv.less
@@ -507,8 +507,7 @@
 	// Sync with title
 	background-color: #000;
 	gap: var( --space-xs );
-	grid-template-areas:
- 'desc links'
+	grid-template-areas: 'desc links'
 		'about about';
 	grid-template-columns: 2fr 1fr;
 
@@ -517,8 +516,7 @@
 		gap: var( --space-lg );
 
 		@media ( max-width: @width-breakpoint-tablet ) {
-			grid-template-areas:
- 'desc desc'
+			grid-template-areas: 'desc desc'
 				'links links'
 				'about about';
 		}

diff --git a/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less b/skinStyles/mediawiki/special/mediawiki.special.userlogin.signup.styles.less
@@ -29,8 +29,7 @@
 .mw-body-content > .mw-ui-container {
 	display: grid;
 	gap: var( --space-md );
-	grid-template-areas:
- 'message'
+	grid-template-areas: 'message'
 		'stats'
 		'form';
 }
@@ -82,8 +81,7 @@
 
 @media ( min-width: @width-breakpoint-tablet ) {
 	.mw-body-content > .mw-ui-container {
-		grid-template-areas:
- 'message message'
+		grid-template-areas: 'message message'
 			'form stats';
 	}