Merge pull request #19607 from Simek/ui-reuse-ellipsis-and-nowrap-etends

ornicar · web-flow · commit f4a9cea90f2e · 2026-02-24T16:52:33.000+01:00
ui: reuse ellipsis and nowrap extends where applicable
diff --git a/ui/analyse/css/_round-underboard.scss b/ui/analyse/css/_round-underboard.scss
@@ -16,15 +16,14 @@ $col2-panel-height: 240px;
     align-items: flex-start;
 
     > button {
-      @extend %roboto, %box-radius-top, %page-text, %ellipsis;
+      @extend %roboto, %box-radius-top, %page-text, %nowrap-ellipsis;
 
       flex: 1 1 0;
       text-align: center;
       font-size: 0.9em;
       padding: 0.4em 0.1em;
       cursor: pointer;
       position: relative;
-      white-space: nowrap;
       border-bottom: $border;
 
       &:hover {
diff --git a/ui/analyse/css/explorer/_explorer.scss b/ui/analyse/css/explorer/_explorer.scss
@@ -1,22 +1,21 @@
 @import './config';
 
 .explorer-box {
-  position: relative;
-  flex: 3 1 0px;
-  white-space: nowrap;
-
   @include transition;
 
+  position: relative;
+  flex: 3 1 0;
+  white-space: nowrap;
   transition-delay: 0.3s;
   overflow-x: hidden;
   overflow-y: auto;
   font-size: 0.9em;
 
   &.reduced {
-    flex: 0.3 3 0px;
+    flex: 0.3 3 0;
 
     &:hover {
-      flex: 1 2 0px;
+      flex: 1 2 0;
     }
   }
 
@@ -39,8 +38,7 @@
   }
 
   .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @extend %ellipsis;
     user-select: text;
   }
   .explorer-title {
diff --git a/ui/analyse/css/study/_player.scss b/ui/analyse/css/study/_player.scss
@@ -89,8 +89,7 @@ $player-height: 1.6rem;
 
     .team,
     .name {
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @extend %ellipsis;
       max-width: fit-content;
       flex: 1;
     }
diff --git a/ui/analyse/css/study/_topics.scss b/ui/analyse/css/study/_topics.scss
@@ -15,12 +15,11 @@
     background: $m-primary_bg--mix-12;
     padding: 0.2em 0.6em;
     margin: 0.2em;
+    white-space: nowrap;
 
     &:hover {
       background: $m-primary_bg--mix-15;
     }
-
-    white-space: nowrap;
   }
 
   .box__pad & {
diff --git a/ui/analyse/css/study/relay/_board-player.scss b/ui/analyse/css/study/relay/_board-player.scss
@@ -78,8 +78,7 @@
 
   .team,
   .name {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @extend %ellipsis;
     max-width: fit-content;
     flex: 1;
   }
diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
@@ -337,9 +337,8 @@ $hover-bg: $m-primary_bg--mix-30;
       }
     }
     .name {
+      @include ellipsis;
       padding: 0.3em 0 0.3em 1em;
-      overflow: hidden;
-      text-overflow: ellipsis;
       width: 100%;
     }
     .time,
@@ -630,8 +629,7 @@ $hover-bg: $m-primary_bg--mix-30;
       display: none;
     }
     .player-intro__name {
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
   }
 }
