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>
</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
type="button"
onClick={() => setFiltersOpen((o) => !o)}
aria-expanded={filtersOpen}
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
? "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"
@@ -282,7 +282,7 @@ export function PublicationsTable({
className={`transition-transform ${filtersOpen ? "rotate-180" : ""}`}
/>
</button>
<div className="relative w-full sm:w-auto">
<div className="relative order-1 w-full sm:order-2 sm:w-auto">
<input
type="text"
placeholder="Filtrar publicaciones..."
@@ -305,7 +305,7 @@ export function PublicationsTable({
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"
>
<div className="flex flex-col gap-1">
<div className="flex min-w-[140px] flex-1 flex-col gap-1">
<label
htmlFor="year-from"
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
@@ -321,9 +321,10 @@ export function PublicationsTable({
value: String(y),
label: String(y),
}))}
className="w-full"
/>
</div>
<div className="flex flex-col gap-1">
<div className="flex min-w-[140px] flex-1 flex-col gap-1">
<label
htmlFor="year-to"
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
@@ -339,6 +340,7 @@ export function PublicationsTable({
value: String(y),
label: String(y),
}))}
className="w-full"
/>
</div>
{hasYearFilter && (