Improve labels-list rendering (#34846)

Make labels list use consistent gap

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/base.css

@@ -34,6 +34,11 @@
   /* z-index */
   --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 of individual 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) {
@@ -1093,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 */
 }
@@ -1121,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;
 }
 
@@ -1136,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,25 +4,19 @@
 .ui.label {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
+  gap: var(--gap-inline);
   min-width: 0;
-  vertical-align: middle;
-  line-height: 1;
+  max-width: 100%;
   background: var(--color-label-bg);
   color: var(--color-label-text);
-  padding: 0.3em 0.5em;
-  font-size: 0.85714286rem;
+  padding: 2px 6px;
+  font-size: var(--font-size-label);
   font-weight: var(--font-weight-medium);
   border: 0 solid transparent;
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
   white-space: nowrap;
-}
-
-.ui.label:first-child {
-  margin-left: 0;
-}
-.ui.label:last-child {
-  margin-right: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 a.ui.label {
@@ -292,3 +286,58 @@ a.ui.ui.ui.basic.grey.label:hover {
 .ui.large.label {
   font-size: 1rem;
 }
+
+/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout.
+If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
+.labels-list {
+  display: contents;
+  font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
+}
+
+.labels-list a {
+  max-width: 100%; /* for ellipsis */
+}
+
+.labels-list .ui.label {
+  min-height: 20px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.with-labels-list-inline .labels-list .ui.label + .ui.label {
+  margin-left: var(--gap-inline);
+}
+
+.with-labels-list-inline .labels-list .ui.label {
+  line-height: var(--line-height-default);
+}
+
+/* Scoped labels with different colors on left and right */
+.ui.label.scope-parent {
+  background: none !important;
+  padding: 0 !important;
+  gap: 0 !important;
+}
+
+.ui.label.scope-parent > .ui.label {
+  margin: 0 !important; /* scoped label's margin is handled by the parent */
+}
+
+.ui.label.scope-left {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ui.label.scope-middle {
+  border-radius: 0;
+}
+
+.ui.label.scope-right {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.ui.label.archived-label {
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}

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

@@ -73,10 +73,21 @@
   overflow: hidden;
 }
 
+.issue-content-right .ui.list {
+  margin: 0.5em 0;
+  max-width: 100%;
+}
+
 .issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark {
   visibility: hidden;
 }
 
+.issue-content-right .ui.list.labels-list {
+  display: flex;
+  gap: var(--gap-inline);
+  flex-wrap: wrap;
+}
+
 @media (max-width: 767.98px) {
   .issue-content-left,
   .issue-content-right {
@@ -1544,49 +1555,6 @@ td .commit-summary {
   border-bottom-right-radius: 4px;
 }
 
-.labels-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 2.5px;
-  align-items: center;
-}
-
-.labels-list .label, .scope-parent > .label {
-  padding: 0 6px;
-  min-height: 20px;
-  line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
-}
-
-/* Scoped labels with different colors on left and right */
-.ui.label.scope-parent {
-  background: none !important;
-  padding: 0 !important;
-  gap: 0 !important;
-}
-
-.archived-label {
-  filter: grayscale(0.5);
-  opacity: 0.5;
-}
-
-.ui.label.scope-left {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  margin-right: 0;
-}
-
-.ui.label.scope-middle {
-  border-radius: 0;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.ui.label.scope-right {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  margin-left: 0;
-}
-
 .repo-button-row {
   margin: 8px 0;
   display: flex;

web_src/css/repo/issue-card.css

@@ -29,13 +29,16 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-  gap: 0.25em;
+  gap: 1em;
 }
 
-.issue-card-assignees {
+.issue-card-bottom-part {
   display: flex;
+  flex: 1;
   align-items: center;
   gap: 0.25em;
-  justify-content: end;
   flex-wrap: wrap;
+  overflow: hidden;
+  max-width: fit-content;
+  max-height: fit-content;
 }

web_src/css/repo/issue-label.css

@@ -4,41 +4,46 @@
   margin: 0;
 }
 
-.issue-label-list .item {
+.issue-label-list > .item {
   border-bottom: 1px solid var(--color-secondary);
   display: flex;
   padding: 1em 0;
   margin: 0;
 }
 
-.issue-label-list .item:first-child {
+.issue-label-list > .item:first-child {
   padding-top: 0;
 }
 
-.issue-label-list .item:last-child {
+.issue-label-list > .item:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }
 
-.issue-label-list .item .label-title {
+.issue-label-list > .item .label-title {
   width: 33%;
+  padding-right: 1em;
 }
 
-.issue-label-list .item .label-issues {
+.issue-label-list > .item .label-issues {
   width: 33%;
+  padding-right: 1em;
 }
 
-.issue-label-list .item .label-operation {
+.issue-label-list > .item .label-operation {
   width: 33%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  justify-content: end;
+  align-items: center;
 }
 
-.issue-label-list .item a {
+.issue-label-list > .item .label-operation a {
   font-size: 12px;
-  padding-right: 10px;
-  color: var(--color-text-light);
 }
 
-.issue-label-list .item.org-label {
+.issue-label-list > .item.org-label {
   opacity: 0.7;
 }
 

web_src/css/shared/flex-list.css

@@ -33,14 +33,6 @@
   color: var(--color-primary) !important;
 }
 
-.flex-item .flex-item-icon {
-  align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */
-}
-
-.flex-item .flex-item-icon + .flex-item-main {
-  align-self: baseline;
-}
-
 .flex-item .flex-item-trailing {
   display: flex;
   gap: 0.5rem;
@@ -54,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-inline);
   max-width: 100%;
   color: var(--color-text);
   font-size: 16px;