fix(ui): incorrect overflow for the repos switch from the header

src/main/frontend/components/repo.cljs

@@ -336,15 +336,15 @@
                       :align "start"
                       :content-props {:class "repos-list"}})))
                :title repo-name}                            ;; show full path on hover
-              [:div.flex.flex-row.items-center
-               [:div.flex.relative.graph-icon.rounded
-                (shui/tabler-icon "database" {:size 15})]
+              [:div.flex.relative.graph-icon.rounded
+               (shui/tabler-icon "database" {:size 15})]
 
-               [:div.repo-switch.block.pr-2.whitespace-nowrap
-                [:span.repo-name.font-medium
-                 [:span.overflow-hidden.text-ellipsis (if (= config/demo-repo short-repo-name) "Demo" short-repo-name)]
-                 (when remote? [:span.pl-1 (ui/icon "cloud")])]
-                [:span.dropdown-caret.ml-2 {:style {:border-top-color "#6b7280"}}]]])))))))
+              [:div.repo-switch.pr-2.whitespace-nowrap
+               [:span.repo-name.font-medium
+                [:span.repo-text.overflow-hidden.text-ellipsis
+                 (if (= config/demo-repo short-repo-name) "Demo" short-repo-name)]
+                (when remote? [:span.pl-1 (ui/icon "cloud")])]
+               [:span.dropdown-caret]])))))))
 
 (defn invalid-graph-name-warning
   []

src/main/frontend/components/repo.css

@@ -28,5 +28,17 @@
 .cp__repos-select {
   &-trigger {
     @apply flex items-center p-2 text-sm font-medium rounded-md;
+
+    .repo-switch {
+      @apply flex w-[90%] overflow-hidden items-center select-none;
+    }
+
+    .repo-text, .repo-name {
+      @apply block w-[95%];
+    }
+
+    .dropdown-caret {
+      @apply relative border-t-gray-09 left-1.5 top-[2px];
+    }
   }
 }