From def21375b79b0a893e46a4a24f17574958402721 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 May 2024 16:09:52 +0500
Subject: [PATCH] Change `--border-radius-circle` to `--border-radius-full`
 (gitea#30936)

Cherry-pick of https://github.com/go-gitea/gitea/commit/2ced31e81dd9e45659660c1abff529d0192fd8ed adapted to Forgejo releases UI.

Percentage-based `border-radius` [creates undesirable
ellipse](https://jsfiddle.net/silverwind/j9ko5wnt/4/) on non-square
content. Instead, use pixel value and use same wording `full` like
tailwind does, but increast to 99999px over their 9999px.

(cherry picked from commit 2ced31e81dd9e45659660c1abff529d0192fd8ed)
Adapted by @0ko

(cherry picked from commit afa1380672a70cfd12cf5a976f32ebe050846803)
(cherry picked from commit 7b7318255e68ee7e4d0f5b1b8e5ef91cd72a59e5)
---
 tailwind.config.js                 | 2 +-
 web_src/css/base.css               | 4 ++--
 web_src/css/modules/animations.css | 2 +-
 web_src/css/repo.css               | 2 +-
 web_src/css/repo/release-tag.css   | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index d49e9d7a1c..94dfdbced4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -66,7 +66,7 @@ export default {
       'xl': '12px',
       '2xl': '16px',
       '3xl': '24px',
-      'full': 'var(--border-radius-circle)', // 50%
+      'full': 'var(--border-radius-full)',
     },
     fontFamily: {
       sans: 'var(--fonts-regular)',
diff --git a/web_src/css/base.css b/web_src/css/base.css
index a4ef1e8747..a8f6626457 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -18,7 +18,7 @@
   /* other variables */
   --border-radius: 4px;
   --border-radius-medium: 6px;
-  --border-radius-circle: 50%;
+  --border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
   --opacity-disabled: 0.55;
   --height-loading: 16rem;
   --repo-header-issue-min-height: 41px;
@@ -1423,7 +1423,7 @@ overflow-menu .ui.label {
 
 .color-icon {
   display: inline-block;
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--border-radius-full);
   height: 14px;
   width: 14px;
 }
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 0f78ad25cb..dba01af1c3 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -31,7 +31,7 @@
   border-width: 4px;
   border-style: solid;
   border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--border-radius-full);
 }
 
 .is-loading.small-loading-icon::after {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index de0e568a6f..a603218f4a 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -805,7 +805,7 @@ td .commit-summary {
   width: 34px;
   height: 34px;
   background-color: var(--color-timeline);
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--border-radius-full);
   display: flex;
   float: left;
   margin-left: -33px;
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index e2b11dc77e..429a4690a4 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -68,7 +68,7 @@
   position: absolute;
   left: -5.5px;
   top: 30px;
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--border-radius-full);
   border: 2.5px solid var(--color-body);
 }