fix(gui): strengthen omnibox positioning with explicit fixed positioning and responsive styles

commit: 06fdee3c523ab1c53eb3c41c91f4ad38dcb2038a
author: bamen · 13mo ago · 2025-09-15 08:26 UTC
parent: 61f8c29
signature: unsigned

2 files · +65 -17

M gui/src/components/omnibox/Omnibox.svelte +55 -8


@@ -20,6 +20,14 @@
20	20		let boxElement: HTMLDivElement;
21	21		let inputElement = $state<HTMLInputElement>();
22	22
	23	+	// Responsive styling state
	24	+	let responsiveStyles = $state({
	25	+	width: 'min(90vw, 720px)',
	26	+	padding: '8px 12px',
	27	+	fontSize: '16px',
	28	+	inputPadding: '10px 12px'
	29	+	});
	30	+
23	31		// Handle click outside to close
24	32		function handleOverlayClick(event: MouseEvent) {
25	33		const target = event.target as HTMLElement;

@@ -47,6 +55,20 @@
47	55		}
48	56		}
49	57
	58	+	// Update responsive styles based on viewport width (handles zoom levels)
	59	+	function updateResponsiveStyles() {
	60	+	const vw = window.innerWidth;
	61	+	const isSmall = vw < 640;
	62	+	const isLarge = vw > 1920;
	63	+
	64	+	responsiveStyles = {
	65	+	width: isSmall ? '95vw' : isLarge ? 'min(90vw, 840px)' : 'min(90vw, 720px)',
	66	+	padding: isSmall ? '6px 8px' : '8px 12px',
	67	+	fontSize: isSmall ? '14px' : isLarge ? '17px' : '16px',
	68	+	inputPadding: isSmall ? '8px 10px' : '10px 12px'
	69	+	};
	70	+	}
	71	+
