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

@@ -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} />