diff --git a/ui/bits/css/build/bits.slist.scss b/ui/bits/css/build/bits.slist.scss
@@ -40,10 +40,9 @@
     td:nth-child(2) {
       padding-right: 0;
       a.user-link {
+        @include ellipsis;
         display: inline-block;
         max-width: min(26ch, 50vw);
-        overflow: hidden;
-        text-overflow: ellipsis;
         white-space: nowrap;
         vertical-align: middle;
       }
diff --git a/ui/lib/css/ceval/_settings.scss b/ui/lib/css/ceval/_settings.scss
@@ -34,12 +34,11 @@
     }
 
     select {
+      @extend %ellipsis;
       flex: 1 4 auto;
       min-width: 0;
       margin-inline-start: 1ch;
       padding: 4px;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     #select-engine {
diff --git a/ui/lib/css/component/_copy-me.scss b/ui/lib/css/component/_copy-me.scss
@@ -2,9 +2,8 @@
   @extend %box-radius, %flex-center-nowrap;
 
   &__target {
-    @extend %ellipsis, %box-radius-left;
+    @extend %nowrap-ellipsis, %box-radius-left;
     flex: 1 1 auto;
-    white-space: nowrap;
     padding: 0 1em;
     outline: 0;
     background: none;
diff --git a/ui/lib/css/component/_mini-game.scss b/ui/lib/css/component/_mini-game.scss
@@ -38,8 +38,7 @@
   }
 
   .name {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @extend %ellipsis;
   }
 
   .rating {
diff --git a/ui/lib/css/component/_tagify.scss b/ui/lib/css/component/_tagify.scss
@@ -238,9 +238,8 @@
       transition: 0.13s ease-out;
 
       > * {
+        @extend %ellipsis;
         white-space: pre-wrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         display: inline-block;
         vertical-align: top;
         min-width: var(--tag--min-width, $tag-min-width);
diff --git a/ui/lib/css/game/_row.scss b/ui/lib/css/game/_row.scss
@@ -38,9 +38,7 @@
     overflow: hidden;
 
     .notes {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+      @extend %nowrap-ellipsis;
     }
   }
 
diff --git a/ui/lib/css/tree/_tree.scss b/ui/lib/css/tree/_tree.scss
@@ -43,7 +43,6 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
   display: inline-block;
   color: var(--c-base);
   padding: 0.25em 0.17em;
-  white-space: nowrap;
   font-size: 1.092em;
   cursor: pointer;
 
diff --git a/ui/lib/css/vendor/_multiple-select.scss b/ui/lib/css/vendor/_multiple-select.scss
@@ -5,15 +5,14 @@
 }
 
 .ms-choice {
+  @extend %nowrap-hidden;
   display: block;
   width: 100%;
   height: 26px;
   padding: 0;
-  overflow: hidden;
   cursor: pointer;
   border: $border;
   text-align: left;
-  white-space: nowrap;
   line-height: 26px;
   text-decoration: none;
   border-radius: 2px;
@@ -27,13 +26,11 @@
 }
 
 .ms-choice > span {
+  @extend %nowrap-ellipsis;
   position: absolute;
   top: 0;
   left: 0;
   right: 20px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   display: block;
   padding-left: 8px;
 }
@@ -126,11 +123,9 @@
 }
 
 .ms-drop ul > li.multiple label {
-  @extend %nowrap-hidden;
-
+  @extend %nowrap-ellipsis;
   width: 100%;
   display: block;
-  text-overflow: ellipsis;
 }
 
 .ms-drop ul > li label {
diff --git a/ui/lobby/css/_setup.scss b/ui/lobby/css/_setup.scss
@@ -37,8 +37,7 @@ $c-slider: $c-setup;
         }
 
         .desc {
-          overflow: hidden;
-          text-overflow: ellipsis;
+          @extend %ellipsis;
         }
       }
     }
