Feature Description

Summary

Remove conflicting and duplicate Tailwind CSS width utility classes (w-auto and w-max) that appear together in component className attributes throughout the codebase.

Current Problem

Several components have className attributes with both w-auto and w-max applied to the same element. Since CSS follows the last declaration rule, w-max overrides w-auto, making the first utility redundant and potentially confusing for developers.

Components Affected

• SnackBarContainer.res
• TableocalFilter components
• OrderUtils

In my use-case, maintaining clean and non-conflicting CSS class declarations improves code maintainability, reduces bundle size slightly, and prevents developer confusion about which styles are actually being applied.

Possible Implementation

Implementation Approach

1. Audit existing codebase - Search for patterns where multiple width utilities are applied to the same element
2. Standardize width utility usage - Decide on consistent patterns:
   • Use w-auto for flexible, responsive sizing within containers
   • Use w-max for content-based sizing that may overflow containers
   • Use w-full, w-fit, etc. based on specific requirements
3. Remove duplicates - Keep only the intended width utility class
4. Add linting rules - Consider adding custom ESLint or Stylelint rules to prevent future conflicts

Technical Details

• Review all .res files for className patterns
• Update Tailwind class combinations
• Ensure visual appearance remains unchanged
• Test components to verify no layout regressions

Not obligatory, but this refactor would improve code clarity and prevent CSS specificity confusion.

Have you spent some time checking if this feature request has been raised before?

• I checked and didn't find a similar issue

Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to submit a PR?

None