feat(ui): make dashboard responsive for iPhone and mobile devices
- Add Sheet primitive component for mobile drawers - Add MobileNav with hamburger menu for dashboard layout - Hide desktop sidebars on mobile; show mobile header - Make dashboard header responsive with stacked layout on small screens - Hide selector text on mobile, show icons only - Convert fixed-width filters to responsive widths (CFDI, Clientes, Admin, Documentos, Alertas) - Cap dialog widths to 95vw on mobile (CFDI viewer, Documentos, Reportes, Contribuyentes, Facturación) - Make calendar grid smaller and use single-letter weekdays on mobile - Update viewport to include viewport-fit=cover for Samsung safe areas
This commit is contained in:
@@ -302,8 +302,9 @@ export default function CalendarioPage() {
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(d => (
|
||||
<div key={d} className="text-center text-sm font-medium text-muted-foreground py-2">
|
||||
{d}
|
||||
<div key={d} className="text-center text-xs md:text-sm font-medium text-muted-foreground py-1 md:py-2">
|
||||
<span className="md:hidden">{d.charAt(0)}</span>
|
||||
<span className="hidden md:inline">{d}</span>
|
||||
</div>
|
||||
))}
|
||||
{days.map((day, i) => {
|
||||
@@ -313,14 +314,14 @@ export default function CalendarioPage() {
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'min-h-[80px] p-1 border rounded-md',
|
||||
'min-h-[60px] md:min-h-[80px] p-0.5 md:p-1 border rounded-md',
|
||||
day ? 'bg-background' : 'bg-muted/30',
|
||||
isToday && 'ring-2 ring-primary'
|
||||
)}
|
||||
>
|
||||
{day && (
|
||||
<>
|
||||
<div className={cn('text-sm font-medium', isToday && 'text-primary')}>{day}</div>
|
||||
<div className={cn('text-xs md:text-sm font-medium', isToday && 'text-primary')}>{day}</div>
|
||||
<div className="space-y-1 mt-1">
|
||||
{dayEventos.slice(0, 2).map((e, idx) => {
|
||||
const Icon = tipoIcons[e.tipo] || Calendar;
|
||||
|
||||
Reference in New Issue
Block a user