Se corrige desborde de chat de ia en mobile

This commit is contained in:
2026-03-24 13:03:33 -06:00
parent 7ddc5c7f1f
commit 614150f8d1
2 changed files with 13 additions and 7 deletions
@@ -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) => (
@@ -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 ? (