Se corrige desborde de chat de ia en mobile
This commit is contained in:
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user