From 87bce9d4ccafe3e98115e92fe5488e9e088436af Mon Sep 17 00:00:00 2001
From: Luca Rossi <luca.rossi.917@gmail.com>
Date: Sat, 28 Feb 2026 20:32:58 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20tags=20in=20properties=20=E2=80=94=20X?=
 =?UTF-8?q?=20button=20doesn't=20reserve=20space,=20fades=20in=20on=20hove?=
 =?UTF-8?q?r=20without=20expanding=20pill=20(#148)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: tags X button appears on hover without expanding pill width

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: tags in properties — X button doesn't reserve space, fades in on hover without expanding pill

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Test <test@test.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 src/components/DynamicPropertiesPanel.tsx | 30 +++++++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/DynamicPropertiesPanel.tsx b/src/components/DynamicPropertiesPanel.tsx
index 54c64d85..bfd11ac5 100644
--- a/src/components/DynamicPropertiesPanel.tsx
+++ b/src/components/DynamicPropertiesPanel.tsx
@@ -117,14 +117,34 @@ function TagsValue({ propKey, value, isEditing, vaultTags, onSave, onStartEdit }
       {value.map(tag => {
         const style = getTagStyle(tag)
         return (
-          <span key={tag} className="group/tag inline-flex items-center gap-0.5 rounded-full" style={{ backgroundColor: style.bg, padding: '1px 6px' }}>
-            <span style={{ color: style.color, fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing: '1.2px', textTransform: 'uppercase' }}>{tag}</span>
+          <span
+            key={tag}
+            className="group/tag relative inline-flex items-center overflow-hidden rounded-full"
+            style={{ backgroundColor: style.bg, padding: '1px 6px', maxWidth: 120 }}
+          >
+            <span
+              className="transition-[max-width] duration-150 group-hover/tag:[mask-image:linear-gradient(to_right,black_60%,transparent_100%)]"
+              style={{
+                color: style.color,
+                fontFamily: "'IBM Plex Mono', monospace",
+                fontSize: 10,
+                fontWeight: 600,
+                letterSpacing: '1.2px',
+                textTransform: 'uppercase' as const,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap' as const,
+              }}
+            >
+              {tag}
+            </span>
             <button
-              className="border-none bg-transparent p-0 leading-none opacity-0 transition-opacity group-hover/tag:opacity-100"
-              style={{ color: style.color, fontSize: 10 }}
+              className="ml-0.5 max-w-0 overflow-hidden border-none bg-transparent p-0 leading-none opacity-0 transition-all duration-150 group-hover/tag:max-w-[14px] group-hover/tag:opacity-100"
+              style={{ color: style.color, fontSize: 10, flexShrink: 0 }}
               onClick={() => handleRemove(tag)}
               title={`Remove ${tag}`}
-            >&times;</button>
+            >
+              &times;
+            </button>
           </span>
         )
       })}