diff --git a/ui/opening/css/_next.scss b/ui/opening/css/_next.scss
@@ -23,13 +23,10 @@
       @extend %flex-between-nowrap;
     }
     &__name {
-      @extend %roboto;
+      @extend %roboto, %nowrap-ellipsis;
       flex: 1 1 auto;
       font-size: 1.3em;
       margin: 0 0 0.2em 0.5em;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
     }
     &__san {
       flex: 0 1 auto;
diff --git a/ui/puzzle/css/_side.scss b/ui/puzzle/css/_side.scss
@@ -15,10 +15,7 @@
     }
 
     .infos {
-      @extend %flex-center-nowrap;
-
-      overflow: hidden;
-      white-space: nowrap;
+      @extend %flex-center-nowrap, %nowrap-hidden;
 
       &__angle-img {
         height: 3.5rem;
diff --git a/ui/tutor/css/_preview.scss b/ui/tutor/css/_preview.scss
@@ -1,11 +1,9 @@
 .tutor-preview {
-  @extend %box-neat, %flex-between-nowrap;
+  @extend %box-neat, %flex-between-nowrap, %nowrap-hidden;
   background: $c-bg-box;
   padding: 1em var(---box-padding);
   color: $c-font;
-  white-space: nowrap;
   gap: 1em;
-  overflow: hidden;
 
   &:hover {
     background: $m-primary_bg--mix-10;
diff --git a/ui/user/css/_perf-stat.scss b/ui/user/css/_perf-stat.scss
@@ -131,10 +131,9 @@
 
   .resultStreak .streak,
   .playStreak .streak {
-    @extend %ellipsis;
+    @extend %nowrap-ellipsis;
 
     margin: 1em 0 1em 1.5em;
-    white-space: nowrap;
   }
 
   .playStreak {
diff --git a/ui/voice/css/_voice.scss b/ui/voice/css/_voice.scss
@@ -137,12 +137,11 @@ button#microphone-button {
   }
 
   select {
+    @extend %ellipsis;
     flex: 1 4 auto;
     min-width: 0;
     margin-inline-start: 1ch;
     padding: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   .range_value {
diff --git a/ui/voice/css/_voiceMove.help.scss b/ui/voice/css/_voiceMove.help.scss
@@ -38,9 +38,8 @@
 
   .big-table {
     td {
+      @extend %nowrap-ellipsis;
       padding: 0 1em;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
     tr {
       td:nth-child(even) {

Original file line number	Diff line number	Diff line change
`@@ -89,8 +89,7 @@ $player-height: 1.6rem;`
`89`	`89`
`90`	`90`	`.team,`
`91`	`91`	`.name {`
`92`		`- overflow: hidden;`
`93`		`- text-overflow: ellipsis;`
	`92`	`+ @extend %ellipsis;`
`94`	`93`	`max-width: fit-content;`
`95`	`94`	`flex: 1;`
`96`	`95`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,12 +15,11 @@`
`15`	`15`	`background: $m-primary_bg--mix-12;`
`16`	`16`	`padding: 0.2em 0.6em;`
`17`	`17`	`margin: 0.2em;`
	`18`	`+ white-space: nowrap;`
`18`	`19`
`19`	`20`	`&:hover {`
`20`	`21`	`background: $m-primary_bg--mix-15;`
`21`	`22`	`}`
`22`		`-`
`23`		`- white-space: nowrap;`
`24`	`23`	`}`
`25`	`24`
`26`	`25`	`.box__pad & {`
Original file line number	Diff line number	Diff line change
`@@ -78,8 +78,7 @@`
`78`	`78`
`79`	`79`	`.team,`
`80`	`80`	`.name {`
`81`		`- overflow: hidden;`
`82`		`- text-overflow: ellipsis;`
	`81`	`+ @extend %ellipsis;`
`83`	`82`	`max-width: fit-content;`
`84`	`83`	`flex: 1;`
`85`	`84`	`}`
Original file line number	Diff line number	Diff line change
`@@ -337,9 +337,8 @@ $hover-bg: $m-primary_bg--mix-30;`
`337`	`337`	`}`
`338`	`338`	`}`
`339`	`339`	`.name {`
	`340`	`+ @include ellipsis;`
`340`	`341`	`padding: 0.3em 0 0.3em 1em;`
`341`		`- overflow: hidden;`
`342`		`- text-overflow: ellipsis;`
`343`	`342`	`width: 100%;`
`344`	`343`	`}`
`345`	`344`	`.time,`
`@@ -630,8 +629,7 @@ $hover-bg: $m-primary_bg--mix-30;`
`630`	`629`	`display: none;`
`631`	`630`	`}`
`632`	`631`	`.player-intro__name {`
`633`		`- overflow: hidden;`
`634`		`- text-overflow: ellipsis;`
	`632`	`+ @include ellipsis;`
`635`	`633`	`}`
`636`	`634`	`}`
`637`	`635`	`}`
Original file line number	Diff line number	Diff line change
`@@ -34,12 +34,11 @@`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`select {`
	`37`	`+ @extend %ellipsis;`
`37`	`38`	`flex: 1 4 auto;`
`38`	`39`	`min-width: 0;`
`39`	`40`	`margin-inline-start: 1ch;`
`40`	`41`	`padding: 4px;`
`41`		`- overflow: hidden;`
`42`		`- text-overflow: ellipsis;`
`43`	`42`	`}`
`44`	`43`
`45`	`44`	`#select-engine {`
Original file line number	Diff line number	Diff line change
`@@ -38,8 +38,7 @@`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.name {`
`41`		`- overflow: hidden;`
`42`		`- text-overflow: ellipsis;`
	`41`	`+ @extend %ellipsis;`
`43`	`42`	`}`
`44`	`43`
`45`	`44`	`.rating {`