added username and modified style to compatibiliti with the name

app/(private)/layout.tsx

@@ -1,7 +1,5 @@
 import { ReactNode } from "react";
-import BarNavigation from "../Components/layout/BarNavigation/BarNavigation";
 import Logout from "../Components/auth/Logout/Logout";
-
 export default async function PrivateLayout({
   children,
 }: {

app/Components/ActivosMantenimiento/MesasDisponibles.tsx

@@ -34,6 +34,7 @@ export default function MesasDisponibles() {
         style={{
           overflow: "auto",
           height: "430px",
+          width:"100%",
           scrollbarColor: "#2563eb white",
         }}
       >

app/Components/auth/Logout/Logout.css

@@ -1,6 +1,5 @@
 .button-logout {
   background-color: #d32f2f;
-  position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
@@ -11,6 +10,22 @@
   background-color: #d12020;
 }
 
+.session{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.userName{
+  background-color: white;
+  border-radius: 6px;
+  padding: 6px 12px;
+  z-index: 1;
+}
+
 @media (max-width: 800px) {
   .button-logout {
     color: transparent;
@@ -41,4 +56,10 @@
     top: 50%;
     transform: translate(0, -50%);
   }
+
+  .userName{
+    position: absolute;
+    top: 50px;
+    right: 0px;
+  }
 }

app/Components/auth/Logout/Logout.tsx

@@ -2,11 +2,17 @@
 
 import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 
 import "./Logout.css";
 
 export default function Logout() {
   const router = useRouter();
+  const [userName, setUserName] = useState<string | null>(null);
+
+  useEffect(() => {
+    setUserName(Cookies.get("user") ?? null);
+  }, []);
 
   const handleLogout = () => {
     Cookies.remove("token", { path: "/" });
@@ -15,15 +21,14 @@ export default function Logout() {
 
     router.push("/");
     router.refresh();
-
   };
 
   return (
-    <>
-      <h4></h4>
+    <section className="session">
+      {userName && <h2 className="userName">{userName}</h2>}
       <button onClick={handleLogout} className="button button-logout">
         Cerrar sesión
       </button>
-    </>
+    </section>
   );
 }

app/globals.css

@@ -89,7 +89,6 @@ footer p {
   overflow: hidden;
   background-color: #f9f9f9;
   z-index: 0;
-  animation: fadeInUp 1s ease forwards;
 }
 
 .containerSection {
@@ -375,6 +374,7 @@ a {
   top: 0;
   left: 0;
   width: 100%;
+  min-height: 45px;
   font-size: 2.5rem;
   font-weight: bold;
   text-align: start;
@@ -404,7 +404,6 @@ form {
 .toggleSection {
   width: 100%;
   max-width: 750px;
-  margin-top: 1rem;
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -660,7 +659,7 @@ table td:last-child {
   }
 
   .containerSection {
-    align-items: center;
+    align-items: start;
     scrollbar-width: none;
   }
 
@@ -690,6 +689,11 @@ table td:last-child {
   .toggleButton {
     padding: 0;
   }
+
+  .toggleSection {
+    margin-top: 2rem;
+  }
+
 }
 
 @media (max-height: 960px) {
@@ -700,8 +704,10 @@ table td:last-child {
 
 @media (max-width: 450px) {
   .title {
-    text-align: center;
     max-width: 250px;
     overflow-wrap: break-word;
+    font-size: 2.2rem;
+    min-height: 50px;
+    align-items: center;
   }
 }