From fe79e6131eefcd07fb3de3528f171988df105ac2 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 28 Feb 2026 10:50:54 +0100
Subject: [PATCH] fix: relationship item input height consistency + X button
 overlay on hover

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InspectorPanels.tsx | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/InspectorPanels.tsx b/src/components/InspectorPanels.tsx
index 8dfe4035..303d00f4 100644
--- a/src/components/InspectorPanels.tsx
+++ b/src/components/InspectorPanels.tsx
@@ -2,7 +2,7 @@ import { useMemo, useCallback, useState, useRef } from 'react'
 import type { ComponentType, SVGAttributes } from 'react'
 import { wikilinkTarget, wikilinkDisplay } from '../utils/wikilink'
 import type { VaultEntry, GitCommit } from '../types'
-import { Trash, X, Plus } from '@phosphor-icons/react'
+import { Trash, X } from '@phosphor-icons/react'
 import type { ParsedFrontmatter } from '../utils/frontmatter'
 import { RELATIONSHIP_KEYS, containsWikilinks } from './DynamicPropertiesPanel'
 import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
@@ -48,9 +48,9 @@ function LinkButton({ label, typeColor, bgColor, isArchived, isTrashed, onClick,
   const isDimmed = isArchived || isTrashed
   const color = isDimmed ? 'var(--muted-foreground)' : typeColor
   return (
-    <div className="group/link flex items-center gap-1">
+    <div className="group/link relative flex items-center">
       <button
-        className="flex flex-1 items-center justify-between gap-2 border-none text-left cursor-pointer hover:opacity-80 min-w-0"
+        className="flex w-full items-center justify-between gap-2 border-none text-left cursor-pointer hover:opacity-80 min-w-0"
         style={{
           background: isDimmed ? 'var(--muted)' : (bgColor ?? 'transparent'),
           color, borderRadius: 6, padding: bgColor ? '6px 10px' : '4px 0',
@@ -68,7 +68,7 @@ function LinkButton({ label, typeColor, bgColor, isArchived, isTrashed, onClick,
       </button>
       {onRemove && (
         <button
-          className="shrink-0 border-none bg-transparent p-0.5 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover/link:opacity-100"
+          className="absolute right-1 top-1/2 -translate-y-1/2 border-none bg-transparent p-0.5 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover/link:opacity-100"
           onClick={onRemove}
           title="Remove from relation"
           data-testid="remove-relation-ref"
@@ -149,25 +149,24 @@ function InlineAddNote({ entries, onAdd }: {
   if (!active) {
     return (
       <button
-        className="mt-1 flex items-center gap-1 border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:text-foreground"
-        style={{ fontSize: 11 }}
+        className="mt-1 w-full border border-dashed border-border bg-transparent text-left text-muted-foreground cursor-pointer hover:border-foreground hover:text-foreground"
+        style={{ borderRadius: 6, padding: '6px 10px', fontSize: 12 }}
         onClick={() => setActive(true)}
         data-testid="add-relation-ref"
       >
-        <Plus size={10} />
-        <span>Add</span>
+        Add
       </button>
     )
   }
 
   return (
     <div className="relative mt-1">
-      <div className="flex items-center gap-1">
+      <div className="group/add relative flex items-center">
         <input
           ref={inputRef}
           autoFocus
-          className="flex-1 border border-border bg-transparent px-2 py-0.5 text-xs text-foreground"
-          style={{ borderRadius: 4, outline: 'none', minWidth: 0 }}
+          className="w-full border border-border bg-transparent text-foreground"
+          style={{ borderRadius: 6, outline: 'none', minWidth: 0, padding: '6px 10px', fontSize: 12 }}
           placeholder="Note title"
           value={query}
           onChange={e => setQuery(e.target.value)}
@@ -175,14 +174,7 @@ function InlineAddNote({ entries, onAdd }: {
           data-testid="add-relation-ref-input"
         />
         <button
-          className="shrink-0 border-none bg-transparent p-0.5 text-muted-foreground hover:text-foreground"
-          onClick={handleConfirm}
-          disabled={!query.trim()}
-        >
-          <Plus size={12} />
-        </button>
-        <button
-          className="shrink-0 border-none bg-transparent p-0.5 text-muted-foreground hover:text-foreground"
+          className="absolute right-1 top-1/2 -translate-y-1/2 border-none bg-transparent p-0.5 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/add:opacity-100"
           onClick={() => { setQuery(''); setActive(false) }}
         >
           <X size={12} />