From 998de51bfa9fac58c5c700fd566745d3387b2c48 Mon Sep 17 00:00:00 2001
From: bryan <bryan.kouamo@institutsaintjean.org>
Date: Mon, 22 Jun 2026 20:35:13 +0100
Subject: [PATCH] Use session-first dashboard on desktop

---
 components/dashboard/dashboard-group-zone.tsx | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/components/dashboard/dashboard-group-zone.tsx b/components/dashboard/dashboard-group-zone.tsx
index 031eb65..5fb5b2a 100644
--- a/components/dashboard/dashboard-group-zone.tsx
+++ b/components/dashboard/dashboard-group-zone.tsx
@@ -373,7 +373,7 @@ export const DashboardGroupZone = memo(function DashboardGroupZone({
 
   return (
     <section className="v11-card px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
-      <div className="sm:hidden">
+      <div>
         <MobileSessionFirstDashboardZone
           locale={locale}
           selectedGroup={selectedGroup}
@@ -387,7 +387,7 @@ export const DashboardGroupZone = memo(function DashboardGroupZone({
         />
       </div>
 
-      <div className="hidden sm:block">
+      <div className="hidden">
         <div className="flex items-center justify-between gap-3">
           <div ref={groupMenuRef} className="relative min-w-0 flex-1">
             <button
@@ -809,7 +809,7 @@ export const DashboardGroupZone = memo(function DashboardGroupZone({
         ) : null}
       </div>
 
-      <div className="hidden sm:block">
+      <div className="hidden">
       <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
         <div className="flex min-w-0 flex-wrap items-center gap-3 sm:gap-4">
           <div ref={groupMenuRef} className="relative">
@@ -1491,65 +1491,65 @@ function MobileSessionFirstDashboardZone({
   }
 
   return (
-    <div className="space-y-3">
-      <section className="rounded-[15px] border border-white/[0.045] bg-[#071a18]/75 px-4 py-3">
+    <div className="space-y-3 sm:space-y-4">
+      <section className="rounded-[15px] border border-white/[0.045] bg-[#071a18]/75 px-4 py-3 sm:px-6 sm:py-5">
         <div className="flex items-center justify-between">
-          <h2 className="text-[13px] font-semibold text-[#d7e3df]">
+          <h2 className="text-[13px] font-semibold text-[#d7e3df] sm:text-[16px]">
             {locale === 'fr' ? 'Score de calibration' : 'Calibration score'}
           </h2>
           <a
             href={`/${locale}/dashboard/progression`}
-            className="text-[11px] font-semibold text-[#20D9A3]"
+            className="text-[11px] font-semibold text-[#20D9A3] sm:text-[13px]"
           >
             {locale === 'fr' ? 'Voir plus' : 'View more'}
           </a>
         </div>
-        <div className="mt-3 grid grid-cols-2 divide-x divide-white/[0.06]">
+        <div className="mt-3 grid grid-cols-2 divide-x divide-white/[0.06] sm:mt-4">
           <div className="pr-3 text-center">
-            <p className="text-[25px] font-semibold leading-none text-[#20D9A3]">
+            <p className="text-[25px] font-semibold leading-none text-[#20D9A3] sm:text-[34px]">
               {calibrationStats.trueMasteryPercent}%
             </p>
-            <p className="mt-1 text-[11px] text-[#8fa7a2]">
+            <p className="mt-1 text-[11px] text-[#8fa7a2] sm:text-[13px]">
               {labels.trueMastery}
             </p>
           </div>
           <div className="pl-3 text-center">
-            <p className="text-[25px] font-semibold leading-none text-[#9FF0CE]">
+            <p className="text-[25px] font-semibold leading-none text-[#9FF0CE] sm:text-[34px]">
               {calibrationStats.falseConfidencePercent}%
             </p>
-            <p className="mt-1 text-[11px] text-[#8fa7a2]">
+            <p className="mt-1 text-[11px] text-[#8fa7a2] sm:text-[13px]">
               {labels.falseConfidence}
             </p>
           </div>
         </div>
       </section>
 
-      <section className="relative rounded-[18px] border border-white/[0.045] bg-[#0b2a25] px-4 pb-5 pt-4 shadow-[0_18px_60px_rgba(0,0,0,0.2)]">
-        <h2 className="truncate text-[15px] font-semibold leading-none text-[#d7e3df]">
+      <section className="relative rounded-[18px] border border-white/[0.045] bg-[#0b2a25] px-4 pb-5 pt-4 shadow-[0_18px_60px_rgba(0,0,0,0.2)] sm:px-6 sm:pb-7 sm:pt-6">
+        <h2 className="truncate text-[15px] font-semibold leading-none text-[#d7e3df] sm:text-[20px]">
           {selectedGroup.name}
         </h2>
 
-        <div className="mt-3 space-y-2.5">
+        <div className="mt-3 space-y-2.5 sm:mt-4 sm:pr-[72px]">
           <a
             href={primaryHref}
-            className="grid min-h-[58px] grid-cols-[104px_minmax(0,1fr)_42px] items-center gap-2 rounded-[13px] border border-white/[0.055] bg-white/[0.018] px-2.5 py-2"
+            className="grid min-h-[58px] grid-cols-[104px_minmax(0,1fr)_42px] items-center gap-2 rounded-[13px] border border-white/[0.055] bg-white/[0.018] px-2.5 py-2 sm:min-h-[76px] sm:grid-cols-[132px_minmax(0,1fr)_56px] sm:px-4 sm:py-3"
           >
             <span className="flex min-w-0 items-center">
               <CompactAvatarStack members={selectedMembers?.slice(0, 3)} />
             </span>
             <span className="min-w-0">
-              <span className="block truncate text-[13px] font-semibold text-[#e8f4f0]">
+              <span className="block truncate text-[13px] font-semibold text-[#e8f4f0] sm:text-[17px]">
                 {primarySession?.name ?? labels.noUpcomingSession}
               </span>
-              <span className="mt-0.5 block truncate text-[10px] text-[#8fa7a2]">
+              <span className="mt-0.5 block truncate text-[10px] text-[#8fa7a2] sm:text-[13px]">
                 {primarySession
                   ? getCompactSessionMeta(primarySession)
                   : `${selectedGroup.memberCount} ${labels.members}`}
               </span>
             </span>
             <span className="flex flex-col items-center justify-center">
-              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#20D9A3] text-[#062b22] shadow-[0_0_18px_rgba(32,217,163,0.25)]">
-                <Play className="h-4 w-4 fill-current" aria-hidden="true" />
+              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#20D9A3] text-[#062b22] shadow-[0_0_18px_rgba(32,217,163,0.25)] sm:h-11 sm:w-11">
+                <Play className="h-4 w-4 fill-current sm:h-5 sm:w-5" aria-hidden="true" />
               </span>
             </span>
           </a>
@@ -1565,7 +1565,7 @@ function MobileSessionFirstDashboardZone({
                 }),
               );
             }}
-            className="grid min-h-[58px] w-full grid-cols-[104px_minmax(0,1fr)_72px] items-center gap-2 rounded-[13px] border border-white/[0.035] bg-white/[0.012] px-2.5 py-2 pr-12 text-left transition disabled:opacity-70"
+            className="grid min-h-[58px] w-full grid-cols-[104px_minmax(0,1fr)_72px] items-center gap-2 rounded-[13px] border border-white/[0.035] bg-white/[0.012] px-2.5 py-2 pr-12 text-left transition disabled:opacity-70 sm:min-h-[76px] sm:grid-cols-[132px_minmax(0,1fr)_150px] sm:px-4 sm:py-3 sm:pr-4"
           >
             <span className="flex items-center gap-1">
               <PlaceholderAvatar />
@@ -1573,16 +1573,16 @@ function MobileSessionFirstDashboardZone({
               <PlaceholderAvatar />
             </span>
             <span className="min-w-0">
-              <span className="block truncate text-[13px] font-semibold text-[#e8f4f0]">
+              <span className="block truncate text-[13px] font-semibold text-[#e8f4f0] sm:text-[17px]">
                 {secondarySession?.name ?? labels.scheduleSession}
               </span>
-              <span className="block truncate text-[10px] text-[#8fa7a2]">
+              <span className="block truncate text-[10px] text-[#8fa7a2] sm:text-[13px]">
                 {secondarySession
                   ? `${secondarySession.question_goal}Q · ${secondarySession.timer_seconds}sec`
                   : `20Q · ${labels.timerLabel.replace('{seconds}', '90')}`}
               </span>
             </span>
-            <span className="truncate text-right text-[10px] font-semibold text-[#8fa7a2]">
+            <span className="truncate text-right text-[10px] font-semibold text-[#8fa7a2] sm:text-[13px]">
               {secondarySession
                 ? formatSessionDate(secondarySession.scheduled_at, locale)
                 : labels.scheduledFor.replace('{date}', '')}
@@ -1601,7 +1601,7 @@ function MobileSessionFirstDashboardZone({
               }),
             );
           }}
-          className={`absolute bottom-4 right-4 flex h-[52px] w-[52px] items-center justify-center rounded-full border text-[#9FF0CE] shadow-[0_18px_44px_rgba(0,0,0,0.35)] transition ${
+          className={`absolute bottom-4 right-4 flex h-[52px] w-[52px] items-center justify-center rounded-full border text-[#9FF0CE] shadow-[0_18px_44px_rgba(0,0,0,0.35)] transition sm:bottom-7 sm:right-6 sm:h-14 sm:w-14 ${
             canOpenSessionPlanner
               ? 'border-[#20D9A3]/30 bg-[#0d3a34] hover:bg-[#114940]'
               : 'cursor-not-allowed border-white/[0.06] bg-white/[0.04] text-[#5f7b75]'