From 1195d66c15ad6ead1f464b5d7ae30308e1278780 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 4 Jul 2023 04:15:06 +0200
Subject: [PATCH] Prevent SVG shrinking (#25652)

This will prevent the most common cases of SVG shrinking because lack of
space. I evaluated multiple options and this seems to be the one with
the least impact in size and processing cost, so I went with it.

Unfortunately, CSS can not dynamically convert `16` obtained from
`attr()` to `16px`, or else a generic solution for all sizes would have
been possible. But a solution is [in
sight](https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit)
with `attr(width px)` but no browser supports it currently.
---
 web_src/css/base.css        | 10 ---------
 web_src/css/index.css       |  1 +
 web_src/css/modules/svg.css | 41 +++++++++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 10 deletions(-)
 create mode 100644 web_src/css/modules/svg.css

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 8b8d376c57..ca400f270b 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -375,16 +375,6 @@ progress::-moz-progress-bar {
   opacity: 1 !important;
 }
 
-.svg {
-  display: inline-block;
-  vertical-align: text-top;
-  fill: currentcolor;
-}
-
-.middle .svg {
-  vertical-align: middle;
-}
-
 .unselectable,
 .button,
 .lines-num,
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 6a3e7d0dd5..fa918f49da 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -10,6 +10,7 @@
 @import "./modules/navbar.css";
 @import "./modules/toast.css";
 @import "./modules/divider.css";
+@import "./modules/svg.css";
 
 @import "./shared/issuelist.css";
 @import "./shared/milestone.css";
diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css
new file mode 100644
index 0000000000..b3060bddd6
--- /dev/null
+++ b/web_src/css/modules/svg.css
@@ -0,0 +1,41 @@
+.svg {
+  display: inline-block;
+  vertical-align: text-top;
+  fill: currentcolor;
+}
+
+.middle .svg {
+  vertical-align: middle;
+}
+
+/* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes
+   here are cherry-picked for our use cases, feel free to add more. after
+   https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is
+   supported in browsers, use `attr(width px)` instead for a generic
+   solution. */
+
+.svg[height="12"] { min-height: 12px; }
+.svg[height="13"] { min-height: 13px; }
+.svg[height="14"] { min-height: 14px; }
+.svg[height="15"] { min-height: 15px; }
+.svg[height="16"] { min-height: 16px; }
+.svg[height="18"] { min-height: 18px; }
+.svg[height="20"] { min-height: 20px; }
+.svg[height="22"] { min-height: 22px; }
+.svg[height="24"] { min-height: 24px; }
+.svg[height="36"] { min-height: 36px; }
+.svg[height="48"] { min-height: 48px; }
+.svg[height="56"] { min-height: 56px; }
+
+.svg[width="12"] { min-width: 12px; }
+.svg[width="13"] { min-width: 13px; }
+.svg[width="14"] { min-width: 14px; }
+.svg[width="15"] { min-width: 15px; }
+.svg[width="16"] { min-width: 16px; }
+.svg[width="18"] { min-width: 18px; }
+.svg[width="20"] { min-width: 20px; }
+.svg[width="22"] { min-width: 22px; }
+.svg[width="24"] { min-width: 24px; }
+.svg[width="36"] { min-width: 36px; }
+.svg[width="48"] { min-width: 48px; }
+.svg[width="56"] { min-width: 56px; }