From fe009734d38bba364d6a2a129c454d99ba9148ab Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Wed, 24 Sep 2025 22:23:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B9=B6=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E5=B7=A5=E5=8D=95=E6=88=96=20PR=20=E8=AF=A6=E7=BB=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=8B=E7=9A=84=E6=A0=87=E7=AD=BE=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md               |  1 +
 styles/components/issue.ts | 44 ++++++++++++++++++++++++++++++++++++++
 styles/public/dropdown.ts  |  8 ++++++-
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecf0b1d..393487e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ##### 更符合 GitHub 风格
 
+- 修复并同步工单或 PR 详细页面下的标签菜单样式 #19
 - 同步页脚样式
 - 优化创建标签菜单的菜单项的样式
 
diff --git a/styles/components/issue.ts b/styles/components/issue.ts
index bce6b14..e2ce9b5 100644
--- a/styles/components/issue.ts
+++ b/styles/components/issue.ts
@@ -547,6 +547,7 @@ export const issueSidebar = css`
   .page-content.repository.issue {
     .issue-content {
       gap: 24px;
+      // 侧边栏
       .issue-content-right {
         border: 0;
         font-size: 12px;
@@ -596,6 +597,49 @@ export const issueSidebar = css`
             margin-top: 0 !important;
             margin-bottom: 0 !important;
           }
+          // 标签菜单项
+          .ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) {
+            // 修复标签菜单中描述文本过长没有换行挤掉标签的问题
+            display: grid !important;
+            grid-template-columns: auto auto 1fr;
+            row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\])
+            // 如果是归档标签则隐藏
+            &.tw-hidden {
+              display: none !important;
+            }
+            // 默认隐藏多余信息避免标签对齐问题
+            .item-secondary-info {
+              display: none;
+              grid-column: 2 / -1; // 从第2列对齐
+              color: ${themeVars.color.text.light.num1};
+              > .tw-pl-\\\[20px\\\] {
+                // 已经与第二列对齐, 不需要额外的 padding
+                padding-left: 0px !important;
+                padding-top: 4px;
+                // 显示全部描述信息与 Github 保持一致
+                white-space: normal;
+                small {
+                  font-size: 12px;
+                }
+              }
+              > .archived-label-hint {
+                // 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item)
+                top: 6px;
+                right: 8px;
+              }
+              // 如果有描述信息则显示
+              &:has(.tw-pl-\\\[20px\\\]) {
+                display: block;
+                > .archived-label-hint {
+                  top: 4px; // 有描述信息的归档标签与标签对齐需要更高点
+                }
+              }
+              // 如果有归档标签则显示
+              &:has(.archived-label-hint > .ui.label) {
+                display: block;
+              }
+            }
+          }
         }
         // 时间追踪
         > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts
index 17aca0b..29800ec 100644
--- a/styles/public/dropdown.ts
+++ b/styles/public/dropdown.ts
@@ -17,6 +17,7 @@ export const dropdown = css`
       > .item:not(.tw-hidden) {
         display: flex !important;
         align-items: center;
+        align-content: center;
         padding: 6px 8px !important;
         border-radius: ${otherThemeVars.border.radius} !important;
         gap: 4px;
@@ -25,6 +26,10 @@ export const dropdown = css`
         }
         &:not(.emoji):first-of-type {
           margin-top: 8px;
+          // 工单详细页面的标签菜单中的清除选中标签按钮
+          &.clear-selection {
+            margin-top: 0px;
+          }
         }
         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
         &.cherry-pick-button,
@@ -224,7 +229,8 @@ export const selectionDropdown = css`
   // 创建仓库页面的标签选择框
   .ui.search.selection.dropdown {
     > .menu > .item {
-      flex-wrap: wrap;
+      flex-direction: column;
+      align-items: flex-start;
       > i {
         color: ${themeVars.color.text.light.num1};
       }