Merge pull request #19608 from dav1312/flex-center-center

ornicar · web-flow · commit a440aaabfb21 · 2026-02-24T21:32:41.000+01:00
Deduplicate flex centering by using new %flex-center-center
diff --git a/ui/analyse/css/gamebook/_edit.scss b/ui/analyse/css/gamebook/_edit.scss
@@ -25,12 +25,11 @@
     min-height: 3.5em;
 
     i {
-      @extend %flex-center;
+      @extend %flex-center-center;
 
       flex: 0 0 1.8em;
       font-size: 1.8em;
       opacity: 0.7;
-      justify-content: center;
     }
 
     &.clickable:hover {
diff --git a/ui/analyse/css/practice/_side.scss b/ui/analyse/css/practice/_side.scss
@@ -72,10 +72,9 @@
   }
 
   .status {
-    @extend %flex-center;
+    @extend %flex-center-center;
 
     flex: 0 0 2.5rem;
-    justify-content: center;
     opacity: 1;
     font-size: 1.25em;
     color: $c-shade;
diff --git a/ui/analyse/css/study/_chapters.scss b/ui/analyse/css/study/_chapters.scss
@@ -25,10 +25,9 @@ $span-width: 1.7em;
     }
 
     > span {
-      @extend %flex-center;
+      @extend %flex-center-center;
 
       flex: 0 0 $span-width;
-      justify-content: center;
       color: $c-link;
       font-weight: bold;
       height: auto;
diff --git a/ui/analyse/css/study/_list.scss b/ui/analyse/css/study/_list.scss
@@ -21,13 +21,12 @@
   }
 
   .act {
-    @extend %flex-center;
+    @extend %flex-center-center;
 
     color: $c-font;
     cursor: pointer;
     border-radius: 99px;
     align-self: center;
-    justify-content: center;
     font-size: 0.9em;
     opacity: 0.15;
     padding: 0.3em;
@@ -54,9 +53,8 @@
 
 %study-list-ongoing {
   ongoing {
-    @extend %flex-center;
+    @extend %flex-center-center;
     align-self: center;
-    justify-content: center;
     font-size: 0.7em;
     color: $c-bad;
     margin-inline-end: 0.7rem;
diff --git a/ui/analyse/css/study/_members.scss b/ui/analyse/css/study/_members.scss
@@ -21,9 +21,7 @@
   }
 
   .status {
-    @extend %flex-center;
-
-    justify-content: center;
+    @extend %flex-center-center;
     width: 2.4em;
     margin-inline-end: 0.1em;
     transition: 2.5s;
diff --git a/ui/analyse/css/study/panel/_glyph.scss b/ui/analyse/css/study/panel/_glyph.scss
@@ -18,9 +18,7 @@
     width: 100%;
 
     &::before {
-      @extend %flex-center;
-
-      justify-content: center;
+      @extend %flex-center-center;
       content: attr(data-symbol);
       font-size: 1.2em;
       font-weight: bold;
diff --git a/ui/analyse/css/study/panel/_share.scss b/ui/analyse/css/study/panel/_share.scss
@@ -27,9 +27,7 @@
   }
 
   .downloads {
-    @extend %flex-center;
-
-    justify-content: center;
+    @extend %flex-center-center;
     margin-bottom: 1.5em;
 
     .button {
diff --git a/ui/analyse/css/study/relay/_back-to-live.scss b/ui/analyse/css/study/relay/_back-to-live.scss
@@ -1,6 +1,5 @@
 .relay-back-to-live {
-  @extend %flex-center;
-  justify-content: center;
+  @extend %flex-center-center;
   padding: 0.5em 0;
   background: $c-accent;
   color: $c-over;
diff --git a/ui/analyse/css/study/relay/_rounds.scss b/ui/analyse/css/study/relay/_rounds.scss
@@ -19,9 +19,8 @@ $span-width: 1.7em;
   }
 
   finished {
-    @extend %flex-center;
+    @extend %flex-center-center;
     align-self: center;
-    justify-content: center;
     font-size: 0.7em;
     color: $c-good;
     margin-inline-end: 0.7rem;
diff --git a/ui/bits/css/_clas.scss b/ui/bits/css/_clas.scss
@@ -444,9 +444,7 @@ h1 {
   }
 
   &__actions {
-    @extend %flex-center;
-
-    justify-content: center;
+    @extend %flex-center-center;
     margin-top: 4em;
 
     .button {
@@ -649,8 +647,7 @@ h1 {
   }
 
   &__login {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
     form {
       @extend %flex-center;
       align-items: stretch;
diff --git a/ui/bits/css/_linkPopup.scss b/ui/bits/css/_linkPopup.scss
@@ -27,9 +27,8 @@
   }
 
   &__actions {
-    @extend %flex-center;
+    @extend %flex-center-center;
     padding: 2em;
-    justify-content: center;
     gap: 2em;
   }
 }
diff --git a/ui/bits/css/_lpv.embed.scss b/ui/bits/css/_lpv.embed.scss
@@ -7,11 +7,10 @@ body {
   box-shadow: none;
 }
 .not-found {
-  @extend %flex-center;
+  @extend %flex-center-center;
 
   position: fixed;
   inset: 0;
-  justify-content: center;
   height: 100%;
   background: radial-gradient(circle, #484848, #2f3031);
 
diff --git a/ui/bits/css/_mobile.scss b/ui/bits/css/_mobile.scss
@@ -6,8 +6,7 @@
 
   .left-side {
     .stores {
-      @extend %flex-center;
-      justify-content: center;
+      @extend %flex-center-center;
       gap: 1em;
     }
 
diff --git a/ui/bits/css/plan/_page.scss b/ui/bits/css/plan/_page.scss
@@ -201,8 +201,7 @@
     }
 
     .gift {
-      @extend %flex-center;
-      justify-content: center;
+      @extend %flex-center-center;
       margin: -1em 0 1em 0;
     }
   }
diff --git a/ui/bits/css/relay/_image.scss b/ui/bits/css/relay/_image.scss
@@ -1,7 +1,6 @@
 .relay-image {
   &--fallback {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
     width: 100%;
     aspect-ratio: 2 / 1;
     background: linear-gradient(to bottom, $m-primary--alpha-70, $m-brag--alpha-70);
diff --git a/ui/bits/css/streamer/_form.scss b/ui/bits/css/streamer/_form.scss
@@ -20,8 +20,7 @@
       row-gap: 2em;
 
       > span {
-        @extend %flex-center;
-        justify-content: center;
+        @extend %flex-center-center;
         column-gap: 1em;
       }
     }
diff --git a/ui/bits/css/ublog/_post.scss b/ui/bits/css/ublog/_post.scss
@@ -129,8 +129,7 @@
     }
   }
   &__actions {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
     font-size: 2em;
     margin: 0 0 2rem 0;
     .button {
diff --git a/ui/botDev/css/_bot-dev.setup.scss b/ui/botDev/css/_bot-dev.setup.scss
@@ -32,8 +32,7 @@ body:has(.base-view.setup-view) {
   .from-position {
     position: relative;
     .resets {
-      @extend %flex-center;
-      justify-content: center;
+      @extend %flex-center-center;
       padding: 2em;
       gap: 2em;
     }
@@ -80,8 +79,7 @@ body:has(.base-view.setup-view) {
   }
 
   .chin {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
     padding: 1em;
     border-radius: 5px;
     border-top: 1px solid $c-border;
@@ -91,8 +89,7 @@ body:has(.base-view.setup-view) {
       gap: 0.5em;
     }
     span {
-      @extend %flex-center;
-      justify-content: center;
+      @extend %flex-center-center;
     }
     input {
       min-height: 32px;
@@ -130,8 +127,7 @@ body:has(.base-view.setup-view) {
     gap: 0.5em;
   }
   .actions {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
   }
   @include mq-is-col1 {
     .fen {
diff --git a/ui/botPlay/css/setup/_card.scss b/ui/botPlay/css/setup/_card.scss
@@ -68,8 +68,7 @@
   }
 
   &__header {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
     gap: 1ch;
   }
   &__name {
diff --git a/ui/botPlay/css/setup/_setup.scss b/ui/botPlay/css/setup/_setup.scss
@@ -5,8 +5,7 @@
 }
 
 .bot-setup__title {
-  @extend %flex-center;
-  justify-content: center;
+  @extend %flex-center-center;
   .beta {
     @extend %box-radius;
     font-family: monospace;
diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
@@ -141,8 +141,7 @@
   }
 
   .mobile-instructions {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
     font-size: 1.5rem;
   }
 
diff --git a/ui/dasher/css/_board.scss b/ui/dasher/css/_board.scss
@@ -8,11 +8,10 @@
   }
 
   .list button {
-    @extend %flex-center;
+    @extend %flex-center-center;
 
     flex: 0 0 33%;
     height: 40px;
-    justify-content: center;
   }
 
   .list span {
diff --git a/ui/learn/css/_table.scss b/ui/learn/css/_table.scss
@@ -29,20 +29,17 @@
   }
 
   .goal {
-    @extend %flex-center;
+    @extend %flex-center-center;
 
     background: $c-bg-box;
     border: $border;
     border-top: none;
     padding: $block-gap;
     text-align: center;
-    justify-content: center;
   }
 
   .result {
-    @extend %flex-center;
-
-    justify-content: center;
+    @extend %flex-center-center;
     flex-flow: column nowrap;
     border: $border;
     border-top: none;
diff --git a/ui/lib/css/abstract/_flex.scss b/ui/lib/css/abstract/_flex.scss
@@ -16,6 +16,14 @@
   align-items: center;
 }
 
+%flex-center-center {
+  /* extends %flex-center */
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+}
+
 %flex-between {
   /* extends %flex-center */
   display: flex;
diff --git a/ui/lib/css/abstract/_mixins.scss b/ui/lib/css/abstract/_mixins.scss
@@ -127,8 +127,7 @@
   position: relative;
   aspect-ratio: $aspect-ratio;
   &::after {
-    @extend %flex-center;
-    justify-content: center;
+    @extend %flex-center-center;
     content: attr(alt);
     position: absolute;
     top: 0;
diff --git a/ui/lib/css/component/_calendar-mselect.scss b/ui/lib/css/component/_calendar-mselect.scss
@@ -10,8 +10,7 @@
     margin-top: 2em;
   }
   &__selects {
-    @extend %flex-center;
-    justify-content: center; // for col1
+    @extend %flex-center-center; // for col1
     gap: 1em;
   }
   > a {
diff --git a/ui/lib/css/component/_dialog.scss b/ui/lib/css/component/_dialog.scss
@@ -86,8 +86,7 @@ dialog {
 
 // applied to dialog wrapper div so we can fake HTMLDialogElement.showModal() in a snab render loop
 .snab-modal-mask {
-  @extend %fullscreen-mask, %flex-center;
-  justify-content: center;
+  @extend %fullscreen-mask, %flex-center-center;
 }
 
 .dialog-content {
diff --git a/ui/lib/css/form/_radio.scss b/ui/lib/css/form/_radio.scss
@@ -15,10 +15,9 @@ group.radio {
 
   label,
   .label {
-    @extend %metal, %flex-center;
+    @extend %metal, %flex-center-center;
     @include prevent-select;
 
-    justify-content: center;
     padding: 10px;
     height: 100%;
     cursor: pointer;
diff --git a/ui/lib/css/header/_buttons.scss b/ui/lib/css/header/_buttons.scss
@@ -42,9 +42,7 @@
   }
 
   .initiating {
-    @extend %flex-center;
-
-    justify-content: center;
+    @extend %flex-center-center;
     height: 300px;
     width: 225px;
   }
diff --git a/ui/lobby/css/_about.scss b/ui/lobby/css/_about.scss
@@ -25,8 +25,7 @@
 }
 
 .connect-links {
-  @extend %flex-center;
-  justify-content: center;
+  @extend %flex-center-center;
   flex: 1 0 100%;
   margin-top: 0.5em;
 
diff --git a/ui/lobby/css/_setup.scss b/ui/lobby/css/_setup.scss
diff --git a/ui/mod/css/_impersonate.scss b/ui/mod/css/_impersonate.scss
diff --git a/ui/puzzle/css/_after.scss b/ui/puzzle/css/_after.scss
diff --git a/ui/puzzle/css/_session.scss b/ui/puzzle/css/_session.scss
diff --git a/ui/puzzle/css/_side.scss b/ui/puzzle/css/_side.scss
diff --git a/ui/round/css/_table.scss b/ui/round/css/_table.scss
diff --git a/ui/storm/css/_play-again.scss b/ui/storm/css/_play-again.scss
diff --git a/ui/swiss/css/_app-standing.scss b/ui/swiss/css/_app-standing.scss
diff --git a/ui/user/css/_list-bot.scss b/ui/user/css/_list-bot.scss
diff --git a/ui/user/css/_show.scss b/ui/user/css/_show.scss

Original file line number	Diff line number	Diff line change
`@@ -27,9 +27,7 @@`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.downloads {`
`30`		`- @extend %flex-center;`
`31`		`-`
`32`		`- justify-content: center;`
	`30`	`+ @extend %flex-center-center;`
`33`	`31`	`margin-bottom: 1.5em;`
`34`	`32`
`35`	`33`	`.button {`