From 7990bcf3333ffd84e722290cf309b82881a67dbb Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Thu, 27 Mar 2025 21:01:29 +0000
Subject: [PATCH] feat(ui): improve button gap consistency, make it variable,
 larger on touchscreens (#7271)

* home buttons: use `button-sequence` for consistency of gaps with other ui
* folder-actions: use `button-sequence` for better overflowing and so gap actually works instead of relying on whitespace, because currently it doesn't due to lack of flex
* introduce variable `--button-spacing` for `button-row` and `button-sequence`
    * it's `0.33rem` on desktop for more pleasant hovering over button rows
    * it's `0.5rem` on touchscreens for worrying less about misstapping

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7271
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
---
 templates/repo/home.tmpl |  6 +++---
 web_src/css/base.css     | 11 +++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 871790ce28..d1685f6a79 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -56,8 +56,8 @@
 		{{$l := Eval $n "-" 1}}
 		{{$isHomepage := (eq $n 0)}}
 		<div class="repo-button-row">
-			<div class="tw-flex tw-items-center tw-gap-y-2">
-				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
+			<div class="tw-gap-y-2 button-sequence">
+				{{template "repo/branch_dropdown" dict "root" .}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 					{{$cmpBranch := ""}}
 					{{if ne .Repository.ID .BaseRepo.ID}}
@@ -141,7 +141,7 @@
 					{{template "repo/cite/cite_modal" .}}
 				{{end}}
 				{{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
-					<div class="button-row folder-actions">
+					<div class="button-sequence folder-actions">
 						<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
 							{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
 						</a>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 5b0085ee0d..cffc1ea1b1 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -27,6 +27,7 @@
   --checkbox-size: 15px; /* height and width of checkbox and radio inputs */
   --page-spacing: 16px; /* space between page elements */
   --page-margin-x: 32px; /* minimum space on left and right side of page */
+  --button-spacing: 0.33rem;
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {
@@ -41,6 +42,12 @@
   }
 }
 
+@media (pointer: coarse) {
+  :root {
+    --button-spacing: 0.5rem;
+  }
+}
+
 :root * {
   --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
 }
@@ -247,13 +254,13 @@ h1.error-code {
 }
 
 .button-row {
-  gap: 0.5rem;
+  gap: var(--button-spacing);
 }
 
 .button-sequence {
   display: flex;
   flex-flow: wrap;
-  gap: 0.5em;
+  gap: var(--button-spacing);
 }
 
 .button-sequence.right {