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>

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>