chore: fix various layout problems (#37983)

Fix various misaligments, fix space between list item bar items, remove
deadcode (milestone dashboard)

web_src/css/base.css

@@ -454,11 +454,6 @@ img.ui.avatar,
   margin-right: 4px;
 }
 
-.ui.inline.delete-button {
-  padding: 8px 15px;
-  font-weight: var(--font-weight-normal);
-}
-
 .ui .migrate {
   color: var(--color-text-light-2) !important;
 }

web_src/css/index.css

@@ -37,7 +37,6 @@
 @import "./modules/charescape.css";
 
 @import "./shared/flex-list.css";
-@import "./shared/milestone.css";
 @import "./shared/settings.css";
 
 @import "./features/dropzone.css";

web_src/css/modules/svg.css

@@ -2,7 +2,7 @@
  and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */
 .svg:not(.git-entry-icon) {
   display: inline-block;
-  vertical-align: text-top;
+  vertical-align: middle; /* middle is the best choice for different font sizes from 1px to 36px when no flex */
   fill: currentcolor;
 }
 

web_src/css/repo/issue-list.css

@@ -34,14 +34,6 @@
   }
 }
 
-#issue-list .issue-item-title {
-  font-size: 16px;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text);
-  text-decoration: none;
-  overflow-wrap: anywhere;
-}
-
 #issue-list .branches {
   display: inline-flex;
 }
@@ -106,3 +98,33 @@
   color: var(--color-primary);
   text-decoration: underline;
 }
+
+.list-item-large-title {
+  font-size: 16px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.list-item-title-progress {
+  width: 200px;
+  height: 16px;
+}
+
+.list-item-secondary-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-block);
+  justify-content: space-between;
+  color: var(--color-text-light-2);
+}
+
+.list-item-secondary-bar a {
+  color: var(--color-text-light-2);
+  text-decoration: none;
+}
+
+.list-item-secondary-bar a:hover {
+  color: var(--color-text);
+}

web_src/css/shared/flex-list.css

@@ -32,7 +32,7 @@
 
 .items-with-main > .item {
   display: flex;
-  gap: 8px;
+  gap: var(--gap-block);
   align-items: flex-start;
 }
 
@@ -44,7 +44,7 @@
 .items-with-main > .item .item-main {
   display: flex;
   flex-direction: column;
-  gap: 0.25em;
+  gap: var(--gap-inline);
   flex-grow: 1;
   flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
@@ -52,7 +52,7 @@
 
 .items-with-main > .item .item-header {
   display: flex;
-  gap: .25rem;
+  gap: var(--gap-inline);
   justify-content: space-between;
   flex-wrap: wrap;
 }
@@ -63,7 +63,7 @@
 
 .items-with-main > .item .item-trailing {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--gap-block);
   align-items: center;
   flex-grow: 0;
   flex-wrap: wrap;
@@ -92,7 +92,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: .25rem;
+  gap: var(--gap-inline);
   color: var(--color-text-light-2);
   overflow-wrap: anywhere;
 }

web_src/css/shared/milestone.css

@@ -1,62 +0,0 @@
-.milestone-list {
-  list-style: none;
-}
-
-.milestone-card {
-  width: 100%;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.milestone-card + .milestone-card {
-  border-top: 1px solid var(--color-secondary);
-}
-
-.milestone-card .render-content {
-  padding-top: 10px;
-}
-
-.milestone-header progress {
-  width: 200px;
-  height: 16px;
-}
-
-.milestone-header {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.milestone-toolbar {
-  padding-top: 5px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: space-between;
-}
-
-.milestone-toolbar .group {
-  color: var(--color-text-light-2);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.milestone-toolbar .group > a {
-  font-size: 15px;
-  color: var(--color-text-light-2);
-}
-
-.milestone-toolbar .group > a:hover {
-  color: var(--color-text);
-}
-
-@media (max-width: 767.98px) {
-  .milestone-card {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-}