style: update layout and styling across multiple components for improved UI consistency and responsiveness

app/[locale]/layout.tsx

@@ -156,7 +156,7 @@ export default async function RootLayout({ params, children }: RootLayoutProps)
             <NextTopLoader color="#FF5722" delay={100} showSpinner={false} />
 
             {/* Main Card Container */}
-            <div className="card w-full max-w-3xl min-h-[500px] max-h-[90vh] h-[80vh] bg-white dark:bg-[#232324] shadow-xl border border-base-200 dark:border-gray-800 flex flex-col justify-between overflow-hidden max-sm:rounded-none max-sm:h-full">
+            <div className="card w-full max-w-3xl min-h-[500px] max-h-[90vh] h-[80vh] bg-white dark:bg-[#232324] shadow-xl border border-base-200 dark:border-slate-700 flex flex-col justify-between overflow-hidden max-sm:rounded-none max-sm:h-full rounded-lg">
               <Header />
               <div className="flex-1 overflow-auto flex flex-col">{children}</div>
               <Footer />

app/[locale]/profile/page.tsx

@@ -27,7 +27,9 @@ export default function ProfilePage() {
   return (
     <div>
       {!sessions.length && <LocalAlert className="my-4" />}
-      <WorkoutSessionHeatmap until={until} values={values} />
+      <div className="px-2 sm:px-6 mt-4">
+        <WorkoutSessionHeatmap until={until} values={values} />
+      </div>
       <WorkoutSessionList />
       <div className="mt-8 flex justify-center">
         <Button onClick={() => router.push("/")} size="large">

src/features/layout/Header.tsx

@@ -25,7 +25,7 @@ export const Header = () => {
   };
 
   return (
-    <div className="navbar bg-base-100 dark:bg-black dark:text-gray-200 px-4 rounded-lg">
+    <div className="navbar bg-base-100 dark:bg-black dark:text-gray-200 px-4 rounded-tl-lg rounded-tr-lg">
       {/* Logo and Title */}
       <div className="navbar-start flex items-center gap-2">
         <Link

src/features/workout-builder/ui/exercise-list-item.tsx

@@ -74,7 +74,7 @@ export function ExerciseListItem({ exercise, muscle, onShuffle, onPick, onDelete
     >
       <div className="relative flex items-center justify-between py-2 px-2">
         {/* Section gauche - Infos principales */}
-        <div className="flex items-center gap-4 flex-1 min-w-0">
+        <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
           {/* Drag handle */}
           <GripVertical className="h-5 w-5 text-slate-400 dark:text-slate-500 cursor-grab active:cursor-grabbing" />
 
@@ -122,18 +122,16 @@ export function ExerciseListItem({ exercise, muscle, onShuffle, onPick, onDelete
         </div>
 
         {/* Section droite - Actions */}
-        <div className="flex items-center gap-2 shrink-0">
+        <div className="flex items-center gap-1 sm:gap-2 shrink-0">
           {/* Bouton shuffle */}
-          <Button onClick={() => onShuffle(exercise.id, muscle)} size="small" variant="outline">
+          <Button className="p-1 sm:p-2" onClick={() => onShuffle(exercise.id, muscle)} size="small" variant="outline">
             <Shuffle className="h-3.5 w-3.5" />
             <span className="hidden sm:inline">{t("workout_builder.exercise.shuffle")}</span>
           </Button>
 
           {/* Bouton pick */}
           <Button
-            className={
-              "bg-blue-50 dark:bg-blue-950/50 hover:bg-blue-100 dark:hover:bg-blue-950 text-blue-600 dark:text-blue-400 border-2 border-blue-200 dark:border-blue-800"
-            }
+            className="p-1 sm:p-2 bg-blue-50 dark:bg-blue-950/50 hover:bg-blue-100 dark:hover:bg-blue-950 text-blue-600 dark:text-blue-400 border-2 border-blue-200 dark:border-blue-800"
             onClick={() => onPick(exercise.id)}
             size="small"
           >
@@ -143,7 +141,7 @@ export function ExerciseListItem({ exercise, muscle, onShuffle, onPick, onDelete
 
           {/* Bouton delete */}
           <Button
-            className="h-9 w-9 bg-red-50 dark:bg-red-950/50 hover:bg-red-100 dark:hover:bg-red-950 text-red-600 dark:text-red-400 border-0 rounded-lg  group-hover:opacity-100 transition-all duration-200 hover:scale-110"
+            className="p-1 sm:p-2 bg-red-50 dark:bg-red-950/50 hover:bg-red-100 dark:hover:bg-red-950 text-red-600 dark:text-red-400 border-0 rounded-lg  group-hover:opacity-100 transition-all duration-200 hover:scale-110"
             onClick={() => onDelete(exercise.id, muscle)}
             size="small"
             variant="ghost"

src/features/workout-builder/ui/workout-stepper-footer.tsx

@@ -53,7 +53,7 @@ export function WorkoutBuilderFooter({
             variant="default"
           >
             <div className="flex items-center justify-center gap-2">
-              <span className="font-semibold">{isFinalStep ? "Commencer la séance" : t("workout_builder.navigation.continue")}</span>
+              <span className="font-semibold">{t("workout_builder.navigation.continue")}</span>
               <ArrowRight className="h-4 w-4" />
             </div>
           </Button>

src/features/workout-session/ui/workout-session-list.tsx

@@ -78,7 +78,7 @@ export function WorkoutSessionList() {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 px-2 sm:px-6">
       <h2 className="text-xl font-bold mt-5 mb-2 text-slate-900 dark:text-slate-200">
         {t("workout_builder.session.history", { count: sessions.length })}
       </h2>

src/features/workout-session/ui/workout-session-sets.tsx

@@ -84,7 +84,7 @@ export function WorkoutSessionSets({
   };
 
   return (
-    <div className="w-full max-w-3xl mx-auto pb-8 px-2 sm:px-6">
+    <div className="w-full max-w-3xl mx-auto pb-8 px-3 sm:px-6">
       <ol className="relative border-l-2 ml-2 border-slate-200 dark:border-slate-700">
         {session.exercises.map((ex, idx) => {
           const allSetsCompleted = ex.sets.length > 0 && ex.sets.every((set) => set.completed);