davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify property panel chip sizes and ellipse long text values

Browse Source 
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>
This commit is contained in:
lucaronin
2026-03-30 23:36:55 +02:00
parent 27ec739c8e
commit f6b99975ab
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/EditableValue.tsx
View File

@@ -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()}`}
>

4
src/components/PropertyValueCells.tsx
View File

@@ -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"