From f9b28f896f6b4ea8a4800d52511de93f9e4dd3c0 Mon Sep 17 00:00:00 2001
From: Whale-Zhang <53304091+Whale-Zhang@users.noreply.github.com>
Date: Mon, 24 Aug 2026 16:25:31 +0800
Subject: [PATCH] Hide the rail label and pin the clock icon to the button
 center.

Collapsed New Session renders only an 18px icon in a 36px control; the
plugin still laid out the title in the flex row, which shoved the glyph left.
---
 lib/client.js        | 29 ++++++++++++++++++++---------
 test/package.test.js |  2 ++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/lib/client.js b/lib/client.js
index dd38eb2..ecd946f 100644
--- a/lib/client.js
+++ b/lib/client.js
@@ -194,11 +194,12 @@ window.__ModuleLoader__.load({
 .dsh-ct-switch[aria-checked=true]{background:var(--dsw-alias-brand-primary)}
 .dsh-ct-switch::after{content:"";display:block;width:20px;height:20px;border-radius:999px;background:var(--dsw-alias-bg-layer-3);transition:transform .16s}
 .dsh-ct-switch[aria-checked=true]::after{transform:translateX(16px)}
-.dsh-ct-entry{box-sizing:border-box;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden;font-family:inherit;cursor:pointer}
+.dsh-ct-entry{box-sizing:border-box;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden;font-family:inherit;cursor:pointer;position:relative}
 .dsh-ct-entry svg{flex:none;display:block;margin:0}
-.dsh-ct-entryLabel{white-space:nowrap;overflow:hidden}
-[class*="_collapsed"] .dsh-ct-entry{width:36px;height:36px;padding:0;gap:0;margin:0 0 12px;justify-content:center;align-items:center;align-self:flex-start}
-[class*="_collapsed"] .dsh-ct-entry .dsh-ct-entryLabel{max-width:0;opacity:0;margin:0;padding:0;pointer-events:none}
+.dsh-ct-entryLabel{white-space:nowrap;overflow:hidden;min-width:0}
+[class*="_collapsed"] .dsh-ct-entry,.dsh-ct-entry[data-collapsed=true]{width:36px!important;height:36px!important;padding:0!important;gap:0!important;margin:0 0 12px!important;justify-content:center!important;align-items:center!important;align-self:flex-start}
+[class*="_collapsed"] .dsh-ct-entry .dsh-ct-entryLabel,.dsh-ct-entry[data-collapsed=true] .dsh-ct-entryLabel{display:none!important;max-width:0;min-width:0;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}
+[class*="_collapsed"] .dsh-ct-entry svg,.dsh-ct-entry[data-collapsed=true] svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
 .dsh-ct-region{display:none !important;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding-right:var(--dsh-sidebar-inline-padding,12px);box-sizing:border-box}
 [data-dsh-ct-mode=on] .dsh-ct-region{display:flex !important;animation:dsh-ct-fade-in .18s var(--ds-ease-in-out,ease)}
 [data-dsh-ct-mode=on] [class*="regionArea"] > :not(.dsh-ct-region){display:none !important}
@@ -1190,11 +1191,12 @@ window.__ModuleLoader__.load({
       if (nativeLabel && label) label.className = `${nativeLabel.className} dsh-ct-entryLabel`.trim()
       const cs = getComputedStyle(found)
       const collapsed = sidebarCollapsed(found) || Number.parseFloat(cs.width) <= 40
+      entry.dataset.collapsed = collapsed ? 'true' : 'false'
       entry.style.borderRadius = cs.borderRadius
       entry.style.height = collapsed ? '36px' : cs.height
       entry.style.width = collapsed ? '36px' : ''
-      entry.style.padding = collapsed ? '0' : cs.padding
-      entry.style.gap = collapsed ? '0' : cs.gap
+      entry.style.padding = collapsed ? '0px' : cs.padding
+      entry.style.gap = collapsed ? '0px' : cs.gap
       entry.style.margin = collapsed ? '0 0 12px' : cs.margin
       entry.style.justifyContent = 'center'
       entry.style.alignItems = 'center'
@@ -1207,16 +1209,25 @@ window.__ModuleLoader__.load({
       entry.style.boxShadow = cs.boxShadow
       entry.style.color = cs.color
       if (label) {
+        label.style.display = collapsed ? 'none' : ''
         label.style.maxWidth = collapsed ? '0' : ''
+        label.style.minWidth = collapsed ? '0' : ''
         label.style.opacity = collapsed ? '0' : ''
         label.style.margin = collapsed ? '0' : ''
         label.setAttribute('aria-hidden', collapsed ? 'true' : 'false')
       }
       const nativeSvg = found.querySelector('svg')
       const icon = entry.querySelector('svg')
-      if (nativeSvg && icon) {
-        icon.setAttribute('width', nativeSvg.getAttribute('width') || '14')
-        icon.setAttribute('height', nativeSvg.getAttribute('height') || '14')
+      if (icon) {
+        const size = collapsed
+          ? (nativeSvg ? Math.round(nativeSvg.getBoundingClientRect().width) || 18 : 18)
+          : (nativeSvg?.getAttribute('width') || '14')
+        icon.setAttribute('width', String(size))
+        icon.setAttribute('height', String(size))
+        icon.style.position = collapsed ? 'absolute' : ''
+        icon.style.left = collapsed ? '50%' : ''
+        icon.style.top = collapsed ? '50%' : ''
+        icon.style.transform = collapsed ? 'translate(-50%, -50%)' : ''
       }
     }
 
diff --git a/test/package.test.js b/test/package.test.js
index 5ea5aa9..f696ec2 100644
--- a/test/package.test.js
+++ b/test/package.test.js
@@ -61,6 +61,8 @@ test('installable bundle declares host apply, client half, unique id, and no @de
   assert.match(client, /sidebarCollapsed/)
   assert.match(client, /_collapsed/)
   assert.match(client, /width:36px/)
+  assert.match(client, /data-collapsed/)
+  assert.match(client, /translate\(-50%, -50%\)/)
   assert.match(client, /返回工作区/)
   assert.match(client, /runs\/\$\{run\.id\}\/open/)
   assert.match(client, /regionArea/)