/* Overrides responsive para Postiz (cm.ireparo.es) inyectados vía nginx sub_filter. Postiz es upstream (no tocamos su código); esto se inyecta en y se scopa por ruta con el atributo data-postiz-path que mantiene postiz-custom.js. */ @media (max-width: 768px) { /* ===== /analytics: apilar el panel Canales encima del contenido ===== */ html[data-postiz-path^="/analytics"] div.flex.flex-1.gap-\[1px\] { flex-direction: column; } html[data-postiz-path^="/analytics"] div.flex.flex-1.gap-\[1px\] > div.w-\[260px\] { width: 100% !important; padding: 12px 14px !important; } /* la lista de canales pasa a fila horizontal con scroll */ html[data-postiz-path^="/analytics"] div.flex.flex-1.gap-\[1px\] > div.w-\[260px\] > div.flex.flex-col { flex-direction: row; align-items: center; overflow-x: auto; scrollbar-width: none; } /* fuera la cabecera "Canales" + botón de plegar (redundantes en móvil) */ html[data-postiz-path^="/analytics"] div.flex.flex-1.gap-\[1px\] > div.w-\[260px\] > div.flex.flex-col > div.flex.items-center:first-child { display: none; } /* cada canal es un chip que no se encoge */ html[data-postiz-path^="/analytics"] div.flex.flex-1.gap-\[1px\] > div.w-\[260px\] > div.flex.flex-col > * { flex: none; } /* el contenido puede encoger sin desbordar */ html[data-postiz-path^="/analytics"] div.blurMe { min-width: 0; } /* padding general del contenido más ajustado en móvil */ html[data-postiz-path^="/analytics"] div.blurMe div.p-\[20px\] { padding: 12px !important; } } /* ============================================================ ===== /launches: calendario responsive (móvil ≤768px) ===== Fuentes (dentro del contenedor ireparo-cm-postiz): - apps/frontend/src/components/new-layout/layout.component.tsx (wrapper página, raíl, cabecera) - apps/frontend/src/components/launches/launches.component.tsx (sidebar canales + main) - apps/frontend/src/components/launches/filters.tsx (barra superior del calendario) - apps/frontend/src/components/launches/calendar.tsx (grids semana/mes) ============================================================ */ @media (max-width: 768px) { /* --- layout.component.tsx L92: wrapper de página (div.flex.flex-col.min-h-screen.min-w-screen.p-[12px]) — min-w-screen fuera y padding compacto: la PÁGINA no debe scrollear en horizontal */ html[data-postiz-path^="/launches"] div.min-h-screen.min-w-screen.p-\[12px\] { min-width: 0 !important; padding: 6px !important; } /* --- layout.component.tsx L105: raíl izquierdo de iconos (div.flex.flex-col.bg-newBgColorInner.w-[80px]) → 56px en móvil */ html[data-postiz-path^="/launches"] div.flex.flex-col.bg-newBgColorInner.w-\[80px\] { width: 56px !important; } /* --- layout.component.tsx L107: menú fijo interno del raíl (#left-menu, w-[64px] start-[17px]) */ html[data-postiz-path^="/launches"] #left-menu { width: 48px !important; inset-inline-start: 8px !important; } /* new-layout/logo.tsx: logo SVG (.mt-[8px].min-w-[60px].min-h-[60px]) 60px → 40px */ html[data-postiz-path^="/launches"] #left-menu svg.min-w-\[60px\] { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } /* new-layout/menu-item.tsx: labels de texto de los iconos (div.text-[10px]) ocultos */ html[data-postiz-path^="/launches"] #left-menu a .text-\[10px\], html[data-postiz-path^="/launches"] #left-menu button .text-\[10px\] { display: none; } /* layout.component.tsx L113: columna interna del raíl (gap-[32px]) más compacta */ html[data-postiz-path^="/launches"] #left-menu > div.flex.flex-col.gap-\[32px\] { gap: 12px !important; } /* --- layout.component.tsx L120: cabecera superior (div.flex.bg-newBgColorInner.h-[80px].px-[20px]) compactada */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.bg-newBgColorInner.h-\[80px\] { height: 56px !important; padding-inline: 10px !important; } /* título (div.text-[24px]) más pequeño */ html[data-postiz-path^="/launches"] div.blurMe > div.h-\[80px\] .text-\[24px\] { font-size: 17px !important; } /* fila de iconos de la cabecera (div.flex.gap-[20px].text-textItemBlur) */ html[data-postiz-path^="/launches"] div.blurMe > div.h-\[80px\] div.flex.gap-\[20px\] { gap: 8px !important; } /* separadores verticales (.bg-blockSeparator) fuera: ahorran ancho */ html[data-postiz-path^="/launches"] div.blurMe > div.h-\[80px\] .bg-blockSeparator { display: none; } /* --- layout.component.tsx L119: el contenido puede encoger sin desbordar */ html[data-postiz-path^="/launches"] div.blurMe { min-width: 0; } /* --- layout.component.tsx L139: fila de contenido (div.flex.flex-1.gap-[1px] = children) → columna: banda de canales arriba, calendario debajo */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] { flex-direction: column; } /* --- launches.component.tsx: sidebar de canales (div.flex.relative.flex-col + w-[260px] o w-[100px] plegado) → banda horizontal de altura fija a lo ancho */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col { width: 100% !important; height: 84px; flex: none; } /* launches.component.tsx: contenedor interno absoluto del sidebar (div.bg-newBgColorInner.p-[20px].flex.flex-col.gap-[15px].absolute…overflow-x-hidden) → fila con scroll horizontal táctil */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col > div.bg-newBgColorInner.p-\[20px\] { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* cabecera "Channels" + botón de plegar (div.flex.items-center primero): redundante en móvil */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col > div.bg-newBgColorInner.p-\[20px\] > div.flex.items-center:first-child { display: none; } /* bloque de botones Add Channel + Create post (div.flex.flex-col.gap-[8px]) en fila, sin encoger */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col > div.bg-newBgColorInner.p-\[20px\] > div.flex.flex-col.gap-\[8px\] { flex-direction: row !important; flex: none; } /* contenedor de grupos de canales (div.gap-[32px].flex.flex-col.select-none) en fila */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col > div.bg-newBgColorInner.p-\[20px\] > div.gap-\[32px\].flex.flex-col { flex-direction: row !important; align-items: center; gap: 12px !important; flex: none; } /* launches.component.tsx MenuGroupComponent (div.gap-[16px].flex.flex-col.relative) y su lista de canales (div.gap-[12px].flex.flex-col.relative) también en fila */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col div.gap-\[16px\].flex.flex-col.relative, html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col div.gap-\[12px\].flex.flex-col.relative { flex-direction: row !important; align-items: center; } /* cada canal (MenuComponent, div.flex.gap-[12px].items-center…rounded-e-[8px]) es un chip fijo */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col div.rounded-e-\[8px\] { flex: none; } /* nombre del canal (div.cursor-move) oculto en móvil: queda el avatar como chip */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col div.cursor-move { display: none; } /* pie con versión/tier del sidebar (div.mt-[5px].text-center) fuera */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.flex.relative.flex-col div.mt-\[5px\].text-center { display: none; } /* --- launches.component.tsx: columna principal del calendario (div.bg-newBgColorInner.flex-1…p-[20px].gap-[12px]) padding/gap compactos */ html[data-postiz-path^="/launches"] div.blurMe > div.flex.flex-1.gap-\[1px\] > div.bg-newBgColorInner.flex-1.p-\[20px\] { padding: 10px !important; gap: 8px !important; min-width: 0; } /* --- filters.tsx: barra superior (div.text-textColor.flex.flex-col.md:flex-row.gap-[8px].items-center.select-none) → fila con wrap (2 filas) sin desbordar */ html[data-postiz-path^="/launches"] div.text-textColor.md\:flex-row.select-none { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px !important; } /* grupo flechas + fecha + Today (div.flex.flex-grow…gap-[10px]) también puede envolver */ html[data-postiz-path^="/launches"] div.text-textColor.md\:flex-row.select-none > div.flex-grow.gap-\[10px\] { flex-wrap: wrap; gap: 6px !important; } /* caja de fecha (div.min-w-[200px].text-center): sin mínimo rígido */ html[data-postiz-path^="/launches"] div.text-textColor.md\:flex-row.select-none .min-w-\[200px\] { min-width: 0 !important; } /* botones Day/Week/Month (div.w-[74px]): ancho por contenido */ html[data-postiz-path^="/launches"] div.text-textColor.md\:flex-row.select-none .w-\[74px\] { width: auto !important; padding-inline: 10px; } /* --- calendar.tsx WeekView L369: grid semana (div.grid.[grid-template-columns:136px_repeat(7,minmax(0,1fr))].gap-[4px]…scrollbar-thumb-fifth) El propio grid es el scroller (absolute + overflow-auto): columnas con mínimo para que el contenido sume ~842px y se deslice con el dedo, sin aplastarse */ html[data-postiz-path^="/launches"] div.grid.gap-\[4px\].scrollbar-thumb-fifth { grid-template-columns: 72px repeat(7, minmax(106px, 1fr)) !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* --- calendar.tsx MonthView L468: grid mes (div.grid.grid-cols-7.grid-rows-[62px_auto].gap-[4px]…scrollbar-thumb-tableBorder) mismo patrón: mínimo por día → ~836px con scroll horizontal interno */ html[data-postiz-path^="/launches"] div.grid.grid-cols-7.scrollbar-thumb-tableBorder { grid-template-columns: repeat(7, minmax(116px, 1fr)) !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } }