From 97f51a73d4a2e7fb42ccf1107abf07e985cfa13a Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Tue, 30 Jun 2026 03:36:51 +0200
Subject: Improve admin search overlay layout and behaviour

- Widen overlay (300px -> min(520px, 90vw)), centre instead of
  hardcoded left:400px, so it scales from mobile to desktop
- Split title and unique_name into separate JSON fields and DOM
  elements; two-line result layout (bold title, small grey
  monospace path) instead of "Title (path)" wrapping awkwardly
- Add small margin between title and path line
- Fix event handler stacking: keyup/escape/outside-click handlers
  were being rebound on every display_toggle call. Moved all
  bindings to initialize(), display_toggle() now only shows/hides
- Switch search input from keyup to input event, catching paste
  and cut via mouse which keyup misses
- Add Escape key and outside-click to dismiss the overlay
- Stop clearing search box and results on close; reopening now
  preserves prior search, matching standard search UI behaviour
- Link search results to node_path instead of edit_node_path,
  since opening edit auto-locks the node
- Add "press Enter to see all results" hint in dropdown
- Disable browser autocomplete on search input
---
 public/stylesheets/admin.css | 44 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 11 deletions(-)

(limited to 'public/stylesheets/admin.css')

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 4b08356..c9ef173 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -495,28 +495,50 @@ table tr.header {
 #search_widget {
   position: absolute;
   top: 20px;
-  left: 400px;
-  width: 300px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(520px, 90vw);
   border: 1px solid #000000;
   -webkit-box-shadow: 3px 3px 5px #b1b1b1;
-  -moz-box-shadow: 10px 10px 5px #888, 10px 10px 30px rgba(0,0,0,0.4);
+  box-shadow: 3px 3px 5px #b1b1b1;
   background-color: #ffffff;
   padding: 3px;
-  text-align: center;
+  z-index: 100;
 }
 
-#search_widget span {
+#search_widget input {
+  width: calc(100% - 70px);
   font-size: 18px;
 }
 
-#search_widget input {
-  width: 210px;
-  font-size: 18px;
+#search_results p {
+  margin: 0;
+  padding: 4px 4px 0 4px;
+  border-bottom: 1px solid #e8e8e8;
 }
 
-#search_widget #search_results {
-  padding: 4px;
-  text-align: left;
+#search_results p a {
+  display: block;
+  font-weight: bold;
+  font-size: 0.95rem;
+}
+
+#search_results p span.result_path {
+  display: block;
+  margin-top: 2px;
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: #969696;
+  padding-bottom: 4px;
+}
+
+#search_results p.search_more {
+  margin: 0;
+  padding: 6px 4px;
+  font-size: 0.8rem;
+  color: #969696;
+  font-style: italic;
+  border-bottom: none;
 }
 
 table#content th.description {
-- 
cgit v1.3