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

fix(responsive): layout 100% width en todas las resoluciones

Browse Source 
- Eliminado max-w-[1280px] de todas las apps (mi-dia, landing, cotizador, cobranza, dashboards, alta-clientes)
- Kanban: sin restricción de ancho, columnas min-w-[220px]
- Grids: xl:grid-cols-4/5 para pantallas grandes
- CSS base: -webkit-text-size-adjust + min-h-screen
- 6 apps construidas
This commit is contained in:
Consult AS Technology
2026-09-08 08:36:53 +00:00
parent 52429c9f14
commit dc6ec786d0
22 changed files with 59 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/alta-clientes/src/components/AppHeader.tsx
View File

@@ -10,7 +10,7 @@ interface Props {
export default function AppHeader({ titulo, acciones }: Props) {
return (
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
<div className="mx-auto flex min-h-14 max-w-[1280px] flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 sm:px-6">
<div className="flex min-h-14 flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 sm:px-6 lg:px-8">
<a
href="/"
className="rounded-lg px-2 py-1.5 text-xs font-medium text-[#64748B] dark:text-[#94A3B8] transition-all duration-100 ease-out hover:bg-[#F9FAFB] hover:text-[#111827] dark:text-[#E2E8F0]"

5
apps/alta-clientes/src/index.css
View File

@@ -9,8 +9,11 @@
}
@layer base {
html {
-webkit-text-size-adjust: 100%;
}
body {
@apply bg-[#F8FAFC] text-[#111827] antialiased;
@apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
}
:focus-visible {

10
apps/alta-clientes/src/pages/AltaClientePage.tsx
View File

@@ -338,7 +338,7 @@ export default function AltaClientePage() {
if (pantalla === 'cargando') {
return (
<div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
<main className="mx-auto max-w-[1280px] px-4 py-16 sm:px-6">
<main className="px-4 py-16 sm:px-6 lg:px-8">
<SkeletonCard />
</main>
</div>
@@ -350,7 +350,7 @@ export default function AltaClientePage() {
<div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
<AppHeader titulo="Alta de Clientes" />
<BannerModoLocal />
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-12">
<main className="px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
<div className="mx-auto max-w-4xl">
<p className="text-sm text-[#64748B] dark:text-[#94A3B8]">
Elige cómo registrar al interesado: captura ligera de afluencia o formato completo de alta.
@@ -397,7 +397,7 @@ export default function AltaClientePage() {
return (
<div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
<AppHeader titulo="Alta Afluencia" />
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-10">
<main className="px-4 py-8 sm:px-6 sm:py-10 lg:px-8">
<div className="mx-auto max-w-3xl">
<p className="text-sm text-[#64748B] dark:text-[#94A3B8]">
Captura rápida del interesado; entra al embudo de ventas.
@@ -423,7 +423,7 @@ export default function AltaClientePage() {
return (
<div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
<AppHeader titulo="Alta de Clientes" />
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-10">
<main className="px-4 py-8 sm:px-6 sm:py-10 lg:px-8">
<div className="max-w-3xl">
{borradores.length > 0 && (
<>
@@ -514,7 +514,7 @@ export default function AltaClientePage() {
}
/>
<main className="mx-auto max-w-[1280px] px-4 py-6 sm:px-6 sm:py-8">
<main className="px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
<div className="md:grid md:grid-cols-[260px_minmax(0,1fr)] md:gap-8 lg:gap-8">
<div className="mb-6 md:sticky md:top-20 md:mb-0 md:self-start">
<Stepper pasos={[...PASOS]} pasoActual={paso} onIrAPaso={irAPaso} />