diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl
index 1bc9447110..b0e8ace410 100644
--- a/templates/repo/settings/webhook/base_list.tmpl
+++ b/templates/repo/settings/webhook/base_list.tmpl
@@ -60,7 +60,9 @@
 		{{range .Webhooks}}
 			<div class="item truncated-item-container">
 				<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>
-				<a class="text truncate gt-f1 gt-mr-3" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
+				<div class="text truncate gt-f1 gt-mr-3">
+					<a title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
+				</div>
 				<a class="muted gt-p-3" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
 				<a class="delete-button gt-p-3" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a>
 			</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 8542248d90..b41bfc6942 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -481,6 +481,14 @@ a.label,
   text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
 }
 
+/* fix Fomantic's line-height causing vertical scrollbars to appear */
+ul.ui.list li,
+ol.ui.list li,
+.ui.list > .item,
+.ui.list .list > .item {
+  line-height: var(--line-height-default);
+}
+
 .ui.input.focus > input,
 .ui.input > input:focus {
   border-color: var(--color-primary);