consultoria-as/Dashboard-CAS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make layout fully responsive for any screen size

Browse Source 
Root cause: viewport was hardcoded to width=3840 and body to
3840x2160px. If TV browser has different viewport, content
overflows and can't be zoomed to fit.

Changes:
- viewport meta: width=device-width instead of width=3840
- body: 100vw/100vh instead of fixed pixels
- App container: w-screen h-screen
- font-size: clamp(14px, 1.15vw, 24px) scales with viewport
- Topology: horizontal chain (Modem → FW → Switch) saves
  vertical space, VM pills in 3-col grid, all sizes relative
- Kanban: 3-col grid, compact project cards
- All padding/gaps use rem (scale with base font)
- Removed all hardcoded pixel max-widths

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
I. Alcaraz Salazar
2026-02-16 01:55:34 +00:00
parent e3e210a9dc
commit c4065f2cce
7 changed files with 142 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/components/Calendar/CalendarView.tsx
View File

@@ -28,73 +28,57 @@ export function CalendarView({ events }: CalendarViewProps) {
return (
<div className="flex flex-col h-full">
{/* Summary bar */}
<div className="flex items-center gap-8 px-16 py-4 bg-bg-secondary border-b border-border">
<span className="text-lg text-text-secondary">
<span className="font-bold text-text-primary">{events.length}</span> eventos esta
semana
<div className="flex items-center gap-6 px-8 py-2 bg-bg-secondary border-b border-border shrink-0">
<span className="text-base text-text-secondary">
<span className="font-bold text-text-primary">{events.length}</span> eventos esta semana
</span>
</div>
<div className="flex-1 overflow-y-auto px-16 py-8">
<div className="flex-1 overflow-y-auto px-8 py-6">
{!hasEvents ? (
<div className="flex flex-col items-center justify-center h-full gap-6 -mt-16">
<span className="text-8xl opacity-30">📅</span>
<p className="text-3xl font-semibold text-text-secondary">
<div className="flex flex-col items-center justify-center h-full gap-4">
<span className="text-6xl opacity-30">📅</span>
<p className="text-2xl font-semibold text-text-secondary">
Sin eventos programados
</p>
<p className="text-xl text-text-muted">
<p className="text-lg text-text-muted">
Los próximos eventos del calendario de Odoo aparecerán aquí
</p>
</div>
) : (
<div className="grid grid-cols-3 gap-10 h-full">
{/* Today */}
<section className="flex flex-col">
<h2 className="text-2xl font-bold text-text-primary mb-2">Hoy</h2>
<p className="text-base text-text-muted capitalize mb-6">{formatDate(today)}</p>
<div className="grid grid-cols-3 gap-8 h-full">
<section>
<h2 className="text-xl font-bold text-text-primary mb-1">Hoy</h2>
<p className="text-sm text-text-muted capitalize mb-4">{formatDate(today)}</p>
{todayEvents.length === 0 ? (
<p className="text-lg text-text-secondary">Sin eventos</p>
) : (
<div className="space-y-4">
{todayEvents.map((e) => (
<EventCard key={e.id} event={e} />
))}
</div>
)}
</section>
{/* Tomorrow */}
<section className="flex flex-col">
<h2 className="text-2xl font-bold text-text-primary mb-2">Mañana</h2>
<p className="text-base text-text-muted capitalize mb-6">
{formatDate(tomorrow)}
</p>
{tomorrowEvents.length === 0 ? (
<p className="text-lg text-text-secondary">Sin eventos</p>
) : (
<div className="space-y-4">
{tomorrowEvents.map((e) => (
<EventCard key={e.id} event={e} />
))}
</div>
)}
</section>
{/* This week */}
<section className="flex flex-col">
<h2 className="text-2xl font-bold text-text-primary mb-2">Esta semana</h2>
<p className="text-base text-text-muted mb-6">Próximos días</p>
{laterEvents.length === 0 ? (
<p className="text-lg text-text-secondary">Sin eventos</p>
<p className="text-base text-text-secondary">Sin eventos</p>
) : (
<div className="space-y-3">
{todayEvents.map((e) => <EventCard key={e.id} event={e} />)}
</div>
)}
</section>
<section>
<h2 className="text-xl font-bold text-text-primary mb-1">Mañana</h2>
<p className="text-sm text-text-muted capitalize mb-4">{formatDate(tomorrow)}</p>
{tomorrowEvents.length === 0 ? (
<p className="text-base text-text-secondary">Sin eventos</p>
) : (
<div className="space-y-3">
{tomorrowEvents.map((e) => <EventCard key={e.id} event={e} />)}
</div>
)}
</section>
<section>
<h2 className="text-xl font-bold text-text-primary mb-1">Esta semana</h2>
<p className="text-sm text-text-muted mb-4">Próximos días</p>
{laterEvents.length === 0 ? (
<p className="text-base text-text-secondary">Sin eventos</p>
) : (
<div className="space-y-2">
{laterEvents.map((e) => (
<div
key={e.id}
className="flex gap-4 text-base bg-bg-card rounded-lg px-4 py-3 border border-border"
>
<span className="font-mono text-text-muted min-w-[160px] capitalize">
<div key={e.id} className="flex gap-3 text-sm bg-bg-card rounded-lg px-3 py-2 border border-border">
<span className="font-mono text-text-muted min-w-[10rem] capitalize">
{formatDate(e.start)}
</span>
<span className="text-text-primary truncate">{e.name}</span>