style: misc UI fixes (#37691)

- Action view sidebar: rename `job-brief-item` to `action-view-sidebar-item`, fix trash icon overflow on long artifact names, align artifact and workflow hover styles with the jobs list - Branches: expand new PR button cell to three wide so the button is not clipped on narrow viewports - Dashboard feed: add `tw-max-w-full` so long issue titles truncate - Reactions: tighten label padding <img width="261" height="65" alt="Screenshot 2026-05-13 at 16 18 33" src="https://github.com/user-attachments/assets/ecfe8f37-4a65-4839-b8c0-defccc85482c" /> <img width="154" height="126" alt="Screenshot 2026-05-13 at 16 19 25" src="https://github.com/user-attachments/assets/41302134-d1b7-401a-be2d-79173adb6d17" /> <img width="405" height="378" alt="Screenshot 2026-05-13 at 16 47 18" src="https://github.com/user-attachments/assets/e2c5cdd4-f11d-498c-b17e-c74c80c0ddf7" /> <img width="206" height="149" alt="Screenshot 2026-05-13 at 16 55 53" src="https://github.com/user-attachments/assets/7787125d-04b1-4500-b9b8-2637845509d6" /> <img width="858" height="135" alt="Screenshot 2026-05-13 at 16 58 41" src="https://github.com/user-attachments/assets/cb5bdf56-3891-469d-aa77-ea38855958c1" /> <img width="434" height="128" alt="Screenshot 2026-05-13 at 17 00 43" src="https://github.com/user-attachments/assets/60f2c34d-b345-4813-8f6d-a95bf51021b4" /> --- This PR was written with the help of Claude Opus 4.7 --------- Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2026-05-23 05:42:33 +09:00 · 2026-05-21 09:02:05 +02:00
parent 93b8fdcd68
commit 2e96e8227f
17 changed files with 154 additions and 125 deletions
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -305,6 +305,15 @@ a.suppressed:hover {
  color: inherit;
 }

+/* keyboard focus ring for interactive elements */
+a:focus-visible,
+button:focus-visible,
+.ui.button:focus-visible,
+[role="button"]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
 a.silenced:hover {
  text-decoration-line: none;
 }
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -21,10 +21,6 @@
  white-space: nowrap;
 }

