Updated Flexible Content UI breaks in the side bar

Open
#971 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
php, wordpress
Domain
frontend

Research direction

Reproduce the issue by placing a flexible content field in a WordPress field group assigned to the sidebar, using the reported WordPress 6.6.2 and ACF 8.5.0 setup. Inspect the flexible content UI at narrow widths and compare its flex sizing and wrapping behavior. Done means the sidebar and other small-screen layouts no longer overflow or visually break.

Written by the indexing model from the issue text.

Description

Describe the bug

The updated flexible content field UI doesn't scale down sufficiently and visually breaks

To Reproduce
Steps to reproduce the behavior:

  1. Add a flexible content field to a field group
  2. Position that field group in the side bar
  3. See that text overflows the available space

Expected behavior

I expected the UI to not break.

Screenshots or Video

Image

Code
N/A

Use any flexibly content in any field group in the side bar.

Version Information:

  • WordPress Version : 6.6.2
  • PHP Version : N/A
  • ACF Version : 8.5.0
  • Browser : Latest Chrome

Additional context

This website uses the Classic Editor.
But the same issue will probably exist anywhere on small enough screens, regardless of the placement of the flexible content field.

Not enforcing heights and allowing flex containers to wrap already works better when the available space is limited.

Dominant language
PHP
Stars
947
Forks
198
PR merge metrics
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AdvancedCustomFields/acf

All issues in AdvancedCustomFields/acf

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.