fix(mobile): add border to cards for dark mode visibility

[xingzihai]

Fixes #2624

Summary

Add border to mobile card components to improve visibility in iOS dark mode.

Changes

• Added border border-border classes to BookmarkCard, HighlightCard, and GroupedList
• Matches web app card styling for consistency

Testing

• Verified on iOS device in dark mode

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 087650de-42a0-4c4d-9bcd-9258be9b71e4

📥 Commits

Reviewing files that changed from the base of the PR and between 53a4598 and 8d87cf2.

📒 Files selected for processing (3)

• apps/mobile/components/bookmarks/BookmarkCard.tsx
• apps/mobile/components/highlights/HighlightCard.tsx
• apps/mobile/components/ui/GroupedList.tsx

---

Walkthrough

Three mobile UI card components were updated to add explicit borders to their root containers: BookmarkCard, HighlightCard, and GroupedList. Each component's className was modified to include border border-border classes alongside existing styling.

Changes

Cohort / File(s)	Summary
Card UI Border Additions apps/mobile/components/bookmarks/BookmarkCard.tsx, apps/mobile/components/highlights/HighlightCard.tsx, apps/mobile/components/ui/GroupedList.tsx	Added explicit border border-border classes to root View styling in each card component.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• feat(mobile): proper handling for shared list permissions #2165: Modifies the same BookmarkCard.tsx file, altering the root View's styling/structure.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding borders to mobile card components to improve dark mode visibility on iOS.
Description check	✅ Passed	The description is directly related to the changeset, explaining the fix for issue #2624 and listing the specific components modified.
Linked Issues check	✅ Passed	The PR successfully addresses issue #2624 by adding visible borders to card components, which directly resolves the reported low contrast issue in iOS dark mode.
Out of Scope Changes check	✅ Passed	All changes are focused on adding borders to three card components as required by the linked issue, with no extraneous modifications.

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

---

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

[greptile-apps]

Greptile Summary

This PR adds border border-border Tailwind/NativeWind classes to three mobile card components (BookmarkCard, HighlightCard, and GroupedList) to improve their visibility in iOS dark mode, matching the existing web app card styling.

• The border color token is correctly defined in apps/mobile/tailwind.config.js and the border-border class is already widely used across other mobile components (e.g., BookmarkTextView, signin.tsx, CustomHeadersModal), so the change is consistent and well-supported.
• The fix is minimal and targeted — one line changed per file, with no risk of unintended side effects.
• Note: a few other bg-card containers scattered across settings screens (e.g., app/dashboard/(tabs)/(settings)/index.tsx, app/dashboard/settings/reader-settings.tsx) still lack the border, but they appear to be a separate concern and out of scope for this bug fix.

Confidence Score: 5/5

Safe to merge — minimal, well-scoped cosmetic fix with no logic changes.

All three changes are one-line additions of a class that is already used extensively elsewhere in the app. The border-border token is properly configured in the Tailwind theme and works correctly in both light and dark mode. No functional logic was touched.

No files require special attention.

Important Files Changed

Filename	Overview
apps/mobile/components/bookmarks/BookmarkCard.tsx	Added border border-border to the card's root View for dark mode visibility; single-line change, consistent with other components.
apps/mobile/components/highlights/HighlightCard.tsx	Added border border-border to the card's root View for dark mode visibility; single-line change, consistent with BookmarkCard.
apps/mobile/components/ui/GroupedList.tsx	Added border border-border to the GroupedSection container View for dark mode visibility; single-line change, consistent with card components.

_{Reviews (1): Last reviewed commit: "fix(mobile): add border to cards for dar..." | Re-trigger Greptile}