Skip to content

Add mobileWallLayout plugin#680

Merged
DogmaDragon merged 1 commit intostashapp:mainfrom
speckofthecosmos:mobile-wall-layout
Mar 15, 2026
Merged

Add mobileWallLayout plugin#680
DogmaDragon merged 1 commit intostashapp:mainfrom
speckofthecosmos:mobile-wall-layout

Conversation

@speckofthecosmos
Copy link
Contributor

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>
@DogmaDragon DogmaDragon added type:plugin Plugins object:image Affects or is triggered by image object object:marker Affects or is triggered by marker object labels Mar 15, 2026
@DogmaDragon DogmaDragon merged commit f64c2b7 into stashapp:main Mar 15, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

object:image Affects or is triggered by image object object:marker Affects or is triggered by marker object type:plugin Plugins

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants