From 717d97f6f09a5ed7bcd9068174b08fbc2bbcab8c Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Thu, 9 Apr 2026 13:39:08 +0200
Subject: [PATCH] fix: keep date filter rows aligned

---
 src/components/FilterBuilder.test.tsx | 19 ++++++++++++++++++-
 src/components/FilterBuilder.tsx      |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/FilterBuilder.test.tsx b/src/components/FilterBuilder.test.tsx
index 27fc79cb..6594a8d2 100644
--- a/src/components/FilterBuilder.test.tsx
+++ b/src/components/FilterBuilder.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
 import { FilterBuilder } from './FilterBuilder'
 import type { FilterGroup } from '../types'
 
@@ -135,6 +135,23 @@ describe('FilterBuilder value inputs', () => {
     expect(screen.getByTestId('date-picker-trigger')).toHaveAttribute('title', 'Mar 28, 2026')
   })
 
+  it('keeps filter controls top-aligned when the date preview adds a second line', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-04-07T12:00:00Z'))
+
+    renderBuilder({
+      all: [{ field: 'created', op: 'after', value: '10 days ago' }],
+    })
+
+    fireEvent.focus(screen.getByTestId('date-value-input'))
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300)
+    })
+
+    expect(screen.getByTestId('date-value-preview')).toHaveTextContent('Resolves to March 28, 2026')
+    expect(screen.getByTestId('filter-row')).toHaveClass('items-start')
+  })
+
   it('filters the field combobox as the user types', () => {
     render(
       <FilterBuilder
diff --git a/src/components/FilterBuilder.tsx b/src/components/FilterBuilder.tsx
index 6760d1bf..b09afb79 100644
--- a/src/components/FilterBuilder.tsx
+++ b/src/components/FilterBuilder.tsx
@@ -141,7 +141,7 @@ function FilterRow({ condition, fields, onUpdate, onRemove }: {
   const regexEnabled = regexSupported && condition.regex === true
   const invalidRegex = regexSupported && hasInvalidRegex(String(condition.value ?? ''), regexEnabled)
   return (
-    <div className="flex items-center gap-1.5">
+    <div className="flex items-start gap-1.5" data-testid="filter-row">
       <FilterFieldCombobox
         value={condition.field}
         fields={fields}