From 459ee8c7e35381fbd65bb8d3045dbc7b5755d552 Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Tue, 31 Mar 2026 16:30:22 +0200
Subject: [PATCH] fix: normalize property row and chip heights for consistent
 layout

All chips (type, status, date, tags, boolean, color, text, URL) now use
h-6 (24px) with inline-flex + items-center, and PropertyRow has min-h-7
(28px) so every row aligns regardless of property type.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ColorInput.tsx             |  4 ++--
 src/components/DynamicPropertiesPanel.tsx |  2 +-
 src/components/EditableValue.tsx          | 12 ++++++------
 src/components/PropertyValueCells.tsx     | 14 +++++++-------
 src/components/TypeSelector.tsx           |  5 +++--
 5 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/ColorInput.tsx b/src/components/ColorInput.tsx
index 9f04e8e2..31dc5ab1 100644
--- a/src/components/ColorInput.tsx
+++ b/src/components/ColorInput.tsx
@@ -99,10 +99,10 @@ export function ColorEditableValue({ value, isEditing, onStartEdit, onSave, onCa
   }
 
   return (
-    <span className="inline-flex min-w-0 items-center gap-1.5">
+    <span className="inline-flex h-6 min-w-0 items-center gap-1.5">
       {showSwatch && <ColorSwatch color={value} onChange={handlePickerChange} />}
       <span
-        className="min-w-0 cursor-pointer truncate rounded px-1 py-0.5 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
+        className="min-w-0 cursor-pointer truncate rounded px-1 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
         onClick={onStartEdit}
         title={value || 'Click to edit'}
       >
diff --git a/src/components/DynamicPropertiesPanel.tsx b/src/components/DynamicPropertiesPanel.tsx
index b3abebde..3d245261 100644
--- a/src/components/DynamicPropertiesPanel.tsx
+++ b/src/components/DynamicPropertiesPanel.tsx
@@ -53,7 +53,7 @@ function PropertyRow({ propKey, value, editingKey, displayMode, autoMode, vaultS
   }
 
   return (
-    <div className="group/prop grid min-w-0 grid-cols-2 items-center gap-2 rounded px-1.5 outline-none transition-colors hover:bg-muted focus:bg-muted focus:ring-1 focus:ring-primary" tabIndex={0} onKeyDown={handleKeyDown} data-testid="editable-property">
+    <div className="group/prop grid min-h-7 min-w-0 grid-cols-2 items-center gap-2 rounded px-1.5 outline-none transition-colors hover:bg-muted focus:bg-muted focus:ring-1 focus:ring-primary" tabIndex={0} onKeyDown={handleKeyDown} data-testid="editable-property">
       <span className="flex min-w-0 items-center gap-1 text-[12px] text-muted-foreground">
         <span className="truncate">{toSentenceCase(propKey)}</span>
         {onDelete && (
diff --git a/src/components/EditableValue.tsx b/src/components/EditableValue.tsx
index cf471e86..b17f77d3 100644
--- a/src/components/EditableValue.tsx
+++ b/src/components/EditableValue.tsx
@@ -66,7 +66,7 @@ export function UrlValue({
   return (
     <span className="group/url flex min-w-0 max-w-full items-center gap-1">
       <span
-        className="min-w-0 cursor-pointer truncate rounded-md px-2 py-1 text-right text-[12px] text-[var(--accent-blue)] underline decoration-[var(--accent-blue)]/40 transition-colors hover:decoration-[var(--accent-blue)]"
+        className="inline-flex h-6 min-w-0 cursor-pointer items-center truncate rounded-md px-2 text-right text-[12px] text-[var(--accent-blue)] underline decoration-[var(--accent-blue)]/40 transition-colors hover:decoration-[var(--accent-blue)]"
         onClick={handleOpen}
         title={value}
         data-testid="url-link"
@@ -125,7 +125,7 @@ export function EditableValue({
 
   return (
     <span
-      className="min-w-0 max-w-full cursor-pointer truncate rounded-md px-2 py-1 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
+      className="inline-flex h-6 min-w-0 max-w-full cursor-pointer items-center truncate rounded-md px-2 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
       onClick={onStartEdit}
       title={value || 'Click to edit'}
     >
@@ -212,11 +212,11 @@ export function TagPillList({
         ) : (
           <span
             key={idx}
-            className="group/pill relative inline-flex cursor-pointer items-center rounded-md transition-colors"
+            className="group/pill relative inline-flex h-6 cursor-pointer items-center rounded-md transition-colors"
             style={{
               ...getTagStyle(item),
               backgroundColor: getTagStyle(item).bg,
-              padding: '4px 8px',
+              padding: '0 8px',
               fontSize: 12,
               fontWeight: 500,
             }}
@@ -255,8 +255,8 @@ export function TagPillList({
         />
       ) : (
         <button
-          className="inline-flex items-center justify-center rounded-md border-none bg-muted px-2 text-[12px] font-medium leading-none text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          style={{ padding: '4px 8px' }}
+          className="inline-flex h-6 items-center justify-center rounded-md border-none bg-muted px-2 text-[12px] font-medium leading-none text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          style={{ padding: '0 8px' }}
           onClick={() => setIsAddingNew(true)}
           title={`Add ${label.toLowerCase()}`}
         >
diff --git a/src/components/PropertyValueCells.tsx b/src/components/PropertyValueCells.tsx
index 2a34f317..4322e38d 100644
--- a/src/components/PropertyValueCells.tsx
+++ b/src/components/PropertyValueCells.tsx
@@ -42,7 +42,7 @@ function StatusValue({ propKey, value, isEditing, vaultStatuses, onSave, onStart
   return (
     <span className="relative inline-flex min-w-0 items-center">
       <span
-        className="inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium transition-opacity hover:opacity-80"
+        className="inline-flex h-6 cursor-pointer items-center gap-1.5 rounded-md px-2 text-[12px] font-medium transition-opacity hover:opacity-80"
         style={{ backgroundColor: style.bg, color: style.color }}
         onClick={() => onStartEdit(propKey)}
         data-testid="status-badge"
@@ -83,8 +83,8 @@ function TagsValue({ propKey, value, isEditing, vaultTags, onSave, onStartEdit }
         return (
           <span
             key={tag}
-            className="group/tag relative inline-flex items-center overflow-hidden rounded-md"
-            style={{ backgroundColor: style.bg, padding: '4px 8px', maxWidth: 120 }}
+            className="group/tag relative inline-flex h-6 items-center overflow-hidden rounded-md"
+            style={{ backgroundColor: style.bg, padding: '0 8px', maxWidth: 120 }}
           >
             <span
               className="transition-[max-width] duration-150 group-hover/tag:[mask-image:linear-gradient(to_right,black_60%,transparent_100%)]"
@@ -110,8 +110,8 @@ function TagsValue({ propKey, value, isEditing, vaultTags, onSave, onStartEdit }
         )
       })}
       <button
-        className="inline-flex shrink-0 items-center justify-center rounded-md border-none bg-muted text-[12px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-        style={{ padding: '4px 8px' }}
+        className="inline-flex h-6 shrink-0 items-center justify-center rounded-md border-none bg-muted text-[12px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        style={{ padding: '0 8px' }}
         onClick={() => onStartEdit(propKey)}
         title="Add tag"
         data-testid="tags-add-button"
@@ -130,7 +130,7 @@ function TagsValue({ propKey, value, isEditing, vaultTags, onSave, onStartEdit }
 
 function BooleanToggle({ value, onToggle }: { value: boolean; onToggle: () => void }) {
   return (
-    <label className="inline-flex cursor-pointer items-center gap-1.5" data-testid="boolean-toggle">
+    <label className="inline-flex h-6 cursor-pointer items-center gap-1.5" data-testid="boolean-toggle">
       <input
         type="checkbox"
         checked={value}
@@ -164,7 +164,7 @@ function DateValue({ value, onSave }: {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <button
-          className={`inline-flex min-w-0 cursor-pointer items-center gap-1 border-none px-2 py-1 text-right text-[12px] font-medium transition-colors hover:opacity-80${formatted ? ' rounded-md bg-muted text-accent-foreground' : ' bg-transparent text-muted-foreground'}`}
+          className={`inline-flex h-6 min-w-0 cursor-pointer items-center gap-1 border-none px-2 text-right text-[12px] font-medium transition-colors hover:opacity-80${formatted ? ' rounded-md bg-muted text-accent-foreground' : ' bg-transparent text-muted-foreground'}`}
           title={value}
           data-testid="date-display"
         >
diff --git a/src/components/TypeSelector.tsx b/src/components/TypeSelector.tsx
index 00748724..40bd6459 100644
--- a/src/components/TypeSelector.tsx
+++ b/src/components/TypeSelector.tsx
@@ -28,7 +28,7 @@ function ReadOnlyType({ isA, customColorKey, onNavigate }: { isA?: string | null
         {onNavigate ? (
           <button
             className="min-w-0 max-w-full truncate border-none cursor-pointer ring-inset hover:ring-1 hover:ring-current"
-            style={{ background: getTypeLightColor(isA, customColorKey), color: getTypeColor(isA, customColorKey), borderRadius: 6, padding: '2px 8px', fontSize: 12, fontWeight: 500 }}
+            style={{ background: getTypeLightColor(isA, customColorKey), color: getTypeColor(isA, customColorKey), borderRadius: 6, padding: '0 8px', fontSize: 12, fontWeight: 500, height: 24, display: 'inline-flex', alignItems: 'center' }}
             onClick={() => onNavigate(isA.toLowerCase())} title={isA}
           >{isA}</button>
         ) : (
@@ -68,7 +68,8 @@ export function TypeSelector({ isA, customColorKey, availableTypes, typeColorKey
               background: typeLightColor ?? undefined,
               color: typeColor ?? undefined,
               borderRadius: 6,
-              padding: '4px 8px',
+              padding: '0 8px',
+              height: 24,
               fontSize: 12,
               fontWeight: 500,
             }}