修复并同步工单或 PR 详细页面下的标签菜单样式 #19

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ##### 更符合 GitHub 风格
 
+- 修复并同步工单或 PR 详细页面下的标签菜单样式 #19
 - 同步页脚样式
 - 优化创建标签菜单的菜单项的样式
 

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 {

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};
       }