Skip to content

Add mobileWallLayout plugin#680

Open
speckofthecosmos wants to merge 1 commit intostashapp:mainfrom
speckofthecosmos:mobile-wall-layout
Open

Add mobileWallLayout plugin#680
speckofthecosmos wants to merge 1 commit intostashapp:mainfrom
speckofthecosmos:mobile-wall-layout

Conversation

@speckofthecosmos
Copy link

Summary

Adds a UI plugin that forces full-width single-column layout on the Markers and Images (wall mode) pages on mobile devices.

Stash's wall mode uses react-photo-gallery, which calculates position: absolute offsets for a multi-column brick layout. On phones this produces items that are too small to comfortably tap and browse. This plugin overrides those offsets so each item spans the full width of the screen.

Details

  • Applies only when window.innerWidth ≤ 960px — covers all current phones including large flagships in landscape (iPhone 16 Pro Max: 932px, Galaxy S24 Ultra: 915px), while excluding tablets (iPad mini landscape: 1024px)
  • Activates/deactivates automatically as you navigate between pages (SPA-aware via MutationObserver)
  • Re-evaluates on orientation change
  • Uses a <style> tag with !important rather than JS inline style overrides, so it wins over react-photo-gallery's continuous recalculation regardless of render timing
  • No effect on desktop or tablet viewports

Forces full-width single-column layout on the Markers and Images (wall
mode) pages for mobile devices (≤960px wide). Works around
react-photo-gallery's inline position:absolute offsets that make items
too small to browse comfortably on phones.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant