From 7d4089762e86455e0c9ea1490a0cb6f6f8f71ac2 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Sat, 21 Feb 2026 12:36:35 +0800
Subject: [PATCH] Fix upcoming widget row alignment with consistent priority
 column

The priority badge was conditionally rendered, causing rows without
priority to have fewer flex children and shifting the date/type columns.
Now always renders a fixed-width priority slot (invisible when empty).

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

diff --git a/frontend/src/components/dashboard/UpcomingWidget.tsx b/frontend/src/components/dashboard/UpcomingWidget.tsx
index 2ff16eb..41c3d95 100644
--- a/frontend/src/components/dashboard/UpcomingWidget.tsx
+++ b/frontend/src/components/dashboard/UpcomingWidget.tsx
@@ -56,16 +56,15 @@ export default function UpcomingWidget({ items, days = 7 }: UpcomingWidgetProps)
                     <span className={cn('text-[9px] font-semibold uppercase tracking-wider shrink-0 w-14 text-right', config.color)}>
                       {config.label}
                     </span>
-                    {item.priority && (
-                      <span className={cn(
-                        'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0',
-                        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>
-                    )}
+                    <span className={cn(
+                      'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0 w-10 text-center',
+                      item.priority === 'high' ? 'bg-red-500/10 text-red-400' :
+                      item.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-400' :
+                      item.priority === 'low' ? 'bg-green-500/10 text-green-400' :
+                      'invisible'
+                    )}>
+                      {item.priority || ''}
+                    </span>
                   </div>
                 );
               })}