From eb1e5ee3feea159bc67e6003ce47c45675dc2811 Mon Sep 17 00:00:00 2001
From: Arnaud Nelissen <arnaud.nelissen@icloud.com>
Date: Mon, 15 Jun 2026 15:46:18 +0200
Subject: [PATCH] fix(ui): lift modal above tab bar, remove duplicate last
 activities
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modal container pb = 68px + safe-area-inset-bottom so footer always
  above the tab bar on mobile (was hidden behind it)
- Remove "Dernières activités" from dashboard (duplicates today's feed)
- Quick log grid goes full-width, 6 cols on sm+

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(app)/dashboard/page.tsx | 79 ++++++++++----------------------
 src/components/event-modal.tsx   |  2 +-
 2 files changed, 26 insertions(+), 55 deletions(-)

diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
index 312933f..370ca2d 100644
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -372,61 +372,32 @@ export default function DashboardPage() {
         })}
       </div>
 
-      <div className="grid md:grid-cols-2 gap-6">
-        {/* Last events */}
-        <div>
-          <h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">Dernières activités</h2>
-          <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden divide-y divide-slate-100 dark:divide-slate-700">
-            {(["BREASTFEED", "BOTTLE", "DIAPER_WET", "DIAPER_STOOL", "NAP"] as EventType[]).map((t) => {
-              const last = lastByType[t];
-              const cfg = EVENT_CONFIG[t];
-              return (
-                <div key={t} className="flex items-center gap-3 px-4 py-3">
-                  <div className={`w-8 h-8 rounded-lg ${cfg.bgClass} flex items-center justify-center flex-shrink-0`}>
-                    <EventIcon name={cfg.icon} className={`w-4 h-4 ${cfg.colorClass}`} />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="text-sm font-medium text-slate-700 dark:text-slate-200">{cfg.label}</div>
-                    {last && getEventSummary(last) && (
-                      <div className="text-xs text-slate-400 dark:text-slate-500 truncate">{getEventSummary(last)}</div>
-                    )}
-                  </div>
-                  <div className="text-xs text-slate-400 dark:text-slate-500 flex-shrink-0">
-                    {last ? formatTimeAgo(new Date(last.startedAt)) : "—"}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Quick log */}
-        <div className="space-y-4">
-          {QUICK_LOG_GROUPS.map((group) => (
-            <div key={group.label}>
-              <h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">{group.label}</h2>
-              <div className="grid grid-cols-4 gap-2">
-                {group.types.map((type) => {
-                  const cfg = EVENT_CONFIG[type];
-                  return (
-                    <button
-                      key={type}
-                      onClick={() => setActiveModal(type)}
-                      className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-indigo-200 dark:hover:border-indigo-700 hover:shadow-sm rounded-xl p-2.5 flex flex-col items-center gap-1.5 transition active:scale-95"
-                    >
-                      <div className={`w-9 h-9 rounded-lg ${cfg.bgClass} flex items-center justify-center`}>
-                        <EventIcon name={cfg.icon} className={`w-5 h-5 ${cfg.colorClass}`} />
-                      </div>
-                      <span className="text-[10px] font-medium text-slate-600 dark:text-slate-300 text-center leading-tight">
-                        {cfg.label}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
+      {/* Quick log */}
+      <div className="space-y-4">
+        {QUICK_LOG_GROUPS.map((group) => (
+          <div key={group.label}>
+            <h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">{group.label}</h2>
+            <div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
+              {group.types.map((type) => {
+                const cfg = EVENT_CONFIG[type];
+                return (
+                  <button
+                    key={type}
+                    onClick={() => setActiveModal(type)}
+                    className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-indigo-200 dark:hover:border-indigo-700 hover:shadow-sm rounded-xl p-2.5 flex flex-col items-center gap-1.5 transition active:scale-95"
+                  >
+                    <div className={`w-9 h-9 rounded-lg ${cfg.bgClass} flex items-center justify-center`}>
+                      <EventIcon name={cfg.icon} className={`w-5 h-5 ${cfg.colorClass}`} />
+                    </div>
+                    <span className="text-[10px] font-medium text-slate-600 dark:text-slate-300 text-center leading-tight">
+                      {cfg.label}
+                    </span>
+                  </button>
+                );
+              })}
             </div>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
 
       {/* Event templates */}
diff --git a/src/components/event-modal.tsx b/src/components/event-modal.tsx
index ce508a7..4100e7e 100644
--- a/src/components/event-modal.tsx
+++ b/src/components/event-modal.tsx
@@ -384,7 +384,7 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
   const segmentInactive = "border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:border-slate-300";
 
   return (
-    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center sm:p-4">
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center pb-[calc(68px_+_env(safe-area-inset-bottom,_0px))] sm:pb-4 sm:p-4">
       <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={onClose} />
 
       <div