1. 29 Aug, 2025 1 commit
    • 🎨 feat: Implement responsive design for SelectableButtonGroup component · 1bc0010f
      This commit introduces a comprehensive responsive design system for the SelectableButtonGroup component that adapts to container width changes, particularly optimized for dynamic sidebar layouts.
      
      ## Key Features
      
      ### 1. Container Width Detection
      - Added `useContainerWidth` hook using ResizeObserver API
      - Real-time container width monitoring for responsive calculations
      - Automatic layout adjustments based on available space
      
      ### 2. Intelligent Column Layout
      Implements a 4-tier responsive system:
      - **≤280px**: 1 column + tags (mobile portrait)
      - **281-380px**: 2 columns + tags (narrow screens)
      - **381-460px**: 3 columns - tags (general case, prioritizes readability)
      - **>460px**: 3 columns + tags (wide screens, full feature display)
      
      ### 3. Dynamic Tag Visibility
      - Tags automatically hide in medium-width containers (381-460px) to improve text readability
      - Tags show in narrow and wide containers where space allows for optimal UX
      - Responsive threshold ensures content clarity across all viewport sizes
      
      ### 4. Adaptive Grid Spacing
      - Compact spacing `[4,4]` for containers ≤400px
      - Standard spacing `[6,6]` for larger containers
      - Additional `.sbg-compact` CSS class for fine-tuned styling in narrow layouts
      
      ### 5. Sidebar Integration
      - Perfectly compatible with dynamic sidebar width: `clamp(280px, 24vw, 520px)`
      - Automatically adjusts as sidebar scales with viewport changes
      - Maintains optimal button density and information display at all sizes
      
      ## Technical Implementation
      
      - **Hook**: `useContainerWidth.js` - ResizeObserver-based width detection
      - **Component**: Enhanced `SelectableButtonGroup.jsx` with responsive logic
      - **Styling**: Added `.sbg-compact` mode in `index.css`
      - **Performance**: Efficient span calculation using `Math.floor(24 / perRow)`
      
      ## Benefits
      
      - Improved UX across all screen sizes and sidebar configurations
      - Better text readability through intelligent tag hiding
      - Seamless integration with existing responsive sidebar system
      - Maintains component functionality while optimizing space utilization
      
      Closes: Responsive design implementation for model marketplace sidebar components
      t0ng7u committed
  2. 28 Aug, 2025 7 commits
  3. 27 Aug, 2025 9 commits
  4. 26 Aug, 2025 12 commits
  5. 25 Aug, 2025 11 commits