50	72		// Focus input when component becomes visible
51	73		$effect(() => {
52	74		if (visible && inputElement) {

@@ -92,6 +114,12 @@
92	114		onMount(() => {
93	115		console.log('🔧 Omnibox component mounted');
94	116
	117	+	// Initialize responsive styles
	118	+	updateResponsiveStyles();
	119	+
	120	+	// Add resize listener for responsive updates (handles zoom changes)
	121	+	window.addEventListener('resize', updateResponsiveStyles);
	122	+
95	123		// Add global click listener
96	124		document.addEventListener('click', handleGlobalClick, true);
97	125

@@ -156,6 +184,9 @@
156	184		});
157	185
158	186		onDestroy(() => {
	187	+	// Cleanup resize listener
	188	+	window.removeEventListener('resize', updateResponsiveStyles);
	189	+
159	190		// Cleanup global click listener
160	191		document.removeEventListener('click', handleGlobalClick, true);
161	192

@@ -172,19 +203,35 @@
172	203		<!-- Overlay container -->
173	204		<div
174	205		class="fixed inset-0 z-[2147483647]"
175		-	style="display: {visible ? 'block' : 'none'}"
	206	+	style="display: {visible ? 'block' : 'none'};
	207	+	position: fixed !important;
	208	+	top: 0 !important;
	209	+	left: 0 !important;
	210	+	right: 0 !important;
	211	+	bottom: 0 !important;
	212	+	z-index: 2147483647 !important;
	213	+	pointer-events: none !important;
	214	+	margin: 0 !important;
	215	+	padding: 0 !important;
	216	+	isolation: isolate;"
176	217		onmousedown={handleOverlayClick}
177	218		role="presentation"
178	219		>
179	220		<!-- Main omnibox container -->
180	221		<div
181	222		bind:this={boxElement}
182		-	class="w-[min(90vw,720px)] mx-auto mt-[8vh] p-3
183		-	bg-[#1b1b1b] border border-[#444] rounded-lg shadow-[0_10px_30px_rgba(0,0,0,0.6)]
184		-	text-[#eee]
185		-	sm:w-[95vw] sm:p-2
186		-	xl:w-[min(90vw,840px)]"
187		-	style="font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif"
	223	+	class="bg-[#1b1b1b] border border-[#444] rounded-lg shadow-[0_10px_30px_rgba(0,0,0,0.6)] text-[#eee]"
	224	+	style="position: relative !important;
	225	+	left: 50% !important;
	226	+	transform: translateX(-50%) !important;
	227	+	margin-top: 8vh !important;
	228	+	margin-left: 0 !important;
	229	+	margin-right: 0 !important;
	230	+	width: {responsiveStyles.width};
	231	+	padding: {responsiveStyles.padding};
	232	+	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
	233	+	pointer-events: auto !important;
	234	+	box-sizing: border-box !important;"
188	235		onmousedown={handleBoxClick}
189	236		onmouseenter={handleMouseEnter}
190	237		role="dialog"

@@ -193,7 +240,7 @@
193	240		aria-label={mode === 'find' ? 'Find in page' : 'Omnibox search'}
194	241		>
195	242		<!-- Input component -->
196		-	<OmniboxInput bind:inputElement />
	243	+	<OmniboxInput bind:inputElement {responsiveStyles} />
197	244
198	245		<!-- Content based on mode -->
199	246		{#if mode === 'omnibox'}

   let boxElement: HTMLDivElement;
   let inputElement = $state<HTMLInputElement>();
+  // Responsive styling state
+  let responsiveStyles = $state({
+    width: 'min(90vw, 720px)',
+    padding: '8px 12px',
+    fontSize: '16px',
+    inputPadding: '10px 12px'
+  });
   // Handle click outside to close
   function handleOverlayClick(event: MouseEvent) {
     const target = event.target as HTMLElement;
     }
   }
+  // Update responsive styles based on viewport width (handles zoom levels)
+  function updateResponsiveStyles() {
+    const vw = window.innerWidth;
+    const isSmall = vw < 640;
+    const isLarge = vw > 1920;
+    responsiveStyles = {
+      width: isSmall ? '95vw' : isLarge ? 'min(90vw, 840px)' : 'min(90vw, 720px)',
+      padding: isSmall ? '6px 8px' : '8px 12px',
+      fontSize: isSmall ? '14px' : isLarge ? '17px' : '16px',
+      inputPadding: isSmall ? '8px 10px' : '10px 12px'
+    };
+  }
   // Focus input when component becomes visible
   $effect(() => {
     if (visible && inputElement) {
   onMount(() => {
     console.log('🔧 Omnibox component mounted');
+    // Initialize responsive styles
+    updateResponsiveStyles();
+    // Add resize listener for responsive updates (handles zoom changes)
+    window.addEventListener('resize', updateResponsiveStyles);
     // Add global click listener
     document.addEventListener('click', handleGlobalClick, true);
   });
   onDestroy(() => {
+    // Cleanup resize listener
+    window.removeEventListener('resize', updateResponsiveStyles);
     // Cleanup global click listener
     document.removeEventListener('click', handleGlobalClick, true);
 <!-- Overlay container -->
 <div
   class="fixed inset-0 z-[2147483647]"
-  style="display: {visible ? 'block' : 'none'}"
+  style="display: {visible ? 'block' : 'none'};
+         position: fixed !important;
+         top: 0 !important;
+         left: 0 !important;
+         right: 0 !important;
+         bottom: 0 !important;
+         z-index: 2147483647 !important;
+         pointer-events: none !important;
+         margin: 0 !important;
+         padding: 0 !important;
+         isolation: isolate;"
   onmousedown={handleOverlayClick}
   role="presentation"
 >
   <!-- Main omnibox container -->
   <div
     bind:this={boxElement}
-    class="w-[min(90vw,720px)] mx-auto mt-[8vh] p-3
+    class="bg-[#1b1b1b] border border-[#444] rounded-lg shadow-[0_10px_30px_rgba(0,0,0,0.6)] text-[#eee]"
-           bg-[#1b1b1b] border border-[#444] rounded-lg shadow-[0_10px_30px_rgba(0,0,0,0.6)]
+    style="position: relative !important;
-           text-[#eee]
+           left: 50% !important;
-           sm:w-[95vw] sm:p-2
+           transform: translateX(-50%) !important;
-           xl:w-[min(90vw,840px)]"
+           margin-top: 8vh !important;
-    style="font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif"
+           margin-left: 0 !important;
+           margin-right: 0 !important;
+           width: {responsiveStyles.width};
+           padding: {responsiveStyles.padding};
+           font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+           pointer-events: auto !important;
+           box-sizing: border-box !important;"
     onmousedown={handleBoxClick}
     onmouseenter={handleMouseEnter}
     role="dialog"
     aria-label={mode === 'find' ? 'Find in page' : 'Omnibox search'}
   >
     <!-- Input component -->
-    <OmniboxInput bind:inputElement />
+    <OmniboxInput bind:inputElement {responsiveStyles} />
     <!-- Content based on mode -->
     {#if mode === 'omnibox'}

M gui/src/components/omnibox/OmniboxInput.svelte +10 -9


@@ -15,12 +15,16 @@
15	15		let suggestions = $derived(omniboxStore.suggestions);
16	16		let matches = $derived(omniboxStore.matches);
17	17
18		-	// Input element ref (props for parent to bind)
	18	+	// Input element ref and responsive styles (props for parent to bind)
19	19		interface Props {
20	20		inputElement?: HTMLInputElement;
	21	+	responsiveStyles?: {
	22	+	fontSize: string;
	23	+	inputPadding: string;
	24	+	};
21	25		}
22	26
23		-	let { inputElement = $bindable() }: Props = $props();
	27	+	let { inputElement = $bindable(), responsiveStyles }: Props = $props();
24	28
25	29		// Computed placeholder
26	30		let placeholder = $derived(

@@ -185,13 +189,10 @@
185	189		type="text"
186	190		{placeholder}
187	191		value={inputValue}
188		-	class="w-full box-border px-3 py-2.5
189		-	bg-[#121212] text-[#eee]
190		-	border border-[#555] rounded-md
191		-	focus:outline-none
192		-	text-base
193		-	sm:px-2.5 sm:py-2 sm:text-sm
194		-	xl:text-lg xl:px-3 xl:py-3"
	192	+	class="w-full box-border bg-[#121212] text-[#eee] border border-[#555] rounded-md focus:outline-none"
	193	+	style="padding: {responsiveStyles?.inputPadding \|\| '10px 12px'};
	194	+	font-size: {responsiveStyles?.fontSize \|\| '16px'};
	195	+	box-sizing: border-box"
195	196		oninput={handleInput}
196	197		onkeydown={handleKeyDown}
197	198		onmousedown={handleMouseDown}

   let suggestions = $derived(omniboxStore.suggestions);
   let matches = $derived(omniboxStore.matches);
-  // Input element ref (props for parent to bind)
+  // Input element ref and responsive styles (props for parent to bind)
   interface Props {
     inputElement?: HTMLInputElement;
+    responsiveStyles?: {
+      fontSize: string;
+      inputPadding: string;
+    };
   }
-  let { inputElement = $bindable() }: Props = $props();
+  let { inputElement = $bindable(), responsiveStyles }: Props = $props();
   // Computed placeholder
   let placeholder = $derived(
   type="text"
   {placeholder}
   value={inputValue}
-  class="w-full box-border px-3 py-2.5
+  class="w-full box-border bg-[#121212] text-[#eee] border border-[#555] rounded-md focus:outline-none"
-         bg-[#121212] text-[#eee]
+  style="padding: {responsiveStyles?.inputPadding || '10px 12px'};
-         border border-[#555] rounded-md
+         font-size: {responsiveStyles?.fontSize || '16px'};
-         focus:outline-none
+         box-sizing: border-box"
-         text-base
-         sm:px-2.5 sm:py-2 sm:text-sm
-         xl:text-lg xl:px-3 xl:py-3"
   oninput={handleInput}
   onkeydown={handleKeyDown}
   onmousedown={handleMouseDown}