Issue: Collections items too large, wasting vertical space
Fix: Reduce padding and font sizes for mobile
Changes:
- Collection items: 8px padding (was default larger)
- Font size: 14px (more compact)
- Heading: 18px (was larger)
- Search box: 8px padding
- Tighter line-height and margins
Result: More collections visible without scrolling
Previous approach (display:none) broke Contents tab navigation.
New approach: Keep sidebar visible but make it flow inline with content.
Sidebar now appears as full-width content block on mobile.
Both Contents and Media tabs should work properly.
Issue: Tapping 'Contents' tab did nothing on mobile (sidebar hidden)
Fix: When Contents tab is active, show Collections list in main content area
Collections list now appears as full-width content when needed.
Media tab continues to work normally.
Issue: Collections sidebar was overlapping main content on mobile screens
Fix: Hide sidebar completely on mobile (display: none)
Mobile users navigate via the top navigation/breadcrumbs instead.
Content now takes full width without sidebar overlap.
Removed entire dark mode theming (Fire/Frost/Arcane colors, dark backgrounds, all custom styling).
Keeping ONLY mobile-responsive optimizations:
- Larger touch targets (44px buttons/inputs)
- Single-column layout on mobile
- Stacked editor panes
- Better spacing for small screens
- 16px font size to prevent iOS zoom
Result: Clean, default Decap CMS styling with mobile improvements only.
This should resolve mobile display issues.
Mobile optimizations (max-width: 768px):
- Collapsible sidebar (80% width, off-canvas)
- Full-width main content on mobile
- Larger touch targets (44px min-height for buttons/inputs)
- Single-column layout for collection cards
- Stacked editor (no side-by-side panes)
- Wrapped toolbar items
- 16px font size to prevent iOS zoom
- Better spacing and padding for small screens
Extra small devices (max-width: 480px):
- Full-width sidebar
- Reduced padding throughout
- Compact font sizes
Result: firefrostgaming.com/admin now mobile-friendly for task management on phone
Previous CSS selectors weren't catching Decap's dynamic class names.
Now using:
- href attribute selectors for Tasks link
- JavaScript fallback after DOM load
- Removed complex selectors that weren't working
Signed-off-by: claude@firefrostgaming.com
