Automattic / Automattic/blocks-everywhere

Widths set on Blocks Everywhere in Forums breaks layout

Open
#207 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
PHP
Stars
94
Forks
21
PR merge metrics
No merged PRs in 30d

Description

Unfortunately the styles added in https://github.com/Automattic/blocks-everywhere/pull/201 to correct the editor width break the layout in a couple of scenarios:

1. We launched a new Forums theme which has a wider content layout, so the 620px width isn't compatible
2. On mobile devices the 620px width causes horizontal overflow (in both the old and new themes)

### Screenshots

| New theme desktop | New theme mobile | Old theme mobile |
|-|-|-|
| ![Screenshot 2024-04-30 at 9 21 59 AM](https://github.com/Automattic/blocks-everywhere/assets/1017872/b1298c6b-094d-4c74-b60f-731428e352e7) | ![wordpress org_support_forum_installation__old-theme=0(Samsung Galaxy S20 Ultra)](https://github.com/Automattic/blocks-everywhere/assets/1017872/913a93fa-ea52-40b8-9902-433d0a2be748) | ![wordpress org_support_forum_installation__old-theme=1(Samsung Galaxy S20 Ultra)](https://github.com/Automattic/blocks-everywhere/assets/1017872/a25f94a3-e05b-4c9f-9976-18ebe580c2fa) |

### Suggested fix

This seems to work in all the scenarios above:

```scss
.gutenberg-support #bbpress-forums fieldset.bbp-form .blocks-everywhere {
max-width: 100%;
min-width: 100%;
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Locate the styles added by PR #201 and inspect the `.gutenberg-support #bbpress-forums fieldset.bbp-form .blocks-everywhere` rule. Apply the issue's suggested sizing change, then verify the new wide theme and both old and new mobile layouts no longer overflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.