Skip to content

Fix review form overflow on phones, bump to 1.18.1 - #33

Merged
jasperf merged 3 commits into
mainfrom
fix/review-form-input-overflow
Sep 13, 2026
Merged

jasperf merged 3 commits into
mainfrom
fix/review-form-input-overflow

Conversation

@jasperf

@jasperf jasperf commented Sep 13, 2026

Copy link
Copy Markdown
Contributor

Problem

On single product pages, the review form's inputs, select and textarea (assets/css/woocommerce.css) set width: 100% plus padding and a border under the default content-box sizing. The name and email fields ran 6-7px past their column, giving every product page a horizontal scrollbar at 360-414px.

Changes

  • assets/css/woocommerce.css: add box-sizing: border-box to the review form field rule.
  • style.css §6.7: the post comment form fields have the same width: 100% plus padding. They did not overflow, because core's comments-form block styles already apply border-box, but the theme rule now declares it itself. Hardening only, no visible change.
  • Version 1.18.1 in style.css, CHANGELOG.md, readme.txt and package.json.

Testing

Synced to the local demo multisite and compared scrollWidth with the viewport in headless Chromium at 360, 414, 600, 768, 860, 900, 1024, 1186, 1280, 1366, 1440, 1512 and 1920px:

  • Before: all 18 Aviendha product pages overflowed by 6-7px at 360 and 414px.
  • After: no overflow on any product page, or on Home, About, Services, Contact, Shop, My Account, the sample post or the sample page.
  • The post comment form fields measured border-box with their right edge flush to the column, both before and after.

Cart and checkout still overflow locally. That comes from a missing thumbnail image in the demo subsite's uploads (the files were not restored), not from theme code.

The product review form's inputs set width: 100% plus padding and a border
under the default content-box sizing, so they overflowed the column and gave
single product pages a horizontal scrollbar at 360-414px.
The fields use width: 100% plus padding, the same shape that overflowed the
product review form. Core's comments-form block styles already apply
border-box here, so nothing overflowed; the theme rule now states it itself
rather than depending on that stylesheet.
@jasperf
jasperf merged commit 9bf40da into main Sep 13, 2026
2 checks passed
@jasperf
jasperf deleted the fix/review-form-input-overflow branch September 13, 2026 06:08
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