From e9f69ea37893c498527bb5f5a10dc47bae7b692d Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Fri, 6 Mar 2026 12:18:54 +0100
Subject: [PATCH] event timeline search layout fix

---
 .../app/sessions/[sessionId]/components/EventTimeline.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Web/autopilot-monitor-web/app/sessions/[sessionId]/components/EventTimeline.tsx b/src/Web/autopilot-monitor-web/app/sessions/[sessionId]/components/EventTimeline.tsx
index 5480eaa1..8f5e8d9f 100644
--- a/src/Web/autopilot-monitor-web/app/sessions/[sessionId]/components/EventTimeline.tsx
+++ b/src/Web/autopilot-monitor-web/app/sessions/[sessionId]/components/EventTimeline.tsx
@@ -70,9 +70,9 @@ export default function EventTimeline({
   return (
     <div className="space-y-6">
       {/* Search + Severity filters + Expand/Collapse — shared controls above the timeline(s) */}
-      <div className="space-y-2">
-        {/* Search bar — full width on mobile, fixed width on larger screens */}
-        <div className="relative w-full sm:w-48">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2">
+        {/* Search bar — full width on mobile, fixed width on desktop */}
+        <div className="relative w-full sm:w-48 flex-shrink-0">
           <svg className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
           </svg>
@@ -95,7 +95,7 @@ export default function EventTimeline({
           )}
         </div>
         {/* Severity filters + Expand/Collapse */}
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 flex-1 min-w-0">
           <span className="text-xs font-medium text-gray-500">Filter:</span>
           {(["Debug", "Info", "Warning", "Error", "Critical"] as const).map((sev) => {
             const active = severityFilters.has(sev);