Patterns Explorer: Improve pagination layout when 'Show button text labels' preference is enabled

[afercia]

Description

When the preference 'Show button text labels' is eneabled, the Patterns Explorer pagination items are stacked vertically because of a CSS flex-direction: column;. Screenshot:

Not sure this is ideal.

I'm not sure what the reasoning behind this layout was. It appears to be new CSS introduced in #53835 and seems intentional.

While on small screns laying out these items vertically would make sense, on large screens there is space to lay out them horizontally, no differently from their layout when 'Show button text labels` is disabled. Screenshot:

I'd like to propose to stack them vertically only udner a certain viewport width.

Step-by-step reproduction instructions

• Go to the post editor > Options > Preferences > Accessibility
• Enable the 'Show button text labels' preference.
• CLose the preferences modal dialog and open the main inserter > Patterns
• Click 'Explore all patterns'
• Sctoll the modal dialog at the bottom.
• Observe the pagination items are unexpectedly stacked vertically.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[amitraj2203]

Hi @afercia, I have raised a PR for this issue. Please let me know if it needs improvement.

Thanks!