fix: property panel responsive layout + status dropdown click regression

- StatusDropdown: change anchor element from <div> to <span> to fix
  invalid HTML nesting inside <span> parents. Browsers auto-correct
  <div> inside <span> by ripping the element out, breaking
  anchorRef.parentElement positioning. JSDOM doesn't auto-correct,
  so tests passed but the real app's dropdown failed to position.

- StatusValue: revert shrink-0 back to min-w-0 so the status pill
  can truncate in narrow panels instead of overflowing.

- PropertyRow: add min-w-0 and gap-2 for proper flex overflow,
  wrap property key in truncate span.

- AddPropertyForm: add flex-wrap, reduce input widths, set
  min-w-[60px] on value inputs for narrow panel support.

- InfoRow/TypeSelector/ReadOnlyType: add min-w-0 and gap-2.

- Tests: increase timeout for 3 Radix Select interaction tests
  that are slow in JSDOM.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Test
2026-02-28 10:54:37 +01:00
parent 1efdbfb978
commit a18a19166b
3 changed files with 20 additions and 20 deletions

View File

@@ -1012,7 +1012,7 @@ describe('DynamicPropertiesPanel', () => {
expect(screen.getByText('\u2713 Yes')).toBeInTheDocument()
})
it('stores actual boolean value when adding boolean property', () => {
it('stores actual boolean value when adding boolean property', { timeout: 15_000 }, () => {
render(
<DynamicPropertiesPanel
entry={makeEntry()}
@@ -1034,7 +1034,7 @@ describe('DynamicPropertiesPanel', () => {
expect(onAddProperty).toHaveBeenCalledWith('published', true)
})
it('shows date picker trigger when date type selected', () => {
it('shows date picker trigger when date type selected', { timeout: 15_000 }, () => {
render(
<DynamicPropertiesPanel
entry={makeEntry()}
@@ -1050,7 +1050,7 @@ describe('DynamicPropertiesPanel', () => {
expect(screen.getByText('Pick a date\u2026')).toBeInTheDocument()
})
it('shows status dropdown when status type selected', () => {
it('shows status dropdown when status type selected', { timeout: 15_000 }, () => {
render(
<DynamicPropertiesPanel
entry={makeEntry()}