From 397c956e87e0df765adef800366df12f46ff55ef Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 14:45:21 +0200
Subject: [PATCH] refactor: create highlight-header for timestamp positioning

- Add highlight-header container for timestamp
- Position header absolutely in top-right corner
- Remove padding-right workaround from highlight-content
- Use pointer-events to allow timestamp click while preventing header clicks
- Cleaner structure prevents any text overlap naturally
---
 src/components/HighlightItem.tsx | 16 +++++++++-------
 src/styles/layout/highlights.css |  6 ++++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index f70ad2b0..ca09e8a8 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -304,13 +304,15 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       onClick={handleItemClick}
       style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
     >
-      <CompactButton
-        className="highlight-timestamp"
-        title={new Date(highlight.created_at * 1000).toLocaleString()}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {formatDateCompact(highlight.created_at)}
-      </CompactButton>
+      <div className="highlight-header">
+        <CompactButton
+          className="highlight-timestamp"
+          title={new Date(highlight.created_at * 1000).toLocaleString()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {formatDateCompact(highlight.created_at)}
+        </CompactButton>
+      </div>
       
       <div className="highlight-quote-icon">
         <FontAwesomeIcon icon={faQuoteLeft} />
diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css
index e55e809f..fb59846e 100644
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -111,7 +111,9 @@
 .compact-button:disabled { opacity: 0.5; cursor: not-allowed; }
 .compact-button:disabled:hover { background: none; color: #888; transform: none; }
 
-.highlight-timestamp { position: absolute; top: 0.5rem; right: 0.75rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
+.highlight-header { position: absolute; top: 0; right: 0; padding: 0.5rem 0.75rem; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
+.highlight-header .compact-button { pointer-events: auto; }
+.highlight-timestamp { font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
 
 /* Level colors in sidebar items */
 .highlight-item.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent); }
@@ -134,7 +136,7 @@
 .highlight-item.level-friends .highlight-quote-icon { color: var(--highlight-color-friends, #f97316); }
 .highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); }
 
-.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; padding-right: 3.5rem; }
+.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
 .highlight-text { margin: 0; padding: 0; font-style: italic; color: #ddd; line-height: 1.6; border-left: none; font-size: 0.95rem; }
 .highlight-comment { margin-top: 0.5rem; padding: 0.75rem; background: rgba(100, 108, 255, 0.1); border-left: 3px solid #646cff; border-radius: 4px; font-size: 0.875rem; color: #ddd; line-height: 1.5; }