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 (