Fix branch selector UI (#30803)

Fix  #30802

2 files changed, 54 insertions, 32 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 1d65bb37e7..c0ced2955c 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -871,6 +871,7 @@ input:-webkit-autofill:active,
 
 .ui.dropdown .scrolling.menu {
   border-color: var(--color-secondary);
+  border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
 }
 
 .color-preview {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 0b46f6b69f..cc09ec94e2 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2748,23 +2748,6 @@ tbody.commit-list {
   }
 }
 
-.branch-dropdown-button {
-  max-width: 340px;
-  vertical-align: bottom !important;
-}
-
-@media (min-width: 768px) and (max-width: 991.98px) {
-  .branch-dropdown-button {
-    max-width: 185px;
-  }
-}
-
-@media (max-width: 767.98px) {
-  .branch-dropdown-button {
-    max-width: 165px;
-  }
-}
-
 .commit-status-header {
   /* reset the default ".ui.attached.header" styles, to use the outer border */
   border: none !important;
@@ -2841,32 +2824,70 @@ tbody.commit-list {
   max-height: 200px;
 }
 
-/* Branch tag selector - TODO: Merge this into the same selector on repo page */
-.repository .issue-content .issue-content-right  .ui.grid .column.row {
-  padding: 10px;
-  padding-bottom: 0;
+.branch-selector-dropdown {
+  max-width: 100%;
 }
-.repository .issue-content .issue-content-right  .ui.grid .column.muted {
-  padding: 0;
+
+.ui.dropdown.branch-selector-dropdown > .menu {
+  margin-top: 4px;
+}
+
+.branch-selector-dropdown .branch-dropdown-button {
+  margin: 0;
+  max-width: 340px;
+  line-height: var(--line-height-default);
+}
+
+/* FIXME: These media selectors are not ideal (just keep them from old code).
+    There are many different pages, some need the max-width while some others don't,
+    they should be tested and improved in the future. */
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .branch-selector-dropdown .branch-dropdown-button {
+    max-width: 185px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .branch-selector-dropdown .branch-dropdown-button {
+    max-width: 165px;
+  }
 }
-.repository .issue-content .issue-content-right  .ui.grid .column.muted .text {
+
+.branch-selector-dropdown .branch-tag-tab {
+  padding: 0 10px;
+}
+
+.branch-selector-dropdown .branch-tag-item {
   display: inline-block;
   padding: 10px;
-  width: 100%;
-  text-align: center;
   border: 1px solid transparent;
   border-bottom: none;
 }
-.repository .issue-content .issue-content-right .ui.grid .column.muted .text.black {
+
+.branch-selector-dropdown .branch-tag-item.active {
   border-color: var(--color-secondary);
   background: var(--color-menu);
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
 }
-.repository .issue-content .issue-content-right .ui.dropdown  .scrolling.menu {
-  border-top: none;
-}
-.repository .issue-content .issue-content-right .branch-tag-divider {
-  margin-top: -1px;
+
+.branch-selector-dropdown .branch-tag-divider {
+  margin-top: -1px !important;
   border-top: 1px solid var(--color-secondary);
 }
+
+.branch-selector-dropdown .scrolling.menu {
+  border-top: none !important;
+}
+
+.branch-selector-dropdown .menu .item .rss-icon {
+  visibility: hidden; /* only show RSS icon on hover */
+}
+
+.branch-selector-dropdown .menu .item:hover .rss-icon {
+  visibility: visible;
+}
+
+.branch-selector-dropdown .scrolling.menu .loading-indicator {
+  height: 4em;
+}