Fix: Rounded corners being clipped as rectangles in CompactLibraryTabBar

[sdkahal]

Description

Fixed a UI issue where the CompactLibraryTabBar (narrow/portrait mode) displayed rectangular sharp edges instead of rounded corners during horizontal scrolling.

The root cause was the incorrect order of Modifiers in the tab container. By applying .horizontalScroll() before .clip(), the scrolling viewport overrode the rounded shape, causing a "cut-off" look at the edges. I have reordered the Modifiers to apply .clip() and .background() before .horizontalScroll(), ensuring the capsule shape remains intact regardless of the scroll position.

Recording

before

now

Type of Change

• Bug fix
• Performance / stability improvement
• Compatibility improvements
• Other (requires prior approval)

Checklist

• If I have access to #code-changes, I have discussed this change there and it has been green-lighted. If I do not have access, I have still provided clear context in this PR. If I skip both, I accept that this change may face delays in review, may not be reviewed at all, or may be closed.
• This change aligns with the current project scope (core functionality, stability, or performance). If not, it has been explicitly approved beforehand.
• I have attached a recording of the change.
• I have read and agree to the contribution guidelines in CONTRIBUTING.md.

---

Summary by cubic

Fixes rounded corners being clipped as rectangles in the CompactLibraryTabBar during horizontal scrolling in compact/portrait mode. Reorders modifiers to apply clip and background before horizontalScroll, preserving the capsule shape while scrolling.

^{Written for commit 3c71df0. Summary will update on new commits.}

Summary by CodeRabbit

• Bug Fixes
  • Fixed visual rendering of the library tab bar scrolling behavior to properly display with background and clipping effects.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ccfc0e9a-0e1b-4923-b475-483a784f9bf5

📥 Commits

Reviewing files that changed from the base of the PR and between 03d7145 and 3c71df0.

📒 Files selected for processing (1)

• app/src/main/java/app/gamenative/ui/screen/library/components/LibraryTabBar.kt

---

📝 Walkthrough

Walkthrough

A modifier order change in LibraryTabBar's compact tab strip: horizontalScroll(scrollState) is reordered within the Row's modifier chain to apply after visual modifiers (clip, background) instead of before them, altering scroll-clipping interaction behavior.

Changes

Cohort / File(s)	Summary
Scroll Modifier Reordering app/src/main/java/app/gamenative/ui/screen/library/components/LibraryTabBar.kt	Reordered horizontalScroll(scrollState) modifier to apply after clipping and background modifiers in the Row's modifier chain, changing how scrolling interacts with the visual rendering pipeline.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Fixed tab bar and flash of login page when opening #691: Modifies scroll behavior in the same LibraryTabBar component with related scrollState and auto-centering changes.

Poem

🐰 A scroll, a clip, and modifiers dance,
Reordered now—a rendering prance!
Before was back, but now moves ahead,
Through layers of style, our scroll finds its thread. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fix: reordering modifiers to prevent rounded corners from being clipped as rectangles in the CompactLibraryTabBar component.
Description check	✅ Passed	The description covers all required sections: detailed problem explanation, visual recording comparison, bug fix classification, and completed checklist items.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[cubic-dev-ai]

No issues found across 1 file