public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-23 05:42:33 +09:00
Code Issues Packages Projects Releases Wiki Activity

style: misc UI fixes (#37691)

Browse Source 
- 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>
This commit is contained in:
silverwind
2026-05-21 09:02:05 +02:00
committed by GitHub
parent 93b8fdcd68
commit 2e96e8227f
17 changed files with 154 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web_src/css/base.css
View File

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

4
web_src/css/modules/button.css
View File

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

27
web_src/css/modules/label.css
View File

@@ -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 */

9
web_src/css/repo.css
View File

@@ -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%;

7
web_src/css/repo/issue-list.css
View File

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

4
web_src/css/repo/reactions.css
View File

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

2
web_src/css/shared/flex-list.css
View File

@@ -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);