UI Bug Fix: Expand Dropdown Filters Width in CMS Lists

Last Updated: 16/07/2026
Type: UI Layout Fix — CMS Dropdown Width Adjustment
Screen: CMS Admin Panel — Spa Services List (Dịch vụ spa) & all filter-heavy table screens
Severity: 🟢 Low — Visual polishing to avoid text clipping and improve usability

Feedback Screenshot:

• Actual UI: The "Danh mục", "Chi nhánh", "Trạng thái", and "Tài nguyên" dropdown inputs are too narrow

---

1. Identified Spacing Issue

On the Spa Services List page (and potentially other list pages utilizing filter bars):

• The filter dropdown elements (Danh mục, Chi nhánh, Trạng thái, Tài nguyên) have a restricted width.
• This causes selected options (even short ones like "All") to look squished, and makes longer options completely unreadable due to text truncation.

---

2. Layout Specifications

To prevent squishing, we must replace absolute/narrow inline widths with fluid min-widths or proportional flex layouts.

2.1 Proposed Width Rules for Filter Bars

Filter Element	Previous Width (Est.)	Target Width Spec	Notes
Search Input (Tim dịch vụ)	~200px	flex: 2 (or min-width: 240px)	Keep search bar wider for typing SKU/Names
Category (Danh mục)	~100px	flex: 1 (or min-width: 140px)
Branch (Chi nhánh)	~100px	flex: 1 (or min-width: 140px)
Status (Trạng thái)	~100px	flex: 1 (or min-width: 120px)
Resource (Tài nguyên)	~100px	flex: 1 (or min-width: 140px)

Design Principle: If the container row grows, the dropdowns should grow proportionally (flex-grow: 1), keeping a minimum width so they never shrink below readable sizes.

---

3. Style Adjustments (CSS / Less / styled-components)

Identify where the filter container styling is declared (e.g. FilterBar.scss or inline React styles):

3.1 Before (Restricted Widths)

// ❌ WRONG — Fixed narrow inputs or implicit collapse widths
.filter-bar {
  display: flex;
  gap: 12px;
  
  .filter-item {
    width: 100px; // ❌ Hardcoded width is too narrow
    
    select, .dropdown-trigger {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

3.2 After (Flexbox-based Fluid Widths)

// ✅ CORRECT — Proportional and fluid dropdown widths
.filter-bar {
  display: flex;
  flex-wrap: wrap; // Allows wrapping on smaller tablet layouts
  gap: 16px;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 20px;

  .search-input-wrapper {
    flex: 2 1 240px; // Grows larger, shrinks to min 240px
  }

  .filter-dropdown-wrapper {
    flex: 1 1 140px; // Proportional grow, shrinks to min 140px
    
    // Ensure select components occupy 100% of the wrapper container
    .select-input, .dropdown-trigger {
      width: 100%;
      min-width: 120px;
      padding-right: 28px; // Padding for the caret icon
    }
  }
}

---

Technical Checklist

• Identify the filter row component layout in SpaServicesList.tsx (or similar file in /components/filters/).
• Apply flex-grow: 1 and a min-width limit to all dropdown wrapper containers:
  • Category: min-width: 140px
  • Branch: min-width: 140px
  • Status: min-width: 120px
  • Resource: min-width: 140px
• Update the global list filter CSS class (e.g., .list-filter-bar) to apply these spacing rules uniformly across all list views (Vouchers, Memberships, Bookings, etc.).
• Verify alignment: ensure the "Clear Filters" (Xóa lọc) button wraps or sits nicely at the end of the row.
• Test layout at different browser window widths (responsive testing) to verify input boxes wrap correctly instead of clipping.