fix: prevent game cards from overflowing grid on hover

[Wiwok]

When submitting this pull request, I confirm the following (please check the boxes):

• I have read the Hydra documentation.
• I have checked that there are no duplicate pull requests related to this request.
• I have considered, and confirm that this submission is valuable to others.
• I accept that this submission may not be used and the pull request may be closed at the discretion of the maintainers.

Fill in the PR content:
This PR fixes a small visual glitch in the library when hovering over games. Games in the corners or on the edges of the grid would overflow past the grid boundaries. I fixed this by adding a small padding to the library component, allowing the hover effect to scale normally without clipping.

Before:

After:

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[greptile-apps]

Greptile Summary

This PR fixes a visual glitch where game cards in the corners and edges of the library grid were clipped by the scroll container boundary when the hover-scale transform fired. The fix uses the standard CSS padding-plus-negative-margin technique to give the transform visual breathing room without disturbing the layout.

• Adds padding: 4px to __games-scroll so the overflow boundary is pushed outward before any scaled card reaches it, and applies margin: -4px to cancel the layout shift the padding would otherwise introduce.
• The fix is limited to one SCSS block and has no impact on JS, component logic, or other style rules.

Confidence Score: 4/5

Safe to merge; the change is a two-line CSS-only tweak with clear before/after screenshots.

The fix is minimal and well-understood. The only open item is the inline 4px literal used twice without a named variable, which is a style issue rather than a functional defect. No logic, layout algorithm, or component behaviour is materially changed.

No files require special attention beyond the single magic-number style note in library.scss.

Important Files Changed

Filename	Overview
src/renderer/src/pages/library/library.scss	Adds padding: 4px and margin: -4px to __games-scroll to give hover-scale transforms room before the overflow boundary clips them; the inline 4px literal is a magic number per the repo's named-constant rule.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["__content\n(overflow: hidden, flex column)"] --> B["__games-scroll\n(overflow-y: auto, flex: 1)\n+ padding: 4px\n+ margin: -4px"]
    B --> C["__games-grid\n(CSS Grid)"]
    C --> D["Game Card"]
    D -->|"hover: transform scale"| E{"Scale fits within\n__games-scroll padding?"}
    E -->|"YES — 4 px room on all sides"| F["✅ Card scales without clipping"]
    E -->|"NO — before this fix"| G["❌ Card overflows grid boundary"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A["__content\n(overflow: hidden, flex column)"] --> B["__games-scroll\n(overflow-y: auto, flex: 1)\n+ padding: 4px\n+ margin: -4px"]
    B --> C["__games-grid\n(CSS Grid)"]
    C --> D["Game Card"]
    D -->|"hover: transform scale"| E{"Scale fits within\n__games-scroll padding?"}
    E -->|"YES — 4 px room on all sides"| F["✅ Card scales without clipping"]
    E -->|"NO — before this fix"| G["❌ Card overflows grid boundary"]

Loading

_{Reviews (1): Last reviewed commit: "Fixed library game card hover effect" | Re-trigger Greptile}