Merge pull request 'Se corrige desborde de chat de ia en mobile' (#222) from issue/219-mejorar-responsividad into main

Reviewed-on: #222

src/components/asignaturas/detalle/IAAsignaturaTab.tsx

@@ -554,7 +554,13 @@ export function IAAsignaturaTab() {
       </aside>
 
       {/* 2. PANEL CENTRAL (CHAT) - EL RECUADRO ESTILIZADO */}
-      <main className="relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm md:m-2">
+      <main
+        className={cn(
+          'relative flex min-w-0 flex-1 flex-col overflow-hidden bg-slate-50/50 shadow-sm',
+          'mt-[50px] h-[calc(100svh-50px)]', // 50px es la altura aproximada de tu header fixed
+          'md:m-2 md:mt-0 md:h-[calc(100vh-160px)] md:rounded-xl md:border md:border-slate-200',
+        )}
+      >
         {/* Header Interno del Recuadro */}
         <div className="flex shrink-0 items-center justify-between border-b bg-white p-3">
           <div className="flex items-center gap-2">
@@ -593,7 +599,7 @@ export function IAAsignaturaTab() {
         </div>
 
         {/* Área de Mensajes */}
-        <div className="relative min-h-0 flex-1">
+        <div className="relative min-h-0 w-full flex-1 overflow-hidden">
           <ScrollArea ref={scrollRef} className="h-full w-full">
             <div className="mx-auto max-w-3xl space-y-6 p-3 md:p-6">
               {messages.map((msg) => (

src/routes/planes/$planId/_detalle/iaplan.tsx

@@ -482,7 +482,7 @@ function RouteComponent() {
   }
 
   return (
-    <div className="flex min-h-[calc(100vh-80px)] w-full flex-col gap-4 p-4 md:h-[calc(100vh-160px)] md:max-h-[calc(100vh-160px)] md:flex-row md:overflow-hidden">
+    <div className="flex h-[calc(100vh-80px)] w-full flex-col gap-4 p-4 md:h-[calc(100vh-160px)] md:max-h-[calc(100vh-160px)] md:flex-row md:overflow-hidden">
       {/* --- HEADER MÓVIL (Solo visible en < md) --- */}
       <div className="flex shrink-0 items-center justify-between rounded-lg border bg-white p-2 shadow-sm md:hidden">
         <Button
@@ -662,9 +662,9 @@ function RouteComponent() {
       </div>
 
       {/* --- PANEL DE CHAT PRINCIPAL (Centro) --- */}
-      <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm md:flex-[3]">
+      <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm md:h-full md:flex-[3]">
         {/* NUEVO: Barra superior de campos seleccionados */}
-        <div className="shrink-0 border-b bg-white p-3">
+        <div className="z-10 shrink-0 border-b bg-white p-3">
           <div className="flex items-center justify-between">
             <span className="text-[10px] font-bold text-slate-400 uppercase">
               Mejorar con IA
@@ -685,9 +685,9 @@ function RouteComponent() {
         </div>
 
         {/* CONTENIDO DEL CHAT */}
-        <div className="relative min-h-0 flex-1">
+        <div className="relative flex min-h-0 flex-1 flex-col">
           <ScrollArea ref={scrollRef} className="h-full w-full">
-            <div className="mx-auto max-w-3xl space-y-6 p-6">
+            <div className="mx-auto flex max-w-3xl flex-col gap-6 p-6">
               {!activeChatId &&
               chatMessages.length === 0 &&
               !optimisticMessage ? (