[2.x] fix(core): DetailedDropdownItem check and option icons overlap in phone dropdown menus

[karl-bullock]

Fixes #4820

What / why

On phone-width viewports, dropdown menus built from DetailedDropdownItem render the active row's check icon and the row's own option icon crammed together in the left gutter. The visible case is flarum-subscriptions' follow menu, where the check and the star land on top of each other, but any consumer of the component hits it. Desktop renders the same menu correctly.

Root cause

The phone treatment in Dropdown.less assumes one icon per menu row: &.hasIcon { padding-left: 50px; } indents the row and .Button-icon { margin-left: -30px; } pulls the icon back into the gutter. .Button-icon there is a descendant selector, and DetailedDropdownItem renders two .Button-icons (the check inside its 16px DetailedDropdownItem-checkIcon column and the option icon inside its 25px content grid column), so both icons get pulled 30px left and collide. DetailedDropdownItem.less has no phone rules to compensate.

Fix

Scope the gutter treatment away from this component with a phone block in DetailedDropdownItem.less: reset the icons' margin-left to 0 and the row's padding-left to the normal 20px. The menu row is display: flex at all widths, so the component's own columns then lay the row out exactly like desktop: check column, option icon, label, with the icons of active and inactive rows aligned. The selector out-specifies the phone rules in Dropdown.less, so import order does not matter, and single-icon menu items are untouched.

I left the issue's "related polish" point (the phone active-row highlight never applying to these rows because the li never gets the active class) out of this PR to keep it minimal; happy to follow up on that separately if wanted.

Testing

Reproduced on a clean 2.x-dev install with flarum-subscriptions, headless Chromium driven over CDP at 390x844: logged in, followed a discussion, opened the subscription menu. Before the change the "Following" row's check and star icons overlap (bounding boxes at x=35 and x=45, both 16px wide); after it the check sits at x=20 and the option icon at x=45, matching the option-icon column of the inactive rows, and the menu visually matches the desktop layout. Desktop is unaffected (the block is inside @media @phone).