Give the filter panel room past its last row

[Kisnov]

Pull Request

Summary

With a section expanded, the last row of the Sort & Filter panel sat against the bottom edge of the screen with only its top border showing — and stayed there once focused: pressing Down again moved nothing. Collapsed, everything fit and the panel looked fine.

Related Issues

• Related to [UI] Last row of a scrolling panel is cut off at the screen edge and cannot be scrolled into view #441

Type of Change

• Bug fix
• UI/UX update

Changes Made

The panel carried its bottom spacing as padding on the scrolling element:

.sortPanel {
    height: 100%;
    padding: 40px 32px;
    overflow-y: auto;
}

That padding never became scrollable room, so scrollTop was already at its limit while the last row was still under the edge. keepFocusInView does the right arithmetic — (row.bottom - view.bottom) + 24 — but the assignment was clamped and nothing moved. Hence a row that is focused, visibly cut off, and unreachable.

The browse rows already hit this and answered it, and the fix here is the same shape:

/* views/Browse/Browse.module.less */
/* Scroll past the last row. As box padding this would set a floor under the
   element height and push it past the bottom of the screen, so the room is
   scroll content instead. */
&::after {
    content: '';
    display: block;
    height: 60vh;
}

So the panel's bottom padding moves into an ::after of the same height, where it counts toward what can be scrolled. 40px rather than the browse rows' 60vh, since a side panel only needs to clear its own edge.

Platform

• Both / Shared code

Testing

• Tested on emulator
• Tested on physical device
• Manual testing completed
• Not tested

Manually tested by @Kisnov on a Samsung TU43DU7105KXXC running Tizen 9: with a section expanded, the last row sits clear of the screen edge and is reachable.

npm run lint:css clean (the legacy-CSS gate — ::after, content, display and height are all well under the floor). enact lint clean across packages/app/src.

Test Steps

1. Open a library and open the Sort & Filter panel.
2. Expand a section — Subtitle languages shows it best, being last.
3. Navigate down to the very last row: it should be fully visible, clear of the screen edge.
4. Collapse everything and confirm the panel still looks right with no stray gap at the bottom.
5. Check the top of the panel is unchanged — the 40px above the title should be as before.

Screenshots (if applicable)

Not attached — I cannot produce them. Needs the app on a real panel. @Kisnov has a before shot on #441 and can add an after.

Checklist

• Code builds successfully
• Code follows project style and conventions
• No unnecessary commented-out code
• No new warnings introduced — enact lint and lint:css both clean

Not included

A dozen or so other scrolling panels use the same padding-on-the-scroller shape — AccountModal, AddToCollectionModal, AddToPlaylistModal, IdentifyModal, NavBar .librariesGroup, Sidebar .navSection, SyncPlayDialog, Details .trackModalPanel among them. Whether each actually clips depends on how far its content overflows, so they want checking on a set one at a time rather than a blind sweep.

🤖 Generated with Claude Code

[github-actions]

✅ Build Successful

All platform builds and the test suite passed. You can download the artifacts below.

Platform	Status	Artifact
webOS	✅ Passed	Moonfin_webOS_*.ipk
Tizen Regular	✅ Passed	Moonfin_Tizen_Regular_*.wgt
Tizen Oblong	✅ Passed	Moonfin_Tizen_Oblong_*.wgt
Tizen Legacy	✅ Passed	Moonfin_Tizen_Legacy_*.wgt

Property	Value
Commit	5aa06bf
Workflow run	Build #296