From 850fc2516e67049ec195c72d861896b275bd09d1 Mon Sep 17 00:00:00 2001 From: silverwind 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: Screenshot 2024-02-28 at 15 30 23 After: Screenshot 2024-02-28 at 15 38 43 For comparison, button on issue tab: Screenshot 2024-02-28 at 15 31 46 --- 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 f474fb89ead8..31c151da08f3 100644 --- a/templates/repo/release_tag_header.tmpl +++ b/templates/repo/release_tag_header.tmpl @@ -13,7 +13,7 @@ {{if .EnableFeed}} - {{svg "octicon-rss" 18}} {{ctx.Locale.Tr "rss_feed"}} + {{svg "octicon-rss" 16}} {{ctx.Locale.Tr "rss_feed"}} {{end}} {{if and (not .PageIsTagList) .CanCreateRelease}} diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 36cb499aebc0..26f8fcf94c17 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -85,6 +85,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,