test

frontend/src/pages/TimeClockPage.jsx

@@ -13,6 +13,7 @@ import {
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+
 import {
   Alert,
   AlertDescription,
@@ -60,9 +61,11 @@ const getTodayValue = () => {
   const date = new Date();
 
   const year = date.getFullYear();
+
   const month = String(
     date.getMonth() + 1,
   ).padStart(2, '0');
+
   const day = String(
     date.getDate(),
   ).padStart(2, '0');
@@ -462,23 +465,14 @@ const TimePicker = ({
     const touch = event.touches[0];
     const currentY = touch.clientY;
 
-    // Distance parcourue depuis le dernier mouvement
     const deltaY =
       touchState.current.lastY - currentY;
 
     touchState.current.lastY = currentY;
 
-    // On accumule le déplacement
     touchState.current.accumulated +=
       deltaY;
 
-    /*
-     * Distance nécessaire pour changer
-     * d'une unité.
-     *
-     * Plus petit = plus sensible
-     * Plus grand = plus lent
-     */
     const pixelsPerUnit = 18;
 
     const steps = Math.trunc(
@@ -490,7 +484,6 @@ const TimePicker = ({
       return;
     }
 
-    // On retire uniquement les unités déjà consommées
     touchState.current.accumulated -=
       steps * pixelsPerUnit;
 
@@ -556,7 +549,6 @@ const TimePicker = ({
         </div>
 
         <div className="relative flex h-[144px] gap-2 overflow-hidden">
-          {/* Sélection centrale */}
           <div className="pointer-events-none absolute inset-x-0 top-1/2 z-10 h-9 -translate-y-1/2 rounded-md border bg-muted/50" />
 
           {/* HEURES */}
@@ -680,6 +672,7 @@ const TimePicker = ({
   );
 };
 
+
 /* =========================================================
    PAGE
 ========================================================= */
@@ -2461,16 +2454,20 @@ const TimeClockPage = () => {
     getScanConflictConfig();
 
   return (
-    <Card className="flex h-full min-h-0 w-full flex-col overflow-visible">
+    <Card className="page-container page-layout flex h-full min-h-0 w-full flex-col overflow-hidden">
 
-      <CardHeader className="border-b">
+      <CardHeader className="shrink-0 border-b">
         <CardTitle>
           Pointage
         </CardTitle>
       </CardHeader>
 
 
-      <CardContent className="flex min-h-0 flex-1 flex-col overflow-visible lg:overflow-hidden">
+      {/* IMPORTANT :
+          flex + flex-col + min-h-0 permettent à la grille
+          de récupérer la hauteur restante sur desktop.
+          Mobile garde le scroll global. */}
+      <CardContent className="flex min-h-0 flex-1 flex-col overflow-y-auto lg:overflow-hidden">
 
         {/* =========================
             ALERTES
@@ -2479,7 +2476,7 @@ const TimeClockPage = () => {
         {error && (
           <Alert
             variant="destructive"
-            className="mb-4"
+            className="mb-4 shrink-0"
           >
             <AlertDescription>
               {error}
@@ -2489,7 +2486,7 @@ const TimeClockPage = () => {
 
 
         {cameraPermissionError && (
-          <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center">
+          <div className="mb-4 flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
             <Button
               type="button"
               variant="secondary"
@@ -2515,7 +2512,7 @@ const TimeClockPage = () => {
         {scanMessage && (
           <Alert
             variant="success"
-            className="mb-4"
+            className="mb-4 shrink-0"
           >
             <AlertDescription>
               {scanMessage}
@@ -2661,7 +2658,7 @@ const TimeClockPage = () => {
               startScanner
             }
             variant="default"
-            className="mb-6 w-full lg:hidden"
+            className="mb-6 w-full shrink-0 lg:hidden"
           >
             Pointer
           </Button>
@@ -2711,13 +2708,13 @@ const TimeClockPage = () => {
             GESTION + HISTORIQUE
         ====================================================== */}
 
-        <div className="grid w-full min-h-0 grid-cols-1 gap-6 overflow-visible lg:flex-1 lg:grid-cols-2 lg:overflow-hidden">
+        <div className="grid w-full min-h-0 grid-cols-1 gap-6 lg:flex-1 lg:grid-cols-2">
 
           {/* =================================================
               COLONNE GAUCHE
           ================================================== */}
 
-          <div className="flex min-w-0 flex-col lg:h-full">
+          <div className="flex min-w-0 flex-col lg:h-full lg:min-h-0">
 
             {isAdmin && (
               <Card className="lg:h-full">
@@ -3176,9 +3173,9 @@ const TimeClockPage = () => {
               HISTORIQUE
           ================================================== */}
 
-          <div className="flex min-w-0 min-h-0 flex-col lg:h-full">
+          <div className="flex min-w-0 flex-col lg:h-full lg:min-h-0">
 
-            <Card className="flex h-auto max-h-[60vh] min-h-0 flex-col overflow-hidden lg:h-full lg:max-h-none">
+            <Card className="flex h-auto min-h-0 flex-col overflow-hidden lg:h-full lg:flex-1">
 
               <CardHeader className="shrink-0 border-b">
                 <CardTitle>
@@ -3191,7 +3188,11 @@ const TimeClockPage = () => {
               </CardHeader>
 
 
-              <CardContent className="min-h-0 flex-1 overflow-y-auto">
+              {/* DESKTOP : SEUL CETTE ZONE SCROLLE
+                  MOBILE : LE SCROLL EST GÉRÉ PAR LE CARD
+                  PRINCIPAL */}
+
+              <CardContent className="min-h-0 flex-1 overflow-visible lg:overflow-y-auto">
 
                 {loading ? (
                   <p>
@@ -3373,7 +3374,7 @@ const TimeClockPage = () => {
                                               )} au ${formatDate(
                                                 entry.end_date,
                                               )} ?`
-                                            : 'Êtes-vous sûr de vouloir supprimer ce pointage ?'
+                                            : 'Êtes-vous sûr de vouloir supprimer le pointage ?'
                                         }
                                         onConfirm={() =>
                                           handleDeleteEntry(
@@ -3422,5 +3423,4 @@ const TimeClockPage = () => {
   );
 };
 
-
 export default TimeClockPage;