From 3c1f7fae4b30b29510bef37dec83172c96599910 Mon Sep 17 00:00:00 2001
From: Seonhyo Choi <cornpip7777@gmail.com>
Date: Thu, 9 Jul 2026 07:20:20 +0900
Subject: [PATCH] fix(ui): truncate overflowed code block label with ellipsis
 (#2771)

---
 _sass/base/_syntax.scss | 168 ++++++++++++++++++++--------------------
 1 file changed, 86 insertions(+), 82 deletions(-)

diff --git a/_sass/base/_syntax.scss b/_sass/base/_syntax.scss
index a7a5cba95..5d3185923 100644
--- a/_sass/base/_syntax.scss
+++ b/_sass/base/_syntax.scss
@@ -124,6 +124,87 @@ div[class^='language-'] {
   }
 
   .code-header {
+    @extend %no-cursor;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: v.$code-header-height;
+    margin-left: 0.75rem;
+    margin-right: 0.25rem;
+
+    /* 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 {
+        font-size: 1rem;
+        width: v.$code-icon-width;
+        color: var(--code-header-icon-color);
+
+        &.small {
+          font-size: 70%;
+        }
+      }
+
+      @at-root [file] #{&} > i {
+        position: relative;
+        top: 1px; /* center the file icon */
+      }
+
+      /* label text */
+      &::after {
+        content: attr(data-label-text);
+        font-size: 0.85rem;
+        font-weight: 600;
+      }
+    }
+
+    /* clipboard */
+    button {
+      @extend %cursor-pointer;
+      @extend %rounded;
+
+      border: 1px solid transparent;
+      height: 2rem;
+      width: 2rem;
+      margin-right: 0.125rem;
+      padding: 0;
+      background-color: inherit;
+
+      i {
+        color: var(--code-header-icon-color);
+      }
+
+      &[timeout] {
+        &:hover {
+          border-color: var(--clipboard-checked-color);
+        }
+
+        i {
+          font-size: 90%;
+          color: var(--clipboard-checked-color);
+        }
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:not([timeout]):hover {
+        background-color: rgb(128 128 128 / 37%);
+
+        i {
+          color: white;
+        }
+      }
+    }
+
     @include bp.sm {
       @include mx.ml-mr(0);
 
@@ -145,8 +226,11 @@ div[class^='language-'] {
       }
 
       span {
-        // center the text of label
-        margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
+        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
+        );
       }
     }
   }
@@ -173,83 +257,3 @@ div {
     }
   }
 }
-
-.code-header {
-  @extend %no-cursor;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: v.$code-header-height;
-  margin-left: 0.75rem;
-  margin-right: 0.25rem;
-
-  /* the label block */
-  span {
-    line-height: v.$code-header-height;
-
-    /* label icon */
-    i {
-      font-size: 1rem;
-      width: v.$code-icon-width;
-      color: var(--code-header-icon-color);
-
-      &.small {
-        font-size: 70%;
-      }
-    }
-
-    @at-root [file] #{&} > i {
-      position: relative;
-      top: 1px; /* center the file icon */
-    }
-
-    /* label text */
-    &::after {
-      content: attr(data-label-text);
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--code-header-text-color);
-    }
-  }
-
-  /* clipboard */
-  button {
-    @extend %cursor-pointer;
-    @extend %rounded;
-
-    border: 1px solid transparent;
-    height: 2rem;
-    width: 2rem;
-    margin-right: 0.125rem;
-    padding: 0;
-    background-color: inherit;
-
-    i {
-      color: var(--code-header-icon-color);
-    }
-
-    &[timeout] {
-      &:hover {
-        border-color: var(--clipboard-checked-color);
-      }
-
-      i {
-        font-size: 90%;
-        color: var(--clipboard-checked-color);
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:not([timeout]):hover {
-      background-color: rgb(128 128 128 / 37%);
-
-      i {
-        color: white;
-      }
-    }
-  }
-}