diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index e847efd..48a5b97 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -210,7 +210,7 @@ function renderWeekGrid(weekStart, selected, plans) {
         const hasMeals = dayHasAnyMeal(plans, day);
         cells.push(`
             <button type="button" data-planner-day="${day.getTime()}"
-                class="aspect-square flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors min-h-0 gap-0.5 py-1
+                class="flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight
                 ${isSel ? 'bg-gray-900 text-white' : 'text-gray-800 hover:bg-gray-100'}
                 ${isToday && !isSel ? 'ring-1 ring-inset ring-gray-900' : ''}">
                 <span>${day.getDate()}</span>
@@ -236,7 +236,7 @@ function renderMonthGrid(monthAnchor, selected, plans) {
         const hasMeals = inMonth && dayHasAnyMeal(plans, day);
         cells.push(`
             <button type="button" data-planner-day="${day.getTime()}"
-                class="aspect-square flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors min-h-0 gap-0.5 py-1
+                class="flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight
                 ${!inMonth ? 'text-gray-300' : (isSel ? 'bg-gray-900 text-white' : 'text-gray-800 hover:bg-gray-100')}
                 ${inMonth && isToday && !isSel ? 'ring-1 ring-inset ring-gray-900' : ''}">
                 <span>${day.getDate()}</span>