improve gap variables

Author: wxiaoguang

web_src/css/base.css

@@ -36,7 +36,9 @@
   --z-index-toast: 1002; /* should be larger than modal */
 
   --font-size-label: 12px; /* font size of individual labels */
-  --gap-label: .25rem; /* gap between labels */
+
+  --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
+  --gap-block: 0.25rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {
@@ -1096,7 +1098,7 @@ table th[data-sortt-desc] .svg {
 .flex-text-inline {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
+  gap: var(--gap-inline);
   vertical-align: middle;
   min-width: 0; /* make ellipsis work */
 }
@@ -1124,7 +1126,7 @@ table th[data-sortt-desc] .svg {
 .flex-text-block {
   display: flex;
   align-items: center;
-  gap: .5rem;
+  gap: var(--gap-block);
   min-width: 0;
 }
 
@@ -1139,7 +1141,7 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
 .ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {
   display: flex !important;
   align-items: center;
-  gap: .5rem;
+  gap: var(--gap-block);
   min-width: 0;
 }
 .ui.dropdown .menu.flex-items-menu > .item img,

web_src/css/modules/label.css

@@ -4,7 +4,7 @@
 .ui.label {
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-label);
+  gap: var(--gap-inline);
   min-width: 0;
   max-width: 100%;
   background: var(--color-label-bg);

web_src/css/repo.css

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

web_src/css/shared/flex-list.css

@@ -48,7 +48,7 @@
   align-items: center;
   /* 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);
+  gap: var(--gap-inline);
   max-width: 100%;
   color: var(--color-text);
   font-size: 16px;