fix(ui): truncate overflowed code block label with ellipsis (#2771)

_sass/base/_syntax.scss

@@ -123,57 +123,6 @@ div[class^='language-'] {
     }
   }
 
-  .code-header {
-    @include bp.sm {
-      @include mx.ml-mr(0);
-
-      $dot-margin: 1rem;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        margin-left: $dot-margin;
-        width: v.$code-dot-size;
-        height: v.$code-dot-size;
-        border-radius: 50%;
-        background-color: var(--code-header-muted-color);
-        box-shadow:
-          (v.$code-dot-size + v.$code-dot-gap) 0 0
-            var(--code-header-muted-color),
-          (v.$code-dot-size + v.$code-dot-gap) * 2 0 0
-            var(--code-header-muted-color);
-      }
-
-      span {
-        // center the text of label
-        margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
-      }
-    }
-  }
-
-  .highlight {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-/* Hide line numbers for default, console, and terminal code snippets */
-div {
-  &.nolineno,
-  &.language-plaintext,
-  &.language-console,
-  &.language-terminal {
-    td:first-child {
-      padding: 0 !important;
-      margin-right: 0;
-
-      .lineno {
-        display: none;
-      }
-    }
-  }
-}
-
   .code-header {
     @extend %no-cursor;
 
@@ -186,7 +135,11 @@ div {
 
     /* the label block */
     span {
+      color: var(--code-header-text-color);
       line-height: v.$code-header-height;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 
       /* label icon */
       i {
@@ -209,7 +162,6 @@ div {
         content: attr(data-label-text);
         font-size: 0.85rem;
         font-weight: 600;
-      color: var(--code-header-text-color);
       }
     }
 
@@ -252,4 +204,56 @@ div {
         }
       }
     }
+
+    @include bp.sm {
+      @include mx.ml-mr(0);
+
+      $dot-margin: 1rem;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        margin-left: $dot-margin;
+        width: v.$code-dot-size;
+        height: v.$code-dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow:
+          (v.$code-dot-size + v.$code-dot-gap) 0 0
+            var(--code-header-muted-color),
+          (v.$code-dot-size + v.$code-dot-gap) * 2 0 0
+            var(--code-header-muted-color);
+      }
+
+      span {
+        margin-left: v.$code-icon-width * -1; // center the label text
+        max-width: calc(
+          100% - $dot-margin - (v.$code-dot-gap + v.$code-dot-size) * 3 -
+            v.$code-icon-width * 4
+        );
+      }
+    }
+  }
+
+  .highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+/* Hide line numbers for default, console, and terminal code snippets */
+div {
+  &.nolineno,
+  &.language-plaintext,
+  &.language-console,
+  &.language-terminal {
+    td:first-child {
+      padding: 0 !important;
+      margin-right: 0;
+
+      .lineno {
+        display: none;
+      }
+    }
+  }
 }