From f6b99975ab10b1f1b10061966d64d3d4af4aefed Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Mon, 30 Mar 2026 23:36:55 +0200
Subject: [PATCH] fix: unify property panel chip sizes and ellipse long text
 values

Match all property value chips (Status, Date, Tags) to the Type chip's
padding (4px 8px) and border-radius (rounded-md). Fix URL and text values
to use consistent padding and constrain overflow with max-w-full + truncate.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/EditableValue.tsx      | 10 +++++-----
 src/components/PropertyValueCells.tsx |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/EditableValue.tsx b/src/components/EditableValue.tsx
index edaf66b5..cf471e86 100644
--- a/src/components/EditableValue.tsx
+++ b/src/components/EditableValue.tsx
@@ -64,9 +64,9 @@ export function UrlValue({
   }
 
   return (
-    <span className="group/url inline-flex min-w-0 items-center gap-1">
+    <span className="group/url flex min-w-0 max-w-full items-center gap-1">
       <span
-        className="min-w-0 cursor-pointer truncate rounded px-1 py-0.5 text-right text-[12px] text-[var(--accent-blue)] underline decoration-[var(--accent-blue)]/40 transition-colors hover:decoration-[var(--accent-blue)]"
+        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)]"
         onClick={handleOpen}
         title={value}
         data-testid="url-link"
@@ -125,7 +125,7 @@ export function EditableValue({
 
   return (
     <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 max-w-full cursor-pointer truncate rounded-md px-2 py-1 text-right text-[12px] text-secondary-foreground transition-colors hover:bg-muted"
       onClick={onStartEdit}
       title={value || 'Click to edit'}
     >
@@ -216,7 +216,7 @@ export function TagPillList({
             style={{
               ...getTagStyle(item),
               backgroundColor: getTagStyle(item).bg,
-              padding: '2px 8px',
+              padding: '4px 8px',
               fontSize: 12,
               fontWeight: 500,
             }}
@@ -256,7 +256,7 @@ 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: '2px 8px' }}
+          style={{ padding: '4px 8px' }}
           onClick={() => setIsAddingNew(true)}
           title={`Add ${label.toLowerCase()}`}
         >
diff --git a/src/components/PropertyValueCells.tsx b/src/components/PropertyValueCells.tsx
index ff9c8731..2a34f317 100644
--- a/src/components/PropertyValueCells.tsx
+++ b/src/components/PropertyValueCells.tsx
@@ -84,7 +84,7 @@ function TagsValue({ propKey, value, isEditing, vaultTags, onSave, onStartEdit }
           <span
             key={tag}
             className="group/tag relative inline-flex items-center overflow-hidden rounded-md"
-            style={{ backgroundColor: style.bg, padding: '2px 8px', maxWidth: 120 }}
+            style={{ backgroundColor: style.bg, padding: '4px 8px', maxWidth: 120 }}
           >
             <span
               className="transition-[max-width] duration-150 group-hover/tag:[mask-image:linear-gradient(to_right,black_60%,transparent_100%)]"
@@ -111,7 +111,7 @@ 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: '2px 8px' }}
+        style={{ padding: '4px 8px' }}
         onClick={() => onStartEdit(propKey)}
         title="Add tag"
         data-testid="tags-add-button"