-.ui.button:focus-visible {
-  box-shadow: inset 0 0 0 2px currentcolor;
-}
-
@media (max-width: 767.98px) {
  .ui.button {
    white-space: normal;
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -258,30 +258,37 @@ a.ui.ui.ui.grey.label:hover {
  font-size: 1rem;
 }

-/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout.
-If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
+/* labels-list layout: span.labels-list > a.item > span.ui.label,
+by default, the labels list is rendered as "display: inline",
+it can also be rendered as flex by adding flex-related classes (the general ".item" selector also applies) */
 .labels-list {
-  display: contents;
-  font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
+  max-width: 100%; /* for ellipsis */
+  font-size: var(--font-size-label); /* must match the label font size, otherwise the height mismatches */
 }

-.labels-list a {
-  display: inline-flex;
+.labels-list > .item {
  max-width: 100%; /* for ellipsis */
 }

+.labels-list a:hover {
+  text-decoration: none;
+}
+
 .labels-list .ui.label {
  min-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
 }

-.with-labels-list-inline .labels-list .ui.label + .ui.label {
-  margin-left: var(--gap-inline);
+/* to align with different font sizes, these styles need to be written separately */
+#issue-list .labels-list > .item {
+  margin-right: 4px; /* margin-right (not margin-left) keeps wrapped labels left-aligned */
+  vertical-align: 2.5px; /* compensates inline-flex baseline so labels center with text */
 }

-.with-labels-list-inline .labels-list .ui.label {
-  line-height: var(--line-height-default);
+.timeline-item .labels-list > .item {
+  margin-right: 4px;
+  vertical-align: 1.5px;
 }

 /* Scoped labels with different colors on left and right */
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -516,10 +516,8 @@ td .commit-summary {
 }

 .repository.view.issue .comment-list .timeline-item .comment-text-line {
-  /* TODO: this "line-height" is not ideal (actually it is abused), many layouts depend on this magic value,
-      for example: alignment of the header arrow and the avatar, view PR commit list left icon layout, dismiss review with reason, etc */
-  line-height: 32px;
  color: var(--color-text-light);
+  flex: 1;
  min-width: 0;
 }

@@ -646,11 +644,6 @@ td .commit-summary {
  align-items: center;
 }

-.repository.view.issue .comment-list .event > .comment-text-line {
-  flex: 1;
-  min-width: 0;
-}
-
 .repository.view.issue .comment-list .event > .detail {
  margin-left: 15px;
  width: 100%;
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -34,6 +34,13 @@
  }
 }

+#issue-list .issue-item-title {
+  font-size: 16px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
 #issue-list .branches {
  display: inline-flex;
 }
--- a/web_src/css/repo/reactions.css
+++ b/web_src/css/repo/reactions.css
@@ -5,12 +5,12 @@
 }

 .timeline-item .conversation-holder .bottom-reactions {
-  margin: 1em 0 0 36px;
+  margin: 1em 0 0 24px;
  padding-bottom: 8px;
 }

 .bottom-reactions .ui.label {
-  padding: 5px 8px;
+  padding: 2px 6px;
  font-weight: var(--font-weight-normal);
 }

--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -74,8 +74,6 @@
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
-  /* labels are under effect of this gap here because they are display:contents. Ideally we should make wrapping
-     of labels work without display: contents and set this to a static value again. */
  gap: var(--gap-inline);
  max-width: 100%;
  color: var(--color-text);
--- a/web_src/js/components/ActionRunJobView.vue
+++ b/web_src/js/components/ActionRunJobView.vue
@@ -411,7 +411,7 @@ async function hashChangeListener() {
    </div>
    <div class="job-info-header-right">
      <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
-        <button class="ui button tw-px-3">
+        <button class="btn interact-bg tw-p-2">
          <SvgIcon name="octicon-gear" :size="18"/>
        </button>
        <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
@@ -463,8 +463,9 @@ async function hashChangeListener() {
        />
        <SvgIcon
          v-else
-          :name="currentJobStepsStates[stepIdx].expanded ? 'octicon-chevron-down' : 'octicon-chevron-right'"
-          :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"
+          name="octicon-chevron-right"
+          class="tw-mr-2 step-summary-chevron"
+          :class="{'tw-invisible': !isExpandable(jobStep.status)}"
        />
        <ActionStatusIcon :status="jobStep.status" icon-variant="circle-fill" class="tw-mr-2"/>
        <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@@ -564,6 +565,14 @@ async function hashChangeListener() {
  background: var(--color-console-hover-bg);
 }

+.job-step-container .job-step-summary .step-summary-chevron {
+  transition: transform 0.1s ease;
+}
+
+.job-step-container .job-step-summary.selected .step-summary-chevron {
+  transform: rotate(90deg);
+}
+
 .job-step-container .job-step-summary .step-summary-msg {
  flex: 1;
 }
@@ -707,13 +716,25 @@ async function hashChangeListener() {
 }

 .job-log-group-summary {
+  cursor: pointer;
  position: relative;
+  display: list-item;
+  list-style: disclosure-closed inside;
+  padding-left: 58px; /* line-num gutter (48px) + log-msg margin (10px), so the marker sits in the content column */
+}
+
+.job-log-group[open] > .job-log-group-summary {
+  list-style-type: disclosure-open;
 }

 .job-log-group-summary > .job-log-line {
  position: absolute;
  inset: 0;
-  z-index: -1; /* to avoid hiding the triangle of the "details" element */
+  z-index: -1; /* sit behind the disclosure marker */
  overflow: hidden;
 }
+
+.job-log-group-summary > .job-log-line .log-msg {
+  margin-left: 21px;
+}
 </style>
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -142,35 +142,36 @@ async function deleteArtifact(name: string) {
    <div class="action-view-body">
      <div class="action-view-left">
        <!-- summary -->
-        <a class="job-brief-item silenced" :href="run.viewLink" :class="!props.jobId ? 'selected' : ''">
-          <SvgIcon name="octicon-home"/>
-          <span class="gt-ellipsis">{{ locale.summary }}</span>
-        </a>
+        <div class="flex-items-block action-view-sidebar-list">
+          <a class="item silenced" :href="run.viewLink" :class="!props.jobId ? 'selected' : ''">
+            <SvgIcon name="octicon-home"/>
+            <span class="gt-ellipsis">{{ locale.summary }}</span>
+          </a>
+        </div>

        <!-- jobs list -->
        <div class="ui divider"/>
        <div class="left-list-header">{{ locale.allJobs }}</div>
-        <!-- unlike other lists, the items have paddings already -->
-        <ul class="ui relaxed list flex-items-block tw-p-0">
-          <li class="item job-brief-item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
-            <a class="tw-contents silenced" :href="job.link">
+        <div class="flex-items-block action-view-sidebar-list">
+          <div class="item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
+            <a class="flex-text-block tw-flex-1 silenced" :href="job.link">
              <ActionStatusIcon :locale-status="locale.status[job.status]" :status="job.status" icon-variant="circle-fill"/>
              <span class="tw-flex-1 gt-ellipsis">{{ job.name }}</span>
-              <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
-              <span>{{ job.duration }}</span>
+              <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-rerun-button tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
+              <span class="job-duration">{{ job.duration }}</span>
            </a>
-          </li>
-        </ul>
+          </div>
+        </div>

        <!-- artifacts list -->
        <template v-if="artifacts.length > 0">
          <div class="ui divider"/>
          <div class="left-list-header">{{ locale.artifactsTitle }} ({{ artifacts.length }})</div>
-          <ul class="ui relaxed list flex-items-block">
-            <li class="item" v-for="artifact in artifacts" :key="artifact.name">
+          <div class="flex-items-block action-view-sidebar-list">
+            <div class="item" v-for="artifact in artifacts" :key="artifact.name">
              <template v-if="artifact.status !== 'expired'">
                <a
-                  class="tw-flex-1 flex-text-block muted" target="_blank"
+                  class="tw-flex-1 tw-min-w-0 flex-text-block silenced" target="_blank"
                  :href="buildArtifactLink(artifact.name)"
                  :data-tooltip-content="buildArtifactTooltipHtml(artifact, locale.artifactExpiresAt)"
                  data-tooltip-render="html"
@@ -179,7 +180,7 @@ async function deleteArtifact(name: string) {
                  <SvgIcon name="octicon-file" class="tw-text-text-light"/>
                  <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
                </a>
-                <a v-if="run.canDeleteArtifact" class="muted" @click="deleteArtifact(artifact.name)">
+                <a v-if="run.canDeleteArtifact" class="silenced" @click="deleteArtifact(artifact.name)">
                  <SvgIcon name="octicon-trash"/>
                </a>
              </template>
@@ -188,21 +189,21 @@ async function deleteArtifact(name: string) {
                <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
                <span class="ui label tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
              </span>
-            </li>
-          </ul>
+            </div>
+          </div>
        </template>

        <!-- run details -->
        <div class="ui divider"/>
        <div class="left-list-header">{{ locale.runDetails }}</div>
-        <ul class="ui relaxed list">
-          <li class="item">
-            <a class="flex-text-block" :href="`${run.link}/workflow`">
+        <div class="flex-items-block action-view-sidebar-list">
+          <div class="item">
+            <a class="flex-text-block silenced" :href="`${run.link}/workflow`">
              <SvgIcon name="octicon-file-code" class="tw-text-text"/>
              <span class="gt-ellipsis">{{ locale.workflowFile }}</span>
            </a>
-          </li>
-        </ul>
+          </div>
+        </div>
      </div>

      <div class="action-view-right">
@@ -309,29 +310,44 @@ async function deleteArtifact(name: string) {
  color: var(--color-text-light-2);
 }

-.action-view-left .ui.relaxed.list {
+.action-view-sidebar-list {
  margin: var(--gap-block) 0;
-  padding-left: 10px;
 }

-.job-brief-item {
+.action-view-sidebar-list:first-child {
+  margin-top: 0;
+}
+
+.action-view-sidebar-list > .item {
  padding: 6px 10px;
  border-radius: var(--border-radius);
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: var(--gap-block);
 }

-.job-brief-item:hover {
+.action-view-sidebar-list > .item:hover {
  background-color: var(--color-hover);
 }

-.job-brief-item.selected {
+.action-view-sidebar-list > .item.selected {
  font-weight: var(--font-weight-bold);
  background-color: var(--color-active);
 }

+/* the re-run button replaces the duration on hover/focus */
+.action-view-sidebar-list > .item .job-rerun-button {
+  display: none;
+}
+
+.action-view-sidebar-list > .item:hover .job-rerun-button,
+.action-view-sidebar-list > .item:focus-within .job-rerun-button {
+  display: inline-flex;
+}
+
+/* only swap out the duration when a re-run button exists to take its place */
+.action-view-sidebar-list > .item:hover .job-rerun-button ~ .job-duration,
+.action-view-sidebar-list > .item:focus-within .job-rerun-button ~ .job-duration {
+  display: none;
+}
+
 /* ================ */
 /* action view right */