refactor: move view selection to titlebar menu

webui/src/styles/views.css

@@ -1,32 +1,39 @@
-.titlebar-view-selector {
-  display: inline-flex;
+.titlebar-view-menu {
+  width: min(300px, calc(100vw - 24px));
+}
+
+.titlebar-view-menu-heading {
+  display: flex;
   align-items: center;
+  justify-content: space-between;
+  min-height: 34px;
+  padding: 4px 9px 8px;
+  color: var(--text-strong);
+}
+
+.titlebar-view-menu .dropdown-item > span {
   min-width: 0;
-  gap: 7px;
-  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.titlebar-view-selector select {
-  width: min(190px, 24vw);
-  height: 32px;
-  padding: 0 28px 0 8px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background-color: transparent;
-  color: var(--text);
-  font: inherit;
-  font-size: 13px;
-  cursor: pointer;
+.titlebar-view-menu .dropdown-item > svg {
+  flex: 0 0 auto;
+  margin-left: auto;
+  color: var(--accent);
 }
 
-.titlebar-view-selector select:hover,
-.titlebar-view-selector select:focus-visible {
-  background-color: var(--titlebar-hover-bg);
-}
-
-.titlebar-view-selector select:disabled {
+.titlebar-view-menu .dropdown-item:disabled {
   cursor: default;
-  opacity: .78;
+  opacity: .72;
+}
+
+.titlebar-view-menu-note {
+  margin: 8px 9px 4px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.4;
 }
 
 .views-management-layout {
@@ -314,10 +321,6 @@
 }
 
 @media (max-width: 760px) {
-  .titlebar-view-selector select {
-    width: 120px;
-  }
-
   .views-admin-shell {
     display: flex;
     flex-direction: column;