fix(ui): unify admin table toolbar layout with search and buttons in single row

Standardize filter bar layout across admin pages to place search/filters
on left and action buttons on right within the same row, improving
visual consistency and space utilization.
This commit is contained in:
shaw
2026-02-08 14:00:02 +08:00
parent b4ec65785d
commit b1c30df8e3
5 changed files with 114 additions and 122 deletions

View File

@@ -3,9 +3,9 @@
<TablePageLayout>
<!-- Single Row: Search, Filters, and Actions -->
<template #filters>
<div class="flex w-full flex-col gap-3 md:flex-row md:flex-wrap-reverse md:items-center md:justify-between md:gap-4">
<div class="flex flex-wrap items-center gap-3">
<!-- Left: Search + Active Filters -->
<div class="flex min-w-[280px] flex-1 flex-wrap content-start items-center gap-3 md:order-1">
<div class="flex flex-1 flex-wrap items-center gap-3">
<!-- Search Box -->
<div class="relative w-full md:w-64">
<Icon
@@ -100,7 +100,7 @@
</div>
<!-- Right: Actions and Settings -->
<div class="flex w-full items-center justify-between gap-2 md:order-2 md:ml-auto md:max-w-full md:flex-wrap md:justify-end md:gap-3">
<div class="flex flex-wrap items-center justify-end gap-2">
<!-- Mobile: Secondary buttons (icon only) -->
<div class="flex items-center gap-2 md:contents">
<!-- Refresh Button -->