add --gap-label variable

Author: silverwind

web_src/css/base.css

@@ -35,7 +35,8 @@
   --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */
   --z-index-toast: 1002; /* should be larger than modal */
 
-  --font-size-label: 12px;
+  --font-size-label: 12px; /* font size of individual labels */
+  --gap-label: .25rem; /* gap between labels */
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {

web_src/css/modules/label.css

@@ -4,7 +4,7 @@
 .ui.label {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
+  gap: var(--gap-label);
   min-width: 0;
   max-width: 100%;
   background: var(--color-label-bg);
@@ -305,7 +305,7 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers.
 }
 
 .with-labels-list-inline .labels-list .ui.label + .ui.label {
-  margin-left: 0.25em;
+  margin-left: var(--gap-label);
 }
 
 .with-labels-list-inline .labels-list .ui.label {

web_src/css/modules/list.css

@@ -5,7 +5,6 @@
   list-style-type: none;
   margin: 1em 0;
   padding: 0;
-  font-size: 1em;
 }
 
 .ui.list:first-child {

web_src/css/repo.css

@@ -84,7 +84,7 @@
 
 .issue-content-right .ui.list.labels-list {
   display: flex;
-  gap: 0.25em;
+  gap: var(--gap-label);
   flex-wrap: wrap;
 }
 

web_src/css/shared/flex-list.css

@@ -46,7 +46,9 @@
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: .25rem;
+  /* labels are under effect of this gap here because they are display:contents. Ideally we should make wrapping
+     of labels work without display: contents and set this to a static value again. */
+  gap: var(--gap-label);
   max-width: 100%;
   color: var(--color-text);
   font-size: 16px;