refactor: icon-grid reschedule UI with tighter labels

Author: nabil-boutaleb-sf

src/components/TaskDetailModal.tsx

@@ -163,14 +163,14 @@ export function TaskDetailModal({ isOpen, onClose, task, onUpdate, onDelete, pro
     };
 
     const RESCHEDULE_OPTIONS = [
-        { label: 'Tomorrow', icon: Sunrise, date: () => offsetDate(1) },
-        { label: 'In 3 days', icon: CalendarPlus, date: () => offsetDate(3) },
+        { label: 'Tmrw', icon: Sunrise, date: () => offsetDate(1) },
+        { label: '+3', icon: CalendarPlus, date: () => offsetDate(3) },
         { label: 'This Sat', icon: Sofa, date: getThisSaturday },
         { label: 'Next Mon', icon: Briefcase, date: getNextMonday },
         { label: 'Next Sat', icon: Tent, date: getNextSaturday },
-        { label: 'In 15 days', icon: CalendarPlus, date: () => offsetDate(15) },
-        { label: 'Next month', icon: CalendarFold, date: getNextMonthFirst },
-        { label: 'In 30 days', icon: CalendarPlus, date: () => offsetDate(30) },
+        { label: '+15', icon: CalendarPlus, date: () => offsetDate(15) },
+        { label: 'Next Mo.', icon: CalendarFold, date: getNextMonthFirst },
+        { label: '+30', icon: CalendarPlus, date: () => offsetDate(30) },
     ];
 
     // Tag management
@@ -282,15 +282,15 @@ export function TaskDetailModal({ isOpen, onClose, task, onUpdate, onDelete, pro
                     {/* Quick Reschedule */}
                     <div className="mb-4">
                         <label className="block text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-2">Reschedule</label>
-                        <div className="flex flex-wrap gap-2">
+                        <div className="grid grid-cols-8 gap-1.5">
                             {RESCHEDULE_OPTIONS.map(({ label, icon: Icon, date }) => (
                                 <button
                                     key={label}
                                     onClick={() => handleQuickReschedule(date())}
-                                    className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                    className="flex flex-col items-center gap-1.5 py-2.5 px-1 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                                 >
-                                    <Icon size={12} />
-                                    {label}
+                                    <Icon size={20} />
+                                    <span className="text-[10px] font-medium leading-tight text-center">{label}</span>
                                 </button>
                             ))}
                         </div>