Skip to content

Commit a38eca3

Browse files
authored
Fix Fomantic's line-height causing vertical scrollbars to appear (#26961)
Before: ![before](https://github.com/go-gitea/gitea/assets/3371163/bc5a3b20-3490-4e14-ab1d-2fcfbc4a2e20) After: ![after](https://github.com/go-gitea/gitea/assets/3371163/70e8be6a-11a2-46af-9e1e-78ac153cd2a4) --- 1. **Remove the scroll bar exception that in the a tag** 2. **Reduce the actual width of the a tag to the actual width of the content** ![c363a5b5883e105a0c65d7337893b50](https://github.com/go-gitea/gitea/assets/3371163/789d9b83-ad14-46d2-8a1b-df551a063f6a) As shown in the screenshot, the red box area should not be clickable
1 parent 0989f43 commit a38eca3

File tree

2 files changed

+11
-1
lines changed

2 files changed

+11
-1
lines changed

templates/repo/settings/webhook/base_list.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@
6060
{{range .Webhooks}}
6161
<div class="item truncated-item-container">
6262
<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}} gt-mr-3">{{svg "octicon-dot-fill" 22}}</span>
63-
<a class="text truncate gt-f1 gt-mr-3" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
63+
<div class="text truncate gt-f1 gt-mr-3">
64+
<a title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
65+
</div>
6466
<a class="muted gt-p-3" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
6567
<a class="delete-button gt-p-3" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a>
6668
</div>

web_src/css/base.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,14 @@ a.label,
481481
text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
482482
}
483483

484+
/* fix Fomantic's line-height causing vertical scrollbars to appear */
485+
ul.ui.list li,
486+
ol.ui.list li,
487+
.ui.list > .item,
488+
.ui.list .list > .item {
489+
line-height: var(--line-height-default);
490+
}
491+
484492
.ui.input.focus > input,
485493
.ui.input > input:focus {
486494
border-color: var(--color-primary);

0 commit comments

Comments
 (0)