feat(ui): ajustar estilos y estructura en los filtros de PublicationsTable para mejorar la responsividad

Se modifican los estilos y la estructura del componente PublicationsTable, optimizando la disposición de botones y campos de entrada para una mejor experiencia en dispositivos móviles. Se asegura que los elementos se alineen correctamente y se añaden clases para mejorar la presentación visual.
This commit is contained in:
Alexis
2026-06-02 11:10:22 +02:00
parent 35eef2ff90
commit 63ef7b2561
@@ -258,13 +258,13 @@ export function PublicationsTable({
)} )}
</p> </p>
</div> </div>
<div className="flex w-full flex-wrap items-center gap-2 sm:w-auto"> <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center">
<button <button
type="button" type="button"
onClick={() => setFiltersOpen((o) => !o)} onClick={() => setFiltersOpen((o) => !o)}
aria-expanded={filtersOpen} aria-expanded={filtersOpen}
aria-controls="pubs-advanced-filters" aria-controls="pubs-advanced-filters"
className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-[13px] font-medium transition-colors ${ className={`order-2 inline-flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-[13px] font-medium transition-colors sm:order-1 sm:w-auto sm:justify-start ${
filtersOpen || hasYearFilter filtersOpen || hasYearFilter
? "border-brand-accent/50 bg-brand-accent/10 text-brand-accent" ? "border-brand-accent/50 bg-brand-accent/10 text-brand-accent"
: "border-surface-border-strong bg-surface-secondary text-ink-secondary hover:bg-surface-primary" : "border-surface-border-strong bg-surface-secondary text-ink-secondary hover:bg-surface-primary"
@@ -282,7 +282,7 @@ export function PublicationsTable({
className={`transition-transform ${filtersOpen ? "rotate-180" : ""}`} className={`transition-transform ${filtersOpen ? "rotate-180" : ""}`}
/> />
</button> </button>
<div className="relative w-full sm:w-auto"> <div className="relative order-1 w-full sm:order-2 sm:w-auto">
<input <input
type="text" type="text"
placeholder="Filtrar publicaciones..." placeholder="Filtrar publicaciones..."
@@ -305,7 +305,7 @@ export function PublicationsTable({
id="pubs-advanced-filters" id="pubs-advanced-filters"
className="flex flex-wrap items-end gap-4 border-t border-surface-border/60 bg-surface-secondary/40 px-5 py-3" className="flex flex-wrap items-end gap-4 border-t border-surface-border/60 bg-surface-secondary/40 px-5 py-3"
> >
<div className="flex flex-col gap-1"> <div className="flex min-w-[140px] flex-1 flex-col gap-1">
<label <label
htmlFor="year-from" htmlFor="year-from"
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary" className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
@@ -321,9 +321,10 @@ export function PublicationsTable({
value: String(y), value: String(y),
label: String(y), label: String(y),
}))} }))}
className="w-full"
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex min-w-[140px] flex-1 flex-col gap-1">
<label <label
htmlFor="year-to" htmlFor="year-to"
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary" className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
@@ -339,6 +340,7 @@ export function PublicationsTable({
value: String(y), value: String(y),
label: String(y), label: String(y),
}))} }))}
className="w-full"
/> />
</div> </div>
{hasYearFilter && ( {hasYearFilter && (