fix: remove extra padding-right on number inputs and fix flex group overflow (GH#829)#832
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 17 minutes and 36 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
…verflow (GH#829)
WP admin applies padding: 0 12px to all text-type inputs including
input[type=number]. Browser-native spinner arrows occupy the right side
of the element, and the extra 12px of right padding makes the spinner
visually crowd or obscure adjacent select fields in flex-group layouts
(e.g. duration + duration_unit on the product edit page).
CSS fix: add .wu-styling input[type=number] { padding-right: 0 } to
admin.css so the spinner sits flush at the right border without stealing
horizontal space from neighbouring elements.
Layout fix: in the amount_group and price_variations group fields, the
duration number input wrapper used wu-mx-2 (8 px on both sides). This
added 16 px of margin to a 1/3 + 2/3 = 100% width layout, causing the
flex container to overflow and squeezing the duration_unit select to
near-zero width. Changing wu-mx-2 to wu-ml-2 (left margin only) removes
the right-side overflow while preserving the visual spacing between the
amount field and the duration number input.
Fixes #829
superdav42
force-pushed
the
feature/auto-20260413-201634
branch
from
07c6e86 to
15466fa
Compare
Merge SummaryPR #832 merged into What was done
How to verify
aidevops.sh v3.8.17 plugin for OpenCode v1.4.3 with claude-sonnet-4-6 spent 21m and 584 tokens on this as a headless worker. Solved in 2m. |
🔨 Build Complete - Ready for Testing!📦 Download Build Artifact (Recommended)Download the zip build, upload to WordPress and test:
🌐 Test in WordPress Playground (Very Experimental)Click the link below to instantly test this PR in your browser - no installation needed! Login credentials: |
🔨 Build Complete - Ready for Testing!📦 Download Build Artifact (Recommended)Download the zip build, upload to WordPress and test:
🌐 Test in WordPress Playground (Very Experimental)Click the link below to instantly test this PR in your browser - no installation needed! Login credentials: |
|
Performance Test Results Performance test results for 7eb3fb3 are in 🛎️! Note: the numbers in parentheses show the difference to the previous (baseline) test run. Differences below 2% or 0.5 in absolute values are not shown. URL:
|
1 participant
Summary
Fixes the visual bug where the duration unit select (Day(s)/Month(s)/etc.) is hidden by the browser-native spinner arrows (up/down buttons) on the number input in the product edit page pricing configuration.
Root Cause
Two compounding issues:
Padding: WP admin's
forms.cssappliespadding: 0 12pxto all text-type inputs includinginput[type=number]. The browser renders spinner arrows inside this right 12 px padding area, making the spinner appear to crowd or obscure adjacent elements in tight flex-group layouts.Layout overflow: In the
amount_groupandprice_variationsgroup fields, the duration number input wrapper usedwu-mx-2(8 px margins on both sides). This added 16 px of extra margin to a1/3 + 2/3 = 100%flex layout, causing the container to overflow and flex-shrink to squeeze theduration_unitselect to near-zero width — directly behind the spinner.Changes
assets/css/admin.cssAdded
.wu-styling input[type="number"] { padding-right: 0; }scoped to the admin area to remove the extra right padding. The spinner sits flush at the right border without stealing horizontal space from neighbouring elements.inc/admin-pages/class-product-edit-admin-page.phpamount_group>duration:wu-mx-2 wu-w-1/3→wu-ml-2 wu-w-1/3(left margin only — eliminates 8 px right-side overflow, preserves visual gap between the money amount field and the duration number)price_variations_duration_unit:wu-w-1/3 wu-mx-2→wu-w-1/3 wu-ml-2(same fix for price variations group)Testing
Verify in the WP network admin → Products → Edit any recurring product:
[Amount] [Duration number] [Unit select]— the unit select (Months/Years/etc.) should be fully visible and not obscured by the spinner arrows[Duration] [Period select] [New Price]— all three fields should be visibleinput[type="number"]elements in the admin forms — they should havepadding-right: 0applied via.wu-styling input[type="number"]Resolves #829