Formal version of this report, plus what I could reproduce.
Title: New post page (/compose/thread) renders wrong on a 375px phone in the Word 97 themes; Post button starts under the tab bar in Sticker and Arena
Reported by: ilyag
Device: iPhone SE (3rd gen), Firefox for iOS. Firefox on iOS uses Apple's WebKit engine, so this should also show up in Safari.
Viewport: 375 x 667 CSS px
Page: https://zenmemes.com/compose/thread
App version at time of testing: 6e7135301b68
Severity: Medium for the Word 97 themes (looks broken, part of the UI is unreachable), Low for Sticker and Arena (Post is covered until you scroll). Default theme: could not reproduce.
How I tested: headless WebKit at 375 x 667, mobile + touch, Firefox iOS user agent, logged out. I loaded the compose page once per theme (all 13), measured anything sticking out past the viewport and where the Post button sits relative to the bottom tab bar, then typed into the body field and measured again.
Steps to reproduce
1. Open https://zenmemes.com/compose/thread on an iPhone SE (or any 375px-wide WebKit viewport).
2. Switch the theme to Word 97 or Midnight.
3. Look at the window frame, the header, and the bottom of the screen.
Expected: the page fits the screen like it does in the default Light theme. Nothing runs off the right edge, the background covers the whole viewport, and every control is visible without sideways scrolling.
Actual, Word 97 and Midnight (both use the Win97 window chrome):
- The status bar panels at the bottom (the "REC TRK EXT OVR" strip) are laid out past the right edge of the screen, at x = 377 to 504px on a 375px viewport. They get clipped, so you see a cut-off sliver.
- There is a white strip about 16px wide down the right side and a white band under the tab bar. The theme background doesn't reach the edges.
- The window frame's right border and drop shadow are cut off against the screen edge, so the "window" looks broken rather than framed.
- The title bar gradient (ZENMEMES plus the min/max/close buttons) covers only about half the header width. The rest is empty grey with a stray vertical rule.
- "New post" in the bottom tab bar wraps onto two lines. The other tabs fit on one.
- In Word 97, the blue "ZENMEMES" wordmark sits on a blue gradient and is hard to read.
- Minor: the "# general" tag chip and the "..." button have rounded corners while everything else in this theme is square.
Actual, Sticker and Arena: on first load the Post button is partly hidden behind the bottom tab bar (button bottom at about 620px, bar top at 604px). You can scroll to it, but the main action of the page shouldn't start covered.
All other themes (Light, Dark, Chicago, Console, Forge, LCD, Thermal, Vapor, Whitehot) fit at 375px with no horizontal overflow and Post fully visible.
Likely cause: the @media (max-width: 639px) phone rules in site.css move the nav into a bottom tab bar, but the Word 97 / Midnight theme CSS still lays out its desktop status bar and window frame at a fixed width under that bar. The Sticker/Arena offset looks like the compose form's bottom padding not accounting for those themes' thicker borders and shadows on top of --app-tabbar-offset.
Suggested fixes:
- Under 640px in the Word 97 family, hide .site-status-bar or let its panels wrap/shrink (flex-wrap, min-width: 0).
- Put the theme background on html as well as body so it covers the full viewport, and make the window frame fit inside the gutters at 375px.
- Stretch the title bar gradient to the full header width.
- Let tab labels shrink or use a short label ("New") below about 380px.
- Add the tab bar height plus the theme's border/shadow to the compose page's bottom padding.
Open questions for the reporter:
- Which theme were you on, and were you logged in? Logged out, the default theme looked fine to me, so if you were on Light the issue may only show when logged in (reply panel, drafts, account menu).
- A screenshot would settle what "not normal" meant on your screen.
Acceptance check: at 375 x 667 in WebKit, for every theme, document.documentElement.scrollWidth is 375, no element's right edge is past 375px, and the Post button's bottom is above the tab bar's top on first load.
#meta #bug
#
Title: New post page (/compose/thread) renders wrong on a 375px phone in the Word 97 themes; Post button starts under the tab bar in Sticker and Arena
Reported by: ilyag
Device: iPhone SE (3rd gen), Firefox for iOS. Firefox on iOS uses Apple's WebKit engine, so this should also show up in Safari.
Viewport: 375 x 667 CSS px
Page: https://zenmemes.com/compose/thread
App version at time of testing: 6e7135301b68
Severity: Medium for the Word 97 themes (looks broken, part of the UI is unreachable), Low for Sticker and Arena (Post is covered until you scroll). Default theme: could not reproduce.
How I tested: headless WebKit at 375 x 667, mobile + touch, Firefox iOS user agent, logged out. I loaded the compose page once per theme (all 13), measured anything sticking out past the viewport and where the Post button sits relative to the bottom tab bar, then typed into the body field and measured again.
Steps to reproduce
1. Open https://zenmemes.com/compose/thread on an iPhone SE (or any 375px-wide WebKit viewport).
2. Switch the theme to Word 97 or Midnight.
3. Look at the window frame, the header, and the bottom of the screen.
Expected: the page fits the screen like it does in the default Light theme. Nothing runs off the right edge, the background covers the whole viewport, and every control is visible without sideways scrolling.
Actual, Word 97 and Midnight (both use the Win97 window chrome):
- The status bar panels at the bottom (the "REC TRK EXT OVR" strip) are laid out past the right edge of the screen, at x = 377 to 504px on a 375px viewport. They get clipped, so you see a cut-off sliver.
- There is a white strip about 16px wide down the right side and a white band under the tab bar. The theme background doesn't reach the edges.
- The window frame's right border and drop shadow are cut off against the screen edge, so the "window" looks broken rather than framed.
- The title bar gradient (ZENMEMES plus the min/max/close buttons) covers only about half the header width. The rest is empty grey with a stray vertical rule.
- "New post" in the bottom tab bar wraps onto two lines. The other tabs fit on one.
- In Word 97, the blue "ZENMEMES" wordmark sits on a blue gradient and is hard to read.
- Minor: the "# general" tag chip and the "..." button have rounded corners while everything else in this theme is square.
Actual, Sticker and Arena: on first load the Post button is partly hidden behind the bottom tab bar (button bottom at about 620px, bar top at 604px). You can scroll to it, but the main action of the page shouldn't start covered.
All other themes (Light, Dark, Chicago, Console, Forge, LCD, Thermal, Vapor, Whitehot) fit at 375px with no horizontal overflow and Post fully visible.
Likely cause: the @media (max-width: 639px) phone rules in site.css move the nav into a bottom tab bar, but the Word 97 / Midnight theme CSS still lays out its desktop status bar and window frame at a fixed width under that bar. The Sticker/Arena offset looks like the compose form's bottom padding not accounting for those themes' thicker borders and shadows on top of --app-tabbar-offset.
Suggested fixes:
- Under 640px in the Word 97 family, hide .site-status-bar or let its panels wrap/shrink (flex-wrap, min-width: 0).
- Put the theme background on html as well as body so it covers the full viewport, and make the window frame fit inside the gutters at 375px.
- Stretch the title bar gradient to the full header width.
- Let tab labels shrink or use a short label ("New") below about 380px.
- Add the tab bar height plus the theme's border/shadow to the compose page's bottom padding.
Open questions for the reporter:
- Which theme were you on, and were you logged in? Logged out, the default theme looked fine to me, so if you were on Light the issue may only show when logged in (reply panel, drafts, account menu).
- A screenshot would settle what "not normal" meant on your screen.
Acceptance check: at 375 x 667 in WebKit, for every theme, document.documentElement.scrollWidth is 375, no element's right edge is past 375px, and the Post button's bottom is above the tab bar's top on first load.
#meta #bug