Fix recurring amount fields clipped in membership edit sidebar

[superdav42]

Summary

• The recurring amount group (amount, duration number, duration unit) was cramped into a single row in the ~238px sidebar, making the duration number input nearly invisible
• Changed to a two-row wrapped flex layout: amount on the first row, duration number and unit side-by-side on the second row
• All fields are now clearly visible and usable

Test plan

• Navigate to Network Admin > Memberships > Edit a recurring membership
• Verify the Recurring Amount section in the sidebar shows amount on one row and duration/unit on a second row
• Verify all three fields are editable and values display correctly

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Enhanced membership pricing form layout with improved responsive wrapping behavior and refined field alignment to provide better visual organization when managing pricing information.

[coderabbitai]

📝 Walkthrough

Walkthrough

A single file receives CSS class adjustments to the membership pricing form. The recurring amount group container gains flex-wrap support, and sub-field wrapper classes are updated to modify spacing and width behavior for improved layout control.

Changes

Cohort / File(s)	Summary
Membership Admin Form Styling inc/admin-pages/class-membership-edit-admin-page.php	Updated CSS classes for the recurring amount form group: added wu-flex-wrap to container, replaced _amount field wrapper with wu-w-full, adjusted duration from wu-mx-2 wu-w-1/3 to wu-w-1/3 wu-mr-1, and changed duration_unit from wu-w-2/3 to wu-flex-1.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A button, a field, they danced all around,
With flex-wrap and margins, new spacing is found,
Width classes shifted, the layout grew bright,
Our pricing form now displays just right!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing a layout issue where recurring amount fields were clipped in the membership edit sidebar.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/recurring-amount-sidebar-layout

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

inc/admin-pages/class-membership-edit-admin-page.php (1)

664-664: Optional: make flex behavior explicit on the group container.

wu-flex-wrap only works if the container is already display:flex. If that default ever changes in the form renderer, wrapping would silently stop working.

♻️ Suggested hardening

-						'classes'           => 'wu-flex-wrap',
+						'classes'           => 'wu-flex wu-flex-wrap',

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@inc/admin-pages/class-membership-edit-admin-page.php` at line 664, The group
container currently only has the 'wu-flex-wrap' class which assumes the element
is already display:flex; update the classes for that container (the array entry
with key 'classes' in class-membership-edit-admin-page.php) to explicitly enable
flex by adding the appropriate display class (e.g., 'wu-flex' or 'wu-flex-row')
alongside 'wu-flex-wrap' so wrapping cannot break if defaults change; ensure
both classes are present in the 'classes' value for the same container.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@inc/admin-pages/class-membership-edit-admin-page.php`:
- Line 664: The group container currently only has the 'wu-flex-wrap' class
which assumes the element is already display:flex; update the classes for that
container (the array entry with key 'classes' in
class-membership-edit-admin-page.php) to explicitly enable flex by adding the
appropriate display class (e.g., 'wu-flex' or 'wu-flex-row') alongside
'wu-flex-wrap' so wrapping cannot break if defaults change; ensure both classes
are present in the 'classes' value for the same container.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3b086cb and 9fc1520.

📒 Files selected for processing (1)

• inc/admin-pages/class-membership-edit-admin-page.php

[github-actions]

🔨 Build Complete - Ready for Testing!

📦 Download Build Artifact (Recommended)

Download the zip build, upload to WordPress and test:

• Build: ultimate-multisite
• ⬇️ Download from GitHub Actions
• ⬇️ Download without Github Account (nightly.link)

🌐 Test in WordPress Playground (Very Experimental)

Click the link below to instantly test this PR in your browser - no installation needed!
Playground support for multisite is very limitied, hopefully it will get better in the future.

🚀 Launch in Playground

Login credentials: admin / password