Merge "Simplify Special:Notifications layout using flexbox"

modules/styles/mw.echo.ui.NotificationsInboxWidget.less

@@ -2,14 +2,14 @@
 @import '../echo.variables.less';
 
 .mw-echo-ui-notificationsInboxWidget {
-	display: table;
 	width: 100%;
 	max-width: @specialpage-width;
 	position: relative;
 
 	&-row {
-		display: table-row;
-		width: 100%;
+		display: flex;
+		align-items: start;
+		gap: 1em;
 	}
 
 	&-toolbarWrapper {
@@ -25,71 +25,37 @@
 	}
 
 	&-cell {
-		display: table-cell;
-		vertical-align: middle;
-
 		&-placeholder {
-			display: table-cell;
-			width: 100%;
+			flex-grow: 1;
 		}
 	}
 
-	&-sidebar {
-		width: @specialpage-sidebar-width;
-		padding-right: 1em;
-		vertical-align: top;
-	}
-
 	&-main {
-		vertical-align: top;
+		flex-grow: 1;
 
 		&-toolbar {
 			&-top {
-				display: table;
-				width: 100%;
-			}
-
-			&-readState {
-				display: inline-block;
-
-				.mw-echo-ui-readStateButtonSelectWidget {
-					white-space: nowrap;
+				.mw-echo-ui-notificationsInboxWidget-row {
+					display: flex;
+					align-items: center;
 				}
 			}
-
-			&-settings {
-				padding-left: 1em;
-			}
 		}
 	}
 
 	@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
-		// Override table-layout for the top toolbar so we get
+		// Override for the top toolbar so we get
 		// filters and pagination under one another
 		&-main {
 			&-toolbar {
 				&-top {
-					display: block;
-					margin-bottom: 1em;
-
 					.mw-echo-ui-notificationsInboxWidget-row {
-						display: block;
+						flex-wrap: wrap;
 						text-align: center;
+						justify-content: center;
 					}
 				}
 
-				// Nav filter is the mobile version of readState
-				&-readState,
-				&-nav-filter {
-					display: block;
-				}
-
-				&-settings,
-				&-pagination {
-					display: inline-block;
-					margin-top: 1em;
-				}
-
 				&-settings {
 					.oo-ui-popupWidget-popup {
 						text-align: left;
@@ -99,7 +65,7 @@
 		}
 
 		&-cell-placeholder {
-			display: block;
+			width: 100%;
 		}
 
 		&-sidebar {

modules/styles/mw.echo.ui.PaginationWidget.less

@@ -1,23 +1,10 @@
 .mw-echo-ui-paginationWidget {
-	display: table;
-
 	&-row {
-		display: table-row;
-	}
-
-	&-label,
-	&-start,
-	&-direction {
-		display: table-cell;
-		vertical-align: middle;
-	}
-
-	&-direction {
-		white-space: nowrap;
+		display: flex;
+		align-items: center;
 	}
 
 	&-label {
 		padding: 0 0.5em;
-		white-space: nowrap;
 	}
 }

modules/styles/mw.echo.ui.SubGroupListWidget.less

@@ -7,28 +7,13 @@
 	}
 
 	&-header {
-		display: table;
-		width: 100%;
-
 		&-row {
-			display: table-row;
-
-			&-cell {
-				display: table-cell;
-			}
+			display: flex;
+			align-items: center;
 
 			&-title {
-				width: 100%;
-				vertical-align: bottom;
-				white-space: nowrap;
-
-				.oo-ui-labelElement-label {
-					white-space: normal;
-				}
-			}
-
-			&-markAllReadButton {
-				text-align: right;
+				flex-grow: 1;
+				align-self: end;
 			}
 		}
 	}