Skip to content

fix(admin): document/user search bar + pagination button sizing (#830)

Jérôme Revillard requested to merge fix/830-documents-search-bar into main

What

Two CSS-only fixes in AdminDashboard.vue (scoped styles). Design system untouched — DsInput/DsButton not modified; only design tokens (--space-sm, --muted, --border) used.

1. Search bar collapses to a tiny, non-resizable field (#830 (closed))

.filter-bar / .search-bar had no flex-wrap. On narrow cards (small viewport or a grid-constrained column) the status select + action button consumed the fixed space and the flex:1 search input got the remainder — and could not grow back ("doesn't resize").

  • flex-wrap: wrap on .filter-bar and .search-bar → controls wrap instead of crushing the field
  • .search-input-container: flex: 1 1 220px + min-width: 0 → keeps a usable minimum, participates in flex correctly
  • .search-icon positioned absolutely (it had no CSS rule, so the inline 14px SVG displaced the width:100% input and overlapped typed text) + left padding on the input so text clears the magnifier

2. Pagination Previous/Next labels overflow their buttons

.page-btn forced a fixed 1.8rem (29px) square — sizing meant for single-digit page-number buttons — but the class is only ever applied to the Previous/Next DsButtons whose « Previous / Next » labels are far wider than 29px, so the text spilled outside the button border.

  • width: 1.8rem → min-width: 1.8rem (compact floor, grows to fit label). DsButton's own small-ghost padding handles horizontal spacing.

Both fixes touch shared classes, so the user-management search bar + pagination benefit as well.

Verification

  • Prettier ✓, ESLint exit 0
  • AdminDashboard Jest suite: 106 pass / 0 fail
  • Playwright renders (empirical, since jsdom doesn't apply SFC scoped CSS):
    • Search input: 1252px @1545px container (no wide regression); 500px→367px, 400px→267px (was 207px / 107px — tiny)
    • Pagination: « Previous 27→86px, Next » 27→60px, no overflow

Notes

  • The deployed el-salvador prototype will need a frontend rebuild to pick these up.
  • Root cause of the search-bar symptom was non-obvious: on a wide viewport the field renders fine (1252px); it only collapses on narrower cards, which is why the bug looked layout-correct in a static read.

Closes #830 (closed)

Merge request reports