diff --git a/src/components/ColorInput.test.tsx b/src/components/ColorInput.test.tsx index 9b6ee7be..aad79d7b 100644 --- a/src/components/ColorInput.test.tsx +++ b/src/components/ColorInput.test.tsx @@ -48,6 +48,11 @@ describe('ColorSwatch', () => { }) describe('ColorEditableValue', () => { + it('left-aligns the text display in view mode', () => { + render() + expect(screen.getByText('#3b82f6')).toHaveClass('text-left') + }) + it('shows swatch when value is a valid hex color', () => { render() expect(screen.getByTestId('color-swatch')).toBeTruthy() diff --git a/src/components/ColorInput.tsx b/src/components/ColorInput.tsx index 31dc5ab1..8c9802bf 100644 --- a/src/components/ColorInput.tsx +++ b/src/components/ColorInput.tsx @@ -102,7 +102,7 @@ export function ColorEditableValue({ value, isEditing, onStartEdit, onSave, onCa {showSwatch && } diff --git a/src/components/DynamicPropertiesPanel.test.tsx b/src/components/DynamicPropertiesPanel.test.tsx index e7bb2598..98c875c8 100644 --- a/src/components/DynamicPropertiesPanel.test.tsx +++ b/src/components/DynamicPropertiesPanel.test.tsx @@ -129,6 +129,30 @@ describe('DynamicPropertiesPanel', () => { expect(screen.getByText('Luca')).toBeInTheDocument() }) + it('left-aligns mixed property value displays', () => { + render( + , + ) + + expect(screen.getByText('Luca').parentElement).toHaveClass('justify-start', 'text-left') + expect(screen.getByText('0.84').parentElement).toHaveClass('justify-start', 'text-left') + expect(screen.getByTestId('date-display')).toHaveClass('text-left') + expect(screen.getByTestId('icon-editable-display')).toHaveClass('text-left') + expect(screen.getByText('#3b82f6')).toHaveClass('text-left') + expect(screen.getByText('\u2014').parentElement).toHaveClass('justify-start', 'text-left') + }) + it('hides Owner with wikilink value from Properties panel', () => { render( { expect(value).toHaveClass('truncate') }) + it('left-aligns plain text values in view mode', () => { + render() + expect(screen.getByText('Active').parentElement).toHaveClass('justify-start', 'text-left') + }) + it('shows input in editing mode', () => { render() const input = screen.getByDisplayValue('Active') @@ -238,6 +243,11 @@ describe('UrlValue', () => { expect(screen.getByTestId('url-link')).toHaveTextContent('https://example.com') }) + it('left-aligns URL values in view mode', () => { + render() + expect(screen.getByTestId('url-link')).toHaveClass('justify-start', 'text-left') + }) + it('opens URL via openExternalUrl on click', () => { render() fireEvent.click(screen.getByTestId('url-link')) diff --git a/src/components/EditableValue.tsx b/src/components/EditableValue.tsx index 3eae3352..a0dc04b4 100644 --- a/src/components/EditableValue.tsx +++ b/src/components/EditableValue.tsx @@ -66,7 +66,7 @@ export function UrlValue({ return ( diff --git a/src/components/IconEditableValue.test.tsx b/src/components/IconEditableValue.test.tsx index c3b42e4a..c00805a4 100644 --- a/src/components/IconEditableValue.test.tsx +++ b/src/components/IconEditableValue.test.tsx @@ -22,6 +22,20 @@ function renderIconValue(overrides: Partial { + it('left-aligns the icon display in view mode', () => { + render( + , + ) + + expect(screen.getByTestId('icon-editable-display')).toHaveClass('text-left') + }) + it('shows searchable icon results with previews while editing', () => { renderIconValue() diff --git a/src/components/IconEditableValue.tsx b/src/components/IconEditableValue.tsx index 4d134879..cff34242 100644 --- a/src/components/IconEditableValue.tsx +++ b/src/components/IconEditableValue.tsx @@ -170,7 +170,7 @@ export function IconEditableValue({ return (