From 8b6530c9013c4d0ccc49c4c1967606731ae79af3 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 11 Mar 2026 23:29:37 +0800
Subject: [PATCH] Fix hover jitter by overlaying actions instead of swapping
 content

The type pill, time label, and priority pill were being removed on
hover and replaced with action buttons, causing layout reflow and
visible jitter. Now the labels stay rendered (invisible when hovered
for todos/reminders) to hold their space, and action buttons are
absolutely positioned on top. Events show no actions so their labels
stay visible on hover. Zero layout shift.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/dashboard/UpcomingWidget.tsx   | 169 +++++++++---------
 1 file changed, 84 insertions(+), 85 deletions(-)

diff --git a/frontend/src/components/dashboard/UpcomingWidget.tsx b/frontend/src/components/dashboard/UpcomingWidget.tsx
index 7a18533..2d821ea 100644
--- a/frontend/src/components/dashboard/UpcomingWidget.tsx
+++ b/frontend/src/components/dashboard/UpcomingWidget.tsx
@@ -299,100 +299,99 @@ export default function UpcomingWidget({ items }: UpcomingWidgetProps) {
                                 </span>
                               )}
 
-                              {/* Inline quick actions (desktop hover) */}
-                              {isHovered && item.type === 'todo' && (
-                                <button
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    toggleTodo.mutate(item.id);
-                                  }}
-                                  className="p-1 rounded hover:bg-green-500/15 text-muted-foreground hover:text-green-400 transition-colors shrink-0"
-                                  title="Complete todo"
-                                >
-                                  <Check className="h-3.5 w-3.5" />
-                                </button>
-                              )}
+                              {/* Right side: static info + action overlay */}
+                              <div className="relative flex items-center gap-1.5 shrink-0">
+                                {/* Always-rendered labels (stable layout) */}
+                                <div className={cn('flex items-center gap-1.5', isHovered && (item.type === 'todo' || item.type === 'reminder') && 'invisible')}>
+                                  {timeLabel && (
+                                    <span className="text-xs text-muted-foreground shrink-0 whitespace-nowrap tabular-nums">
+                                      {timeLabel}
+                                    </span>
+                                  )}
+                                  <span className={cn(
+                                    'text-[9px] px-1.5 py-0.5 rounded font-medium shrink-0 hidden sm:inline-block',
+                                    config.pillBg,
+                                    config.pillText
+                                  )}>
+                                    {config.label}
+                                  </span>
+                                  {item.priority && item.priority !== 'none' && (
+                                    <span className={cn(
+                                      'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0 hidden sm:inline-block',
+                                      item.priority === 'high' ? 'bg-red-500/10 text-red-400' :
+                                      item.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-400' :
+                                      'bg-green-500/10 text-green-400'
+                                    )}>
+                                      {item.priority}
+                                    </span>
+                                  )}
+                                </div>
 
-                              {isHovered && item.type === 'reminder' && (
-                                <div className="flex items-center gap-0.5 shrink-0">
-                                  {/* Snooze button with dropdown */}
-                                  <div className="relative">
+                                {/* Action buttons overlaid in same space */}
+                                {isHovered && item.type === 'todo' && (
+                                  <div className="absolute inset-0 flex items-center justify-end">
                                     <button
                                       onClick={(e) => {
                                         e.stopPropagation();
-                                        setSnoozeOpen(snoozeOpen === itemKey ? null : itemKey);
+                                        toggleTodo.mutate(item.id);
                                       }}
-                                      className="p-1 rounded hover:bg-orange-500/15 text-muted-foreground hover:text-orange-400 transition-colors"
-                                      title="Snooze reminder"
+                                      className="p-1 rounded hover:bg-green-500/15 text-muted-foreground hover:text-green-400 transition-colors"
+                                      title="Complete todo"
                                     >
-                                      <Clock className="h-3.5 w-3.5" />
+                                      <Check className="h-3.5 w-3.5" />
                                     </button>
-                                    {snoozeOpen === itemKey && (
-                                      <div className="absolute right-0 bottom-full mb-1 w-28 rounded-md border bg-popover shadow-lg z-50 py-1 animate-fade-in">
-                                        <button
-                                          onClick={(e) => handleSnooze(item.id, 60, e)}
-                                          className="flex items-center w-full px-3 py-1.5 text-xs hover:bg-card-elevated transition-colors text-muted-foreground hover:text-foreground"
-                                        >
-                                          1 hour
-                                        </button>
-                                        <button
-                                          onClick={(e) => handleSnooze(item.id, 180, e)}
-                                          className="flex items-center w-full px-3 py-1.5 text-xs hover:bg-card-elevated transition-colors text-muted-foreground hover:text-foreground"
-                                        >
-                                          3 hours
-                                        </button>
-                                        <button
-                                          onClick={(e) => handleSnooze(item.id, getMinutesUntilTomorrowMorning(), e)}
-                                          className="flex items-center w-full px-3 py-1.5 text-xs hover:bg-card-elevated transition-colors text-muted-foreground hover:text-foreground"
-                                        >
-                                          Tomorrow
-                                        </button>
-                                      </div>
-                                    )}
                                   </div>
-                                  {/* Dismiss button */}
-                                  <button
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      dismissReminder.mutate(item.id);
-                                    }}
-                                    className="p-1 rounded hover:bg-red-500/15 text-muted-foreground hover:text-red-400 transition-colors"
-                                    title="Dismiss reminder"
-                                  >
-                                    <X className="h-3.5 w-3.5" />
-                                  </button>
-                                </div>
-                              )}
+                                )}
 
