feat(core): ✨ move page actions into bottom toolbar when width is lim…

…ited

Related: #821

resources/skins.citizen.styles/common/cssvariables.less

@@ -143,6 +143,7 @@ html {
 	--line-height: @line-height-md;
 	--line-height-xs: @line-height-xs;
 	--line-height-sm: @line-height-sm;
+	--toolbar-size: 2.5rem;
 
 	/* Spacing */
 	--space-unit: @space-unit;

resources/skins.citizen.styles/components/Pagetools.less

@@ -1,7 +1,7 @@
 .page-actions {
 	display: flex;
 	gap: var( --space-xxs );
-	margin-left: -0.75rem; // Align to the margin
+	align-items: center;
 
 	// TODO: Merge this with header__item
 	&__item {
@@ -12,7 +12,7 @@
 	&__button {
 		display: grid;
 		place-items: center;
-		width: 2.75rem; // Same width as other buttons
+		width: 2.5rem; // Same width as other buttons
 		height: 2.25rem; // Same height as other buttons
 		border-radius: var( --border-radius--medium );
 
@@ -237,13 +237,31 @@
 // To avoid more menu from overflow in narrow screen
 @media ( max-width: @max-width-breakpoint-tablet ) {
 	.page-actions {
+		position: fixed;
+		right: 0;
+		bottom: ~'calc( var( --header-size ) + var( --space-xs ) )';
+		height: var( --toolbar-size );
+		margin: var( --space-xs );
+		background: var( --color-surface-1 );
+		border-radius: var( --border-radius--medium );
+		box-shadow: var( --box-shadow-dialog );
+
+		:not( .page-actions__card ) .mw-list-item {
+			--size-icon: 1rem;
+		}
+
+		> .mw-portlet li > a {
+			height: var( --toolbar-size );
+		}
+
 		&__item {
 			position: unset;
 		}
 
 		&__card {
-			right: 0;
-			left: 0;
+			top: unset;
+			bottom: 100%;
+			.citizen-card-hide( bottom right );
 		}
 	}
 }

resources/skins.citizen.styles/components/StickyHeader.less

@@ -57,19 +57,31 @@
 // Hide sticky header on scroll down on smaller screens
 @media ( max-width: @max-width-breakpoint-tablet ) {
 	.citizen-body-header--sticky {
-		.mw-body-header {
+		.mw-body-header
+		.page-actions {
 			transition: var( --transition-menu );
+		}
+
+		.mw-body-header {
 			transition-property: transform;
 		}
 
+		// FIXME: Fine tune the animation, the position jump is annoying
+		.page-actions {
+			opacity: 1;
+			visibility: visible;
+			transition-property: opacity, visibility;
+		}
+
 		&.citizen-scroll--down {
 			.mw-body-header {
 				transform: translateY( -100% );
 			}
-		}
 
-		.page-actions {
-			display: none;
+			.page-actions {
+				opacity: 0;
+				visibility: hidden;
+			}
 		}
 	}
 }

resources/skins.citizen.styles/components/TableOfContents.less

@@ -128,8 +128,8 @@
 @media ( max-width: ( @max-width-breakpoint-tablet ) ) {
 	.citizen-toc {
 		position: fixed;
-		right: 0;
 		bottom: ~'calc( var( --header-size ) + var(  --space-xs ) )';
+		left: 0;
 		z-index: @z-index-page-header;
 		// Allow click through
 		pointer-events: none;
@@ -148,7 +148,7 @@
 			-webkit-user-select: none;
 			user-select: none;
 			.citizen-card;
-			.citizen-card-hide( bottom right, '', false );
+			.citizen-card-hide( bottom left, '', false );
 			.citizen-card-transition();
 		}
 
@@ -167,12 +167,12 @@
 
 		&__buttonCheckbox {
 			position: absolute;
-			right: 0;
 			bottom: 0;
+			left: 0;
 			display: grid;
 			place-content: center;
-			width: 2.5rem;
-			height: 2.5rem;
+			width: var( --toolbar-size );
+			height: var( --toolbar-size );
 			margin: var( --space-xs );
 			pointer-events: auto;
 			background-color: var( --color-surface-1 );
@@ -181,7 +181,7 @@
 			transition: var( --transition-menu );
 			transition-property: transform;
 			transform: none;
-			transform-origin: bottom right;
+			transform-origin: bottom left;
 
 			.citizen-ui-icon {
 				width: 1rem;