fix(web): use fixed heights for mobile torrent cards

[jabloink]

resolves #805

thoughts?

Summary by CodeRabbit

• Refactor

  • Optimized torrent card rendering performance for smoother list interactions

• UI Improvements

  • Refined card layout spacing across view modes
  • Enhanced tag display with better overflow handling in compact views

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR refactors the virtualized TorrentCardsMobile component from dynamic height measurement to fixed heights per view mode, adds explicit height constraints to multiple layout sections, and removes the measureElement ref binding to address iOS scrolling stutter performance issues.

Changes

Cohort / File(s)	Change Summary
TorrentCardsMobile virtualization refactoring web/src/components/torrents/TorrentCardsMobile.tsx	Replaces dynamic estimateSize with per-view-mode fixed heights (ultra-compact, compact, normal); removes measureElement dynamic measurement; applies explicit height styles to item containers; adds overflow-hidden and max-h-4 constraints to tracker title and tags areas; restructures DOM with fragments and height utilities (h-10).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Virtualization logic: Review the new fixed-height estimation strategy against each view mode and verify it handles edge cases (especially "normal" mode where heights can vary)
• Height application: Confirm that explicit height: virtualItem.size styling on item containers correctly replaces the removed measureElement ref binding without introducing layout shifts
• Overflow constraints: Validate that max-h-4 truncation on tags and tracker sections doesn't unintentionally hide critical content in any view mode
• iOS compatibility: Verify that removal of measureElement resolves the scrolling stutter without regressing smooth scrolling behavior on other platforms

Possibly related PRs

• feat(ui): add dense view mode for compact table display #643: Adjusts persisted mobile view modes for TorrentCardsMobile; related since the fixed height estimation now depends on accurate view mode tracking.

Suggested labels

web, torrent, bugfix

Poem

🐰 Static heights hop where measurements stumbled,
iOS scrolling stutters no longer rumbled,
Fixed sizes bloom in view mode disguise,
Smooth scrolling—at last—before our eyes! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the primary change: replacing dynamic height measurement with fixed heights for mobile torrent cards, which directly addresses the iOS scrolling issue.
Linked Issues check	✅ Passed	The PR implements the core solution from issue #805 by removing measureElement and applying fixed heights to resolve iOS scrolling stuttering, though the normal view height variation issue remains partially unresolved.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to resolving the iOS scrolling issue through virtualization refinements and height constraint adjustments in the mobile torrent cards component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[s0up4200]

Sorry I missed this. This is great, and seems to solve both the stuttering and the overlaps 👍

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

web/src/components/torrents/TorrentCardsMobile.tsx (1)

1432-1443: Observation: Aggressive remeasurement code may be redundant now.

With fixed heights replacing dynamic measurement, the multiple virtualizer.measure() calls (Lines 1436-1440) may no longer be necessary since there's nothing to re-measure. Consider simplifying this effect in a follow-up to reduce unnecessary work, though it's harmless to keep for now.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e9fcbda and 9298a40.

📒 Files selected for processing (1)

• web/src/components/torrents/TorrentCardsMobile.tsx (5 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-11-25T11:39:54.748Z

Learnt from: s0up4200
Repo: autobrr/qui PR: 637
File: web/src/pages/Dashboard.tsx:805-831
Timestamp: 2025-11-25T11:39:54.748Z
Learning: In web/src/pages/Dashboard.tsx, the TrackerIconImage component intentionally receives displayDomain (incognito-mapped name) instead of the real domain in incognito mode. This causes icon lookups to fail and show only fallback letters, which is desired behavior for privacy - hiding both tracker names and icons when incognito mode is enabled.

Applied to files:

• web/src/components/torrents/TorrentCardsMobile.tsx

🔇 Additional comments (4)

web/src/components/torrents/TorrentCardsMobile.tsx (4)

734-756: LGTM! Fixed heights for title and tracker sections.

The h-10 class properly constrains the 2-line clamped title, and h-4 fits the single-line tracker info. These explicit heights ensure consistent card dimensions for the virtualizer, addressing the iOS scrolling stutter caused by dynamic measurement.

---

882-892: Acceptable trade-off: Tags constrained to single row.

The overflow-hidden max-h-4 ensures consistent card heights by limiting visible tags to approximately one row. Tags exceeding this will be clipped, which is a reasonable compromise for fixing iOS scroll performance. Consider adding a visual indicator (e.g., "+N more") if users report confusion about hidden tags.

---

1841-1869: Core fix: Explicit height replaces dynamic measurement.

Setting height: virtualItem.size directly on the wrapper (instead of relying on measureElement ref) is the key change that resolves the iOS scrolling stutter. The virtualizer now uses the fixed estimateSize values without runtime DOM measurements that were causing reflow during scroll.

---

1315-1325: Fixed heights replace dynamic measurement to resolve iOS scrolling stutter.

The fixed estimateSize values (32/86/204px) correctly resolve iOS scrolling performance issues. These heights account for the gap between cards: 4px paddingBottom for ultra-compact and 8px for other modes (line 1852).

Heights breakdown:

• ultra-compact (32px): py-1 padding + content
• compact (86px): p-2 padding + multi-line content
• normal (204px): p-4 padding + full card layout

The getItemKey implementation with hash-index uniqueness and useCallback dependency on [torrents] is correct per TanStack Virtual best practices.

[jabloink]

Sorry I missed this. This is great, and seems to solve both the stuttering and the overlaps 👍

awesome
also no rush ever, here to help 🫡

[s0up4200]

👍