style: update various components to improve layout and styling consistency across the application, including adjustments to padding, margins, and tooltip positioning for better user experience

app/[locale]/layout.tsx

@@ -158,7 +158,7 @@ export default async function RootLayout({ params, children }: RootLayoutProps)
             {/* 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">
               <Header />
-              <div className="flex-1 overflow-auto px-2 sm:px-6 flex flex-col">{children}</div>
+              <div className="flex-1 overflow-auto flex flex-col">{children}</div>
               <Footer />
             </div>
 

app/[locale]/page.tsx

@@ -7,7 +7,7 @@ export default async function HomePage() {
   // const t = await getI18n();
 
   return (
-    <div className="bg-background text-foreground relative flex h-fit flex-col">
+    <div className="bg-background text-foreground relative flex h-fit flex-col h-full">
       <WorkoutStepper />
     </div>
   );

src/features/layout/Footer.tsx

@@ -2,6 +2,7 @@ import { Github, Mail, Twitter } from "lucide-react";
 
 import { getI18n } from "locales/server";
 import { TFunction } from "locales/client";
+import { cn } from "@/shared/lib/utils";
 import { Link } from "@/components/ui/link";
 
 const SOCIAL_LINKS = [
@@ -25,15 +26,15 @@ const SOCIAL_LINKS = [
 const NAVIGATION = (t: TFunction) => [
   { name: t("commons.donate"), href: "https://ko-fi.com/workoutcool" },
   { name: t("commons.about"), href: "/about" },
-  { name: t("commons.privacy"), href: "/legal/privacy" },
+  { name: t("commons.privacy"), href: "/legal/privacy", hideOnMobile: true },
 ];
 
 export const Footer = async () => {
   const t = await getI18n();
 
   return (
-    <footer className="border-t border-base-300 dark:border-gray-800 bg-base-100 dark:bg-black px-2 sm:px-6 py-4 rounded-b-lg">
-      <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
+    <footer className="border-t border-base-300 dark:border-gray-800 bg-base-100 dark:bg-black px-4 sm:px-6 py-4 rounded-b-lg">
+      <div className="flex  sm:flex-row justify-between items-center gap-4">
         {/* Social Icons */}
         <div className="flex gap-2">
           {SOCIAL_LINKS.map(({ href, icon: Icon, label }) => (
@@ -52,9 +53,12 @@ export const Footer = async () => {
 
         {/* Navigation Links */}
         <div className="flex sm:flex-row gap-2 sm:gap-4 text-center text-gray-700 dark:text-gray-300">
-          {NAVIGATION(t).map(({ name, href }) => (
+          {NAVIGATION(t).map(({ name, href, hideOnMobile }) => (
             <Link
-              className="hover:underline hover:text-blue-500 dark:hover:text-blue-400 text-xs sm:text-sm"
+              className={cn(
+                "hover:underline hover:text-blue-500 dark:hover:text-blue-400 text-xs sm:text-sm",
+                hideOnMobile && "hidden sm:block",
+              )}
               href={href}
               key={name}
               size="sm"

src/features/layout/Header.tsx

@@ -29,13 +29,13 @@ export const Header = () => {
       {/* Logo and Title */}
       <div className="navbar-start flex items-center gap-2">
         <Link
-          className="group flex items-center space-x-3 rounded-xl bg-gradient-to-r px-4 py-2 transition-all duration-200 dark:text-gray-200 dark:bg-gray-800"
+          className="group flex items-center space-x-3 rounded-xl bg-gradient-to-r px-2 sm:px-4 py-2 transition-all duration-200 dark:text-gray-200 dark:bg-gray-800"
           href="/"
         >
           <div className="relative flex-none">
             <Image
               alt="workout cool logo"
-              className="h-6 w-6 sm:h-8 sm:w-8 transition-transform duration-200 group-hover:rotate-[20deg] group-hover:scale-110"
+              className="h-10 w-10 sm:h-8 sm:w-8 transition-transform duration-200 group-hover:rotate-[20deg] group-hover:scale-110"
               height={32}
               src={Logo}
               width={32}
@@ -55,7 +55,7 @@ export const Header = () => {
           className="hover:bg-slate-200 dark:hover:bg-gray-800 rounded-full p-2 transition flex"
           href="/"
         >
-          <div className="tooltip" data-tip={t("commons.home")}>
+          <div className="tooltip tooltip-bottom" data-tip={t("commons.home")}>
             <Home className="w-6 h-6 text-blue-500 dark:text-blue-400" />
           </div>
         </Link>

src/features/release-notes/ui/release-notes-dialog.tsx

@@ -18,7 +18,7 @@ export function ReleaseNotesDialog() {
     <Dialog>
       <DialogTrigger asChild>
         <Button aria-label={t("release_notes.release_notes")} className="rounded-full hover:bg-slate-200" size="small" variant="ghost">
-          <div className="tooltip" data-tip={t("commons.changelog")}>
+          <div className="tooltip tooltip-bottom" data-tip={t("commons.changelog")}>
             <Bell className="text-blue-500 dark:text-blue-400 h-6 w-6" />
           </div>
         </Button>

src/features/theme/ThemeToggle.tsx

@@ -19,7 +19,7 @@ export function ThemeToggle() {
       onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
       variant="ghost"
     >
-      <div className="tooltip" data-tip={resolvedTheme === "light" ? "Dark mode" : "Light mode"}>
+      <div className="tooltip tooltip-bottom" data-tip={resolvedTheme === "light" ? "Dark mode" : "Light mode"}>
         {resolvedTheme === "light" ? (
           <MoonIcon className="text-blue-500 dark:text-blue-400" />
         ) : (

src/features/workout-builder/ui/equipment-selection.tsx

@@ -68,7 +68,7 @@ function EquipmentCard({ equipment, isSelected, onToggle }: EquipmentCardProps)
       )}
       onClick={onToggle}
     >
-      <CardContent className="p-4 h-auto flex flex-col justify-center items-center relative">
+      <CardContent className="p-2 sm:p-4 h-auto flex flex-col justify-center items-center relative">
         <div
           className={cn(
             "absolute top-3 left-3 w-2 h-2 rounded-full transition-colors duration-200",

src/features/workout-builder/ui/exercises-selection.tsx

@@ -4,8 +4,6 @@ import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-ki
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent } from "@dnd-kit/core";
 
-import { Button } from "@/components/ui/button";
-
 import { useWorkoutStepper } from "../model/use-workout-stepper";
 import { ExerciseListItem } from "./exercise-list-item";
 
@@ -117,16 +115,6 @@ export const ExercisesSelection = ({
               </div>
             </SortableContext>
           </DndContext>
-          <div className="flex items-center justify-center gap-4 mt-8">
-            <Button
-              className="px-8 bg-blue-600 hover:bg-blue-700"
-              disabled={flatExercises.length === 0}
-              onClick={handleStartWorkout}
-              size="large"
-            >
-              Start Workout
-            </Button>
-          </div>
         </div>
       ) : error ? (
         <div className="text-center py-20">

src/features/workout-builder/ui/muscles.module.css

@@ -6,7 +6,6 @@
 
 .illustration {
   width: 100%;
-  height: auto;
 }
 
 .illustration path {

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

@@ -91,7 +91,7 @@ function StepperStep({ description, isActive, isCompleted, stepNumber, title }:
 export function StepperHeader({ steps }: StepperHeaderProps) {
   const { resolvedTheme } = useTheme();
   return (
-    <div className={cn("w-full", resolvedTheme === "dark" ? "my-8" : "my-8")}>
+    <div className={cn("w-full my-8 px-2 sm:px-6")}>
       {/* Layout mobile - vertical */}
       <div className="flex flex-col space-y-6 md:hidden">
         {steps.map((step, index) => (

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

@@ -10,6 +10,7 @@ export function WorkoutBuilderFooter({
   canContinue,
   onPrevious,
   onNext,
+  onStartWorkout,
   selectedEquipment,
   selectedMuscles,
 }: {
@@ -18,6 +19,7 @@ export function WorkoutBuilderFooter({
   canContinue: boolean;
   onPrevious: VoidFunction;
   onNext: VoidFunction;
+  onStartWorkout?: VoidFunction;
   selectedEquipment: any[];
   selectedMuscles: any[];
 }) {
@@ -28,12 +30,12 @@ export function WorkoutBuilderFooter({
   return (
     <div className="w-full sticky bottom-0 z-10">
       {/* Mobile layout - vertical stack */}
-      <div className="flex flex-col gap-4 ">
+      <div className="flex flex-col gap-4 px-2 sm:px-6 pb-2">
         {/* Center stats on top for mobile */}
         <div className="flex items-center justify-center"></div>
 
         {/* Navigation buttons */}
-        <div className="flex items-center justify-between gap-3 bg-white w-full rounded-sm p-2">
+        <div className="min-h-12 flex items-center justify-between gap-3 bg-white w-full p-0.5 border border-slate-400 dark:border-slate-700 rounded-full">
           {/* Previous button */}
           <Button className="flex-1 rounded-full" disabled={isFirstStep} onClick={onPrevious} size="default" variant="ghost">
             <div className="flex items-center gap-2">
@@ -42,25 +44,21 @@ export function WorkoutBuilderFooter({
             </div>
           </Button>
 
-          {/* Next/Complete button */}
+          {/* Next/Start Workout button */}
           <Button
-            className="flex-1 rounded-full"
+            className="flex-1 rounded-full bg-blue-600 hover:bg-blue-700 min-h-12"
             disabled={!canContinue}
-            onClick={isFinalStep ? () => console.log("Complete workout!") : onNext}
+            onClick={isFinalStep ? () => onStartWorkout?.() : onNext}
             size="default"
             variant="default"
           >
             <div className="flex items-center justify-center gap-2">
-              <span className="font-semibold">
-                {isFinalStep ? t("workout_builder.navigation.complete") : t("workout_builder.navigation.continue")}
-              </span>
+              <span className="font-semibold">{isFinalStep ? "Commencer la séance" : t("workout_builder.navigation.continue")}</span>
               <ArrowRight className="h-4 w-4" />
             </div>
           </Button>
         </div>
       </div>
-
-      {/* Desktop layout - horizontal */}
     </div>
   );
 }

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

@@ -207,16 +207,17 @@ export function WorkoutStepper() {
   };
 
   return (
-    <div className="w-full max-w-6xl mx-auto">
+    <div className="w-full max-w-6xl mx-auto h-full">
       <StepperHeader steps={steps} />
 
-      <div className="">{renderStepContent()}</div>
+      <div className="px-2 sm:px-6">{renderStepContent()}</div>
 
       <WorkoutBuilderFooter
         canContinue={canContinue}
         currentStep={currentStep}
         onNext={nextStep}
         onPrevious={prevStep}
+        onStartWorkout={handleStartWorkout}
         selectedEquipment={selectedEquipment}
         selectedMuscles={selectedMuscles}
         totalSteps={STEPPER_STEPS.length}

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

@@ -52,8 +52,8 @@ export function WorkoutSessionHeader({
 
   return (
     <>
-      <div className="w-full mb-8">
-        <div className="rounded-xl p-3 bg-slate-50 dark:bg-slate-900/80">
+      <div className="w-full mt-4 mb-8 px-2 sm:px-6">
+        <div className="rounded-xl p-3 bg-slate-50 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-700">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-2">
               <div className="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></div>

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">
+    <div className="w-full max-w-3xl mx-auto pb-8 px-2 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);

src/widgets/language-selector/language-selector.tsx

@@ -24,7 +24,7 @@ export function LanguageSelector() {
 
   return (
     <div className="dropdown dropdown-end">
-      <div className="tooltip" data-tip={t("commons.change_language")}>
+      <div className="tooltip tooltip-bottom" data-tip={t("commons.change_language")}>
         <div
           className="btn btn-ghost btn-circle h-8 w-8 p-0 text-xl flex items-center justify-center hover:bg-slate-200 border-none dark:hover:bg-gray-800 rounded-full"
           role="button"