-                              {/* Time label */}
-                              {timeLabel && !isHovered && (
-                                <span className="text-xs text-muted-foreground shrink-0 whitespace-nowrap tabular-nums">
-                                  {timeLabel}
-                                </span>
-                              )}
-
-                              {/* Type pill */}
-                              {!isHovered && (
-                                <span className={cn(
-                                  'text-[9px] px-1.5 py-0.5 rounded font-medium shrink-0 hidden sm:block',
-                                  config.pillBg,
-                                  config.pillText
-                                )}>
-                                  {config.label}
-                                </span>
-                              )}
-
-                              {/* Priority pill (todos only) */}
-                              {!isHovered && item.priority && item.priority !== 'none' && (
-                                <span className={cn(
-                                  'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0 hidden sm:block',
-                                  item.priority === 'high' ? 'bg-red-500/10 text-red-400' :
-                                  item.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-400' :
-                                  'bg-green-500/10 text-green-400'
-                                )}>
-                                  {item.priority}
-                                </span>
-                              )}
+                                {isHovered && item.type === 'reminder' && (
+                                  <div className="absolute inset-0 flex items-center justify-end gap-0.5">
+                                    <div className="relative">
+                                      <button
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          setSnoozeOpen(snoozeOpen === itemKey ? null : itemKey);
+                                        }}
+                                        className="p-1 rounded hover:bg-orange-500/15 text-muted-foreground hover:text-orange-400 transition-colors"
+                                        title="Snooze reminder"
+                                      >
+                                        <Clock className="h-3.5 w-3.5" />
+                                      </button>
+                                      {snoozeOpen === itemKey && (
+                                        <div className="absolute right-0 bottom-full mb-1 w-28 rounded-md border bg-popover shadow-lg z-50 py-1 animate-fade-in">
+                                          <button
+                                            onClick={(e) => handleSnooze(item.id, 60, e)}
+                                            className="flex items-center w-full px-3 py-1.5 text-xs hover:bg-card-elevated transition-colors text-muted-foreground hover:text-foreground"
+                                          >
+                                            1 hour
+                                          </button>
+                                          <button
+                                            onClick={(e) => handleSnooze(item.id, 180, e)}
+                                            className="flex items-center w-full px-3 py-1.5 text-xs hover:bg-card-elevated transition-colors text-muted-foreground hover:text-foreground"
+                                          >
+                                            3 hours
+                                          </button>
+                                          <button
+                                            onClick={(e) => handleSnooze(item.id, getMinutesUntilTomorrowMorning(), e)}
+                                            className="flex items-center w-full px-3 py-1.5 text-xs hover:bg-card-elevated transition-colors text-muted-foreground hover:text-foreground"
+                                          >
+                                            Tomorrow
+                                          </button>
+                                        </div>
+                                      )}
+                                    </div>
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        dismissReminder.mutate(item.id);
+                                      }}
+                                      className="p-1 rounded hover:bg-red-500/15 text-muted-foreground hover:text-red-400 transition-colors"
+                                      title="Dismiss reminder"
+                                    >
+                                      <X className="h-3.5 w-3.5" />
+                                    </button>
+                                  </div>
+                                )}
+                              </div>
                             </div>
                           );
                         })}