From 9511485142cda4456c7814ec9ed2e5ff438753e6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 28 Feb 2024 21:26:12 +0100
Subject: [PATCH] Apply compact padding to small buttons with svg icons
(#29471)
The buttons on the repo release tab were larger in height than on other
tabs because one of them contained the RSS icon which stretched the
button height by 3px. Workaround this problem by applying the "compact"
padding to any such button. They are within 0.4px in height now to
non-icon buttons.
Before:
<img width="406" alt="Screenshot 2024-02-28 at 15 30 23"
src="https://github.com/go-gitea/gitea/assets/115237/805bb93a-6fe4-40a0-82d1-03001bee8ecf">
After:
<img width="407" alt="Screenshot 2024-02-28 at 15 38 43"
src="https://github.com/go-gitea/gitea/assets/115237/27707588-890f-4852-ab08-105a57eda880">
For comparison, button on issue tab:
<img width="452" alt="Screenshot 2024-02-28 at 15 31 46"
src="https://github.com/go-gitea/gitea/assets/115237/74ac13d5-d016-49ba-9dd9-40ed32a748e9">
(cherry picked from commit 850fc2516e67049ec195c72d861896b275bd09d1)
---
templates/repo/release_tag_header.tmpl | 2 +-
web_src/css/modules/button.css | 7 +++++++
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/templates/repo/release_tag_header.tmpl b/templates/repo/release_tag_header.tmpl
index 6f3d28e7ad..fe978a9680 100644
--- a/templates/repo/release_tag_header.tmpl
+++ b/templates/repo/release_tag_header.tmpl
@@ -13,7 +13,7 @@
</div>
{{if .EnableFeed}}
<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
- {{svg "octicon-rss" 18}} {{ctx.Locale.Tr "rss_feed"}}
+ {{svg "octicon-rss" 16}} {{ctx.Locale.Tr "rss_feed"}}
</a>
{{end}}
{{if and (not .PageIsTagList) .CanCreateRelease}}
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index b772a4c14e..3c80eb99c0 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -87,6 +87,13 @@ It needs some tricks to tweak the left/right borders with active state */
box-shadow: none;
}
+/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
+ would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
+.ui.small.button:not(.compact):has(.svg) {
+ padding-top: 0.58928571em;
+ padding-bottom: 0.58928571em;
+}
+
.ui.labeled.button.disabled > .button,
.ui.basic.buttons .button,
.ui.basic.button {