From 83f6a00307b7a88cd0a4b2393bbe3b5d61eba597 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Tue, 14 Oct 2025 14:27:03 -0600
Subject: [PATCH] modified styles tables

---
 app/(private)/AgregarTiempo/page.tsx          |   3 +-
 app/(private)/AsignacionEquipo/page.tsx       |   8 +-
 app/(private)/BitacoraSanciones/page.tsx      |   6 +
 app/(private)/Inscritos/page.tsx              |  47 ++++----
 .../ActivosMantenimiento/MesasDisponibles.tsx |   9 +-
 .../BitacoraSanciones/BitacoraAlumno.tsx      |  38 +++---
 .../BitacoraSanciones/BitacoraEquipo.tsx      |   4 +-
 .../BitacoraSanciones/BitacoraMesas.tsx       |   6 +-
 .../BitacoraSanciones/Sanciones.tsx           |  15 ++-
 .../BitacoraSanciones/TableSancion.tsx        | 111 +++++++-----------
 app/Components/Equipos/tableequipos.tsx       |   7 +-
 .../Global/SearchUser/SearchUserWithDate.tsx  |   2 +-
 app/Components/Global/Toggle/Toggle.tsx       |   6 +-
 .../QuitarSancion/QuitarSancion.tsx           |   8 +-
 app/Components/Reportes/porRecibo.tsx         |   4 +-
 app/Components/Reportes/porServicio.tsx       |   4 +-
 app/globals.css                               |  13 +-
 17 files changed, 135 insertions(+), 156 deletions(-)

diff --git a/app/(private)/AgregarTiempo/page.tsx b/app/(private)/AgregarTiempo/page.tsx
index df7fc96..ab80f55 100644
--- a/app/(private)/AgregarTiempo/page.tsx
+++ b/app/(private)/AgregarTiempo/page.tsx
@@ -6,6 +6,7 @@ import toast from "react-hot-toast";
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "./addTime.css";
+import Selection from "@/app/Components/Selection/Selection";
 
 export default async function Page(props: {
   searchParams?: Promise<{
@@ -38,7 +39,7 @@ export default async function Page(props: {
           <Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
 
           <div className="addTime">
-            <div className="groupInput" style={{ marginBottom: "1rem" }}></div>
+            <Selection />
             <Receipt numAcount={student.id_cuenta} />
           </div>
         </>
diff --git a/app/(private)/AsignacionEquipo/page.tsx b/app/(private)/AsignacionEquipo/page.tsx
index 700a708..a0a4659 100644
--- a/app/(private)/AsignacionEquipo/page.tsx
+++ b/app/(private)/AsignacionEquipo/page.tsx
@@ -10,7 +10,7 @@ import "@/app/globals.css";
 
 export default async function Page(props: {
   searchParams?: Promise<{
-    key?:string
+    key?: string;
     numAcount?: string;
     machine?: string;
   }>;
@@ -52,7 +52,7 @@ export default async function Page(props: {
                 {student && (
                   <>
                     <Information
-                      numerocuenta={student.id_cuenta}
+                      NoCuenta={student.id_cuenta}
                       nombre={student.nombre}
                     />
                     <Information
@@ -60,7 +60,7 @@ export default async function Page(props: {
                       tiempo={"9minutos"}
                       confirmo={"si/no"}
                     />
-                    {/* <div className="containerForm">
+                    <div className="containerForm">
                       <label style={{ marginTop: "1rem" }}>
                         Seleccionar tiempo
                       </label>
@@ -74,7 +74,7 @@ export default async function Page(props: {
                           Asignar Equipo
                         </button>
                       </div>
-                    </div> */}
+                    </div>
                   </>
                 )}
               </>
diff --git a/app/(private)/BitacoraSanciones/page.tsx b/app/(private)/BitacoraSanciones/page.tsx
index f0ed7ac..78cb26d 100644
--- a/app/(private)/BitacoraSanciones/page.tsx
+++ b/app/(private)/BitacoraSanciones/page.tsx
@@ -3,8 +3,10 @@ import BitacoraEquipo from "@/app/Components/BitacoraSanciones/BitacoraEquipo";
 import BitacoraMesas from "@/app/Components/BitacoraSanciones/BitacoraMesas";
 import Sanciones from "@/app/Components/BitacoraSanciones/Sanciones";
 import SearchUserWithDate from "@/app/Components/Global/SearchUser/SearchUserWithDate";
+import ShowError from "@/app/Components/Global/ShowError";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import { GetStudent } from "@/app/lib/getStudent";
+import { GetSancionByStudent } from "@/app/lib/getStudent copy";
 
 export default async function Page(props: {
   searchParams?: Promise<{
@@ -17,11 +19,13 @@ export default async function Page(props: {
   const numAcount = params?.numAcount ? params.numAcount : null;
 
   let student: any = null;
+  let errorMessage = "";
 
   if (numAcount) {
     const result = await GetStudent(parseInt(numAcount));
 
     if (result.error) {
+      errorMessage = `${result.error}`;
     } else {
       student = result;
     }
@@ -29,6 +33,8 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
+      {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
+
       <h2 className="title"> BITACORA Y SANCIONES </h2>
 
       <Toggle
diff --git a/app/(private)/Inscritos/page.tsx b/app/(private)/Inscritos/page.tsx
index 33e0605..517f288 100644
--- a/app/(private)/Inscritos/page.tsx
+++ b/app/(private)/Inscritos/page.tsx
@@ -1,4 +1,3 @@
-
 export default async function Page(props: {
   searchParams?: Promise<{
     period: string;
@@ -9,7 +8,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-
       <h2 className="title"> INSCRITOS </h2>
 
       <form className="containerForm">
@@ -30,7 +28,7 @@ export default async function Page(props: {
         </div>
       </form>
 
-      <div className="tableContainer">
+      <div>
         <table>
           <thead>
             <tr>
@@ -44,28 +42,27 @@ export default async function Page(props: {
         </table>
       </div>
 
-      <div className="tableContainer" style={{ marginTop: "100px" }}>
-
-      <table>
-        <thead>
-          <tr>
-            <th>Impresione B/N</th>
-            <th>Impresiones Color</th>
-            <th>Plotteo</th>
-            <th>Escaner</th>
-            <th>Total</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>5,000</td>
-            <td>10,000</td>
-            <td>10,000</td>
-            <td>20,000</td>
-            <td>45,000</td>
-          </tr>
-        </tbody>
-      </table>
+      <div>
+        <table>
+          <thead>
+            <tr>
+              <th>Impresione B/N</th>
+              <th>Impresiones Color</th>
+              <th>Plotteo</th>
+              <th>Escaner</th>
+              <th>Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>5,000</td>
+              <td>10,000</td>
+              <td>10,000</td>
+              <td>20,000</td>
+              <td>45,000</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </section>
   );
diff --git a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
index fa89767..aef9e8b 100644
--- a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
+++ b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
@@ -1,13 +1,10 @@
-import styles from "./Page.module.css";
-
 export default async function MesasDisponibles() {
   return (
     <section className="containerSection">
-
-      <div className={styles.tableContainer}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
-            <tr style={{fontSize:"15px"}}>
+            <tr style={{ fontSize: "15px" }}>
               <th>Mesa</th>
               <th>Activo</th>
             </tr>
diff --git a/app/Components/BitacoraSanciones/BitacoraAlumno.tsx b/app/Components/BitacoraSanciones/BitacoraAlumno.tsx
index ff75106..c8b3256 100644
--- a/app/Components/BitacoraSanciones/BitacoraAlumno.tsx
+++ b/app/Components/BitacoraSanciones/BitacoraAlumno.tsx
@@ -1,8 +1,6 @@
 "use client";
 import { useState } from "react";
 
-import styles from "./Page.module.css";
-
 interface alumnos {
   tiempo_entrada: string;
   tiempo_asignado: string;
@@ -13,26 +11,24 @@ function BitacoraAlumno() {
   const [alumnos, setAlumnos] = useState<alumnos[]>([]);
   return (
     <>
-      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
-        <table className={styles.machineTable}>
-          <thead>
-            <tr>
-              <th>Tiempo Entrada</th>
-              <th>Tiempo Asignado</th>
-              <th>Ubicacion del equipo</th>
+      <table>
+        <thead>
+          <tr>
+            <th>Tiempo Entrada</th>
+            <th>Tiempo Asignado</th>
+            <th>Ubicacion del equipo</th>
+          </tr>
+        </thead>
+        <tbody>
+          {alumnos.map((alumno, index) => (
+            <tr key={index}>
+              <td>{alumno.tiempo_entrada}</td>
+              <td>{alumno.tiempo_asignado}</td>
+              <td>{alumno.Ubicacion_equipo}</td>
             </tr>
-          </thead>
-          <tbody>
-            {alumnos.map((alumno, index) => (
-              <tr key={index}>
-                <td>{alumno.tiempo_entrada}</td>
-                <td>{alumno.tiempo_asignado}</td>
-                <td>{alumno.Ubicacion_equipo}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+          ))}
+        </tbody>
+      </table>
     </>
   );
 }
diff --git a/app/Components/BitacoraSanciones/BitacoraEquipo.tsx b/app/Components/BitacoraSanciones/BitacoraEquipo.tsx
index 33006fd..a47e880 100644
--- a/app/Components/BitacoraSanciones/BitacoraEquipo.tsx
+++ b/app/Components/BitacoraSanciones/BitacoraEquipo.tsx
@@ -30,8 +30,8 @@ function BitacoraEquipo() {
         </div>
       </form>
       <SearchDate />
-      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
             <tr>
               <th>Hora Entrada</th>
diff --git a/app/Components/BitacoraSanciones/BitacoraMesas.tsx b/app/Components/BitacoraSanciones/BitacoraMesas.tsx
index d27e3d3..14c2d6f 100644
--- a/app/Components/BitacoraSanciones/BitacoraMesas.tsx
+++ b/app/Components/BitacoraSanciones/BitacoraMesas.tsx
@@ -2,8 +2,6 @@
 import SearchDate from "../SearchDate/SearchDate";
 import { useState } from "react";
 
-import styles from "./Page.module.css";
-
 interface tables {
   no_mesa: number;
   no_cuenta: number;
@@ -18,8 +16,8 @@ function BitacoraMesas() {
   return (
     <>
       <SearchDate />
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
             <tr>
               <th>Mesa</th>
diff --git a/app/Components/BitacoraSanciones/Sanciones.tsx b/app/Components/BitacoraSanciones/Sanciones.tsx
index 109ccc2..e85d14d 100644
--- a/app/Components/BitacoraSanciones/Sanciones.tsx
+++ b/app/Components/BitacoraSanciones/Sanciones.tsx
@@ -5,23 +5,22 @@ import TableSancion from "./TableSancion";
 interface Student {
   id_cuenta: string;
   nombre: string;
+  credito?: number;
 }
 
-export default async function Sanciones(props: { student?: Student }) {
-  const idCuenta = props?.student?.id_cuenta ?? null;
+export default function Sanciones({ student }: { student?: Student }) {
+  const idCuenta = student?.id_cuenta ?? null;
 
   return (
     <>
       <SearchUser value={idCuenta} />
-      {props.student && (
+      {student && (
         <>
-          <Information
-            NoCuenta={props.student.id_cuenta}
-            Nombre={props.student.nombre}
-          />
-          <TableSancion />
+          <Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
+          <TableSancion idCuenta={parseInt(student.id_cuenta)} />
         </>
       )}
     </>
   );
 }
+//
diff --git a/app/Components/BitacoraSanciones/TableSancion.tsx b/app/Components/BitacoraSanciones/TableSancion.tsx
index 6ff31d2..d4d95d6 100644
--- a/app/Components/BitacoraSanciones/TableSancion.tsx
+++ b/app/Components/BitacoraSanciones/TableSancion.tsx
@@ -1,77 +1,59 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import styles from "./Page.module.css";
 import axios from "axios";
+import toast from "react-hot-toast";
 
-interface alumno_sancion {
-  id_alumno_sancion: number;
-  fecha_inicio: string;
-  alumno: alumno;
-  sancion: sancion;
-}
-
-interface alumno {
+interface Alumno {
   id_cuenta: number;
   nombre: string;
   credito: number;
 }
 
-interface sancion {
+interface Sancion {
   id_sancion: number;
   sancion: string;
   duracion: number;
 }
 
-export default function TableSancion() {
-  const [sanciones, setSanciones] = useState<any>([]);
-  const [button, setButton] = useState<boolean>(false);
+interface AlumnoSancion {
+  id_alumno_sancion: number;
+  fecha_inicio: string;
+  sancion: Sancion;
+}
+
+export default function TableSancion({ idCuenta }: { idCuenta: number }) {
+  const [sanciones, setSanciones] = useState<Sancion[]>([]);
+  const [alumno, setAlumno] = useState<Alumno | null>(null);
+  const [alumnoSanciones, setAlumnoSanciones] = useState<AlumnoSancion[]>([]);
   const [selectedSancion, setSelectedSancion] = useState("");
-  const [alumnoSanciones, setAlumnoSanciones] = useState<any>([]);
-  /*
+
   useEffect(() => {
-    const getSanciones = async () => {
-      const response = await axios.get("");
-      setSanciones(response);
-    };
-    getSanciones();
-  }, [button]);
+    if (!idCuenta) return;
 
-
-
-                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
-                <td>
-                  {calcularFechaFin(item.fecha_inicio, item.sancion?.duracion)}
-                </td>
-
-                https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/320154041
-                .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
-*/
-  useEffect(() => {
+    // Obtener sanciones del alumno
     axios
       .get(
-        " https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/423019393"
+        `https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/${idCuenta}`
       )
-      .then((response) => {
-        setAlumnoSanciones(response.data);
+      .then((res) => {
+        setAlumno(res.data.student);
+        setAlumnoSanciones(
+          res.data.alusancion?.length ? res.data.alusancion : []
+        );
       })
-      .catch((error) => {
-        console.error("Error al obtener las sanciones:", error);
-      });
+      .catch((err) =>
+        toast.error("Error al obtener las sanciones del alumno:", err)
+      );
 
+    // Obtener catálogo de sanciones
     axios
       .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
-      .then((response) => {
-        setSanciones(response.data);
-      })
-      .catch((error) => {
-        console.error("Error al obtener las sanciones:", error);
-      });
-  }, []);
-
-  const handlebutton = () => {
-    setButton(!button);
-  };
+      .then((res) => setSanciones(res.data))
+      .catch((err) =>
+        toast.error("Error al obtener el catálogo de sanciones:", err)
+      );
+  }, [idCuenta]);
 
   const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
     const fecha = new Date(fechaInicio);
@@ -81,36 +63,33 @@ export default function TableSancion() {
 
   return (
     <>
-      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
-        <table className={styles.machineTable}>
+      <div style={{ margin: "1rem 0" }}>
+        <table>
           <thead>
             <tr>
               <th>Cuenta</th>
               <th>Motivo de la sanción</th>
-              <th>Duracion (Semanas) </th>
+              <th>Duración (Semanas)</th>
               <th>Fecha Sanción</th>
-              <th>Podra utilizar el servicio hasta</th>
+              <th>Podrá utilizar el servicio hasta</th>
             </tr>
           </thead>
           <tbody>
-            {sanciones.length > 0 ? (
-              alumnoSanciones.map((item: any) => (
+            {alumnoSanciones.length > 0 ? (
+              alumnoSanciones.map((item) => (
                 <tr key={item.id_alumno_sancion}>
-                  <td>{item.alumno?.id_cuenta}</td>
-                  <td>{item.sancion?.sancion}</td>
-                  <td>{item.sancion?.duracion}</td>
+                  <td>{alumno?.id_cuenta}</td>
+                  <td>{item.sancion.sancion}</td>
+                  <td>{item.sancion.duracion}</td>
                   <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
                   <td>
-                    {calcularFechaFin(
-                      item.fecha_inicio,
-                      item.sancion?.duracion
-                    )}
+                    {calcularFechaFin(item.fecha_inicio, item.sancion.duracion)}
                   </td>
                 </tr>
               ))
             ) : (
               <tr>
-                <td colSpan={6}>No hay sanciones registradas</td>
+                <td colSpan={5}>No hay sanciones registradas</td>
               </tr>
             )}
           </tbody>
@@ -124,7 +103,7 @@ export default function TableSancion() {
             onChange={(e) => setSelectedSancion(e.target.value)}
           >
             <option value="">-- Selecciona una sanción --</option>
-            {sanciones.map((sancion: any) => (
+            {sanciones.map((sancion) => (
               <option key={sancion.id_sancion} value={sancion.id_sancion}>
                 {sancion.sancion} ({sancion.duracion} semana/s)
               </option>
@@ -132,14 +111,14 @@ export default function TableSancion() {
           </select>
         </div>
       </form>
+
       <button
         className="button buttonSearch"
         style={{ margin: "1rem 0" }}
-        onClick={handlebutton}
+        onClick={() => alert(`Sanción ${selectedSancion} aplicada`)}
       >
         Aplicar sanción
       </button>
     </>
   );
 }
-//IO
diff --git a/app/Components/Equipos/tableequipos.tsx b/app/Components/Equipos/tableequipos.tsx
index a072348..1be142d 100644
--- a/app/Components/Equipos/tableequipos.tsx
+++ b/app/Components/Equipos/tableequipos.tsx
@@ -3,11 +3,10 @@ import styles from "./Page.module.css";
 export default async function TableEquipos() {
   return (
     <section className="containerSection">
-
-      <div className={styles.tableContainer}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
-            <tr style={{fontSize:"15px"}}>
+            <tr style={{ fontSize: "15px" }}>
               <th>Ubicación</th>
               <th>Nombre</th>
               <th>Plataforma</th>
diff --git a/app/Components/Global/SearchUser/SearchUserWithDate.tsx b/app/Components/Global/SearchUser/SearchUserWithDate.tsx
index e1470c4..595101d 100644
--- a/app/Components/Global/SearchUser/SearchUserWithDate.tsx
+++ b/app/Components/Global/SearchUser/SearchUserWithDate.tsx
@@ -47,9 +47,9 @@ function SearchUserWithDate(props: urlProp) {
             inputMode="numeric"
             pattern="[0-9]*"
           />
-          <SearchDate />
         </div>
       </form>
+      <SearchDate />
     </>
   );
 }
diff --git a/app/Components/Global/Toggle/Toggle.tsx b/app/Components/Global/Toggle/Toggle.tsx
index 999bf9b..6c3a237 100644
--- a/app/Components/Global/Toggle/Toggle.tsx
+++ b/app/Components/Global/Toggle/Toggle.tsx
@@ -29,7 +29,7 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
 
     router.replace(`${pathname}?${params.toString()}`);
   };
-  
+
   return (
     <section className="toggleSection">
       <div className="toggleGroup">
@@ -44,10 +44,10 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
         ))}
       </div>
 
-      <div className="padding">
+      <div className="padding toggleContent">
         {options.find((opt) => opt.key === view)?.content}
       </div>
     </section>
   );
 }
-//IO
\ No newline at end of file
+//IO
diff --git a/app/Components/QuitarSancion/QuitarSancion.tsx b/app/Components/QuitarSancion/QuitarSancion.tsx
index 5187340..6f2e601 100644
--- a/app/Components/QuitarSancion/QuitarSancion.tsx
+++ b/app/Components/QuitarSancion/QuitarSancion.tsx
@@ -1,5 +1,3 @@
-import styles from "./Page.module.css";
-
 interface Alumno {
   id_cuenta: number;
   nombre: string;
@@ -36,8 +34,8 @@ function QuitarSancion({ data }: Props) {
 
   return (
     <section className="containerSection">
-      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
             <tr>
               <th>ID</th>
@@ -49,7 +47,7 @@ function QuitarSancion({ data }: Props) {
             </tr>
           </thead>
           <tbody>
-            {data && data.alusancion.length > 0 ? (
+            {data && data.alusancion.length !== 0 ? (
               data.alusancion.map((item) => (
                 <tr key={item.id_alumno_sancion}>
                   <td>{item.id_alumno_sancion}</td>
diff --git a/app/Components/Reportes/porRecibo.tsx b/app/Components/Reportes/porRecibo.tsx
index 8590296..fad6966 100644
--- a/app/Components/Reportes/porRecibo.tsx
+++ b/app/Components/Reportes/porRecibo.tsx
@@ -10,8 +10,8 @@ interface reportes {
 function PorRecibos() {
   const [reportes, SetQuitarSanciones] = useState<reportes[]>([]);
   return (
-    <div className={styles.tableContainer}>
-      <table className={styles.machineTable}>
+    <div>
+      <table>
         <thead>
           <tr>
             <th>Servicio</th>
diff --git a/app/Components/Reportes/porServicio.tsx b/app/Components/Reportes/porServicio.tsx
index 0259344..79bd278 100644
--- a/app/Components/Reportes/porServicio.tsx
+++ b/app/Components/Reportes/porServicio.tsx
@@ -13,8 +13,8 @@ interface servicios {
 function PorServicios() {
   const [recibos, setRecibos] = useState<servicios[]>([]);
   return (
-    <div className={styles.tableContainer}>
-      <table className={styles.machineTable}>
+    <div>
+      <table>
         <thead>
           <tr>
             <th>Folio Recibo</th>
diff --git a/app/globals.css b/app/globals.css
index d6fa085..896688b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -219,7 +219,6 @@ button {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  max-width: 450px;
 }
 
 .button {
@@ -295,6 +294,7 @@ a {
   margin-top: 1rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
+  min-height: fit-content;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
 }
 
@@ -310,6 +310,7 @@ a {
   align-items: center;
   padding: 5px 0;
   border-bottom: 1px solid #e5e5e5;
+  height: 35px;
 }
 
 .informationItem:last-child {
@@ -324,7 +325,7 @@ a {
 
 .informationValue {
   color: #555;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
 }
 
 .title {
@@ -364,6 +365,8 @@ form {
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  height: 100%;
+  overflow: hidden;
 }
 
 .toggleGroup {
@@ -397,6 +400,12 @@ form {
   border-bottom: none;
 }
 
+.toggleContent {
+  overflow-y: auto;
+  height: 450px;
+  scrollbar-width: none;
+}
+
 p {
   font-size: 1.5rem;
 }