feat: present global search in an anchored overlay

webui/src/styles/search.css

@@ -53,61 +53,111 @@
   color: var(--text-strong);
 }
 
-.global-search-results {
+.global-search-source.is-overlay-open {
+  visibility: hidden;
+}
+
+.search-overlay-backdrop {
+  display: block;
+  padding: 0;
+  backdrop-filter: blur(1px);
+}
+
+.search-overlay-dialog {
+  position: fixed;
+  display: flex;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.search-overlay-dialog-header {
   position: absolute;
-  z-index: 300;
-  top: calc(100% + 7px);
-  left: 50%;
-  width: min(460px, 80vw);
-  transform: translateX(-50%);
+  width: 1px;
+  min-height: 0;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.search-overlay-dialog-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: visible;
+  padding: 0;
+}
+
+.search-overlay-input-position {
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.global-search-overlay-input {
+  box-shadow: var(--focus-ring);
+}
+
+.search-overlay-results-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  margin-top: 8px;
   overflow: hidden;
   border: var(--border-line);
   border-radius: 6px;
   background: var(--surface);
-  box-shadow: var(--shadow-menu);
+  box-shadow: var(--shadow-strong);
 }
 
-.global-search-results button {
+.search-overlay-toolbar {
+  position: relative;
+  z-index: 2;
   display: flex;
-  width: 100%;
-  min-width: 0;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 3px;
-  border: 0;
-  border-bottom: var(--border-line);
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  padding: 9px 12px;
-  text-align: left;
-  font: inherit;
-  font-size: 11px;
-}
-
-.global-search-results button:hover,
-.global-search-results button.active {
-  background: var(--titlebar-hover-bg);
-}
-
-.global-search-result-title {
-  width: 100%;
-  overflow: hidden;
-  color: var(--text-strong);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.global-search-results .global-search-all {
-  flex-direction: row;
   align-items: center;
-  gap: 7px;
-  border-bottom: 0;
-  color: var(--text-strong);
-  font-size: 12px;
-  font-weight: 700;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-height: 48px;
+  border-bottom: var(--border-line);
+  background: var(--panel-header);
+  padding: 7px 10px;
+}
+
+.search-overlay-scope {
+  max-width: min(420px, 100%);
+}
+
+.search-overlay-close {
+  width: 32px;
+  height: 32px;
+  margin-left: auto;
+  padding: 0;
+}
+
+.search-overlay-toolbar .search-active-filters {
+  flex-basis: 100%;
+}
+
+.search-overlay-results-viewport {
+  min-height: 0;
+  flex: 1 1 auto;
+  padding: 8px 12px 14px;
+}
+
+.search-overlay-empty {
+  display: grid;
+  min-height: 120px;
+  place-items: center;
+  padding: 20px;
+  text-align: center;
 }
 
 .search-page {
@@ -357,6 +407,11 @@
   background: var(--sidebar-hover-bg);
 }
 
+.search-result.active {
+  background: var(--sidebar-hover-bg);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
 .search-result-heading {
   display: flex;
   align-items: center;
@@ -408,25 +463,28 @@
 }
 
 @media (max-width: 900px) {
-  .global-search {
+  .global-search-source {
     width: 34px;
     min-width: 34px;
     padding: 0 8px;
   }
 
-  .global-search:focus-within {
-    position: absolute;
-    z-index: 2;
-    top: 50%;
-    left: 50%;
-    width: min(360px, calc(100vw - 190px));
-    transform: translate(-50%, -50%);
-  }
-
-  .global-search:not(:focus-within) input,
-  .global-search:not(:focus-within) .global-search-clear {
+  .global-search-source input,
+  .global-search-source .global-search-clear {
     width: 0;
     padding: 0;
     opacity: 0;
   }
+
+  .search-overlay-results-panel {
+    border-radius: 4px;
+  }
+
+  .search-overlay-toolbar {
+    gap: 6px;
+  }
+
+  .search-overlay-scope {
+    max-width: calc(100% - 86px);
+  }
 }