Mobile UX Improvements - Contests Pages
Hey everyone! Just pushed some mobile experience improvements to the contests section based on feedback about horizontal scrolling and cramped layouts.
What’s Fixed
Contests Listing Page:
- Fixed horizontal scroll issues on mobile caused by sponsor/prize information
- Sponsor and prize badges now wrap properly on smaller screens
- Cleaner, more readable layout on phones
Contest Calendar:
- Reduced calendar grid cell height on mobile (from 80px to 60px) to fit more of the month on screen
- Improved touch targets on previous/next month navigation buttons (now 48px minimum)
- Added accessibility labels to navigation buttons
- Better overall spacing and readability
Touch Target Improvements:
- All calendar navigation buttons now meet WCAG 2.1 AA standards (48px minimum on mobile)
- “View All Contests” button has proper mobile sizing
- Contest action buttons already had good sizing, verified they meet accessibility standards
Technical Details
The main issue was the sponsor/prize/action section using justify-between without flex-wrap, which caused content to overflow horizontally on small screens. Now everything wraps gracefully, and we hide the “Sponsored by” text on mobile to save horizontal space (the logo still shows).
All contest detail pages, voting interfaces, and entry submission forms were already responsive - just needed these tweaks to the listing and calendar pages.
Mobile Experience & Pattern Creation Updates
Hey everyone! We’ve just rolled out a major update focused on improving the mobile experience and making pattern creation much smoother. Here’s what’s new:
Pattern Creation - Mobile UX Overhaul
What changed: The entire pattern creation form is now optimized for mobile devices.
Details:
- Larger touch targets - All buttons, inputs, and controls are now 52px minimum height on mobile (meets accessibility standards)
- Better layouts - Form sections stack vertically on mobile for easier one-handed use
- Clearer buttons - Edit and delete actions now show text labels on mobile instead of just icons
- Improved materials selector - Easier to add, edit, and organize materials on touch devices
- Enhanced tying steps editor - Larger touch areas for reordering and editing steps
- Bigger checkboxes - Increased from 16px to 24px for easier tapping
Why it matters: Creating patterns on your phone or tablet is now much more pleasant - no more struggling to tap tiny buttons!
Auto-Save for Pattern Creation
What changed: Your work is now automatically saved as you type when creating a new pattern.
Details:
- Smart auto-save - Saves your draft every 2 seconds after you stop typing
- Draft recovery - If you close the browser or navigate away, you’ll be prompted to continue your draft when you return
- Progress tracking - Shows completion percentage so you know how much you’ve filled out
- Status indicator - See when your draft was last saved
- 7-day retention - Drafts are kept for 7 days, then automatically cleaned up
- Browser warning - Get a warning if you try to close the browser with unsaved changes
Why it matters: Never lose your work again! Whether your browser crashes, you accidentally close the tab, or need to step away, your pattern draft is safely saved.
Image Upload Progress Indicator
What changed: Visual progress feedback when uploading pattern images.
Details:
- Animated upload icon with spinning progress ring
- Progress bar showing upload completion (0-100%)
- Counter display showing “X of Y complete”
- Larger, more readable text on mobile (16px vs 14px)
- Accent-colored background to draw attention during upload
Why it matters: Especially helpful on slower mobile connections - you now get clear visual feedback on upload progress instead of just “Uploading…” text.
Site-Wide Mobile UX Improvements
What changed: Touch targets improved across the entire site for better mobile usability.
Areas improved:
Search & Navigation (affects every page):
- Search bar - Larger input field (52px) and submit button (44px minimum)
- Popular searches - Easier to tap suggested search buttons
- Pagination - Bigger Previous/Next buttons and page numbers
Pattern Browsing:
- Sort dropdown - Increased height for easier selection
- Filter button - Larger with bigger icon
- View mode toggles - Enhanced touch areas for grid/list/masonry switching
Pattern Detail Pages:
- Navigation - Larger back button
- Actions - Edit and delete buttons now 52px on mobile
- Collapsible sections - Bigger expand/collapse buttons for materials and instructions
- Image thumbnails - Increased from 80px to 88px for easier tapping
- Author avatars - Slightly larger (36px) for better visual hierarchy
Profile Editing:
- Specialty checkboxes - Larger touch areas (52px) for easier selection
Why it matters: The entire site is now much more comfortable to use on mobile devices. No more fat-finger mistakes or struggling to hit the right button!
Mobile Filter Modals
What changed: Filters on mobile now appear as full-screen modals instead of pushing content down the page.
Pages affected:
- Patterns page (/patterns) - Filter by difficulty, completeness, season, species
- Search page (/search) - Filter by result type, difficulty, fly type, water type
Mobile Modal Features:
- Full-screen modal - Slide-up from bottom with backdrop
- Fixed header - Shows filter title and active filter count
- Scrollable content - All filter options with 52px touch targets
- Fixed footer - “Clear All” and “Apply Filters” buttons
- Easy dismissal - X button or tap backdrop to close
- Larger checkboxes - 20px on mobile for easier tapping
- Bigger icons - 18px on mobile for better visibility
Why it matters: Filters no longer push your search results or pattern cards down the page. The modal provides full-screen space for selecting filters, making it much easier to use on small screens. This is the same pattern used by shopping and travel apps.
Desktop: No changes - filters remain in their sidebar/inline positions as before.
Footer Spacing Fix
What changed: Added breathing room between page content and footer on mobile.
Details:
- 48px spacing added to bottom of all pages on mobile
- Automatic - Applied site-wide without individual page changes
- Desktop unchanged - No padding on larger screens
Why it matters: Content no longer feels cramped against the footer on mobile devices.
Technical Details
All mobile improvements use responsive design:
- Mobile devices: 52px minimum touch targets (Apple & Android guidelines)
- Desktop: Original sizing preserved for optimal desktop experience
- Zero breaking changes: Desktop users won’t notice any differences
Accessibility compliance: All changes meet WCAG 2.1 AA standards for touch target size (Success Criterion 2.5.5)
What’s Next?
These improvements are part of our ongoing effort to make Thread & Hook the best fly tying platform on any device. Let us know what you think and if you notice any issues!
Feedback welcome! If you spot any rough edges or have suggestions for further improvements, please let us know.
The main additions are:
- Mobile Filter Modals section - covers both patterns and search pages
- Footer Spacing Fix section - the 48px spacing improvement
- Added the two new commit hashes at the bottom