fix(web): prevent Edit Tracker Name dialog overflow

[s0up4200]

Summary

• Use fixed height ScrollArea (h-[300px]) for vertical scrolling
• Switch domain rows from flexbox to CSS grid for proper width constraint
• Long domain names now truncate with ellipsis and show full URL on hover

Fixes #772

Summary by CodeRabbit

Release Notes

• Style

  • Improved Dashboard layout with fixed-height sections for better scrolling behavior in tracker breakdown and domain lists
  • Enhanced domain name display with text truncation and tooltips for improved readability

• Refactor

  • Unified domain selection and inclusion logic across customization, import, and export workflows

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

[coderabbitai]

Walkthrough

The Dashboard component's tracker customization interface has been refactored to use fixed-height scrollable containers and updated grid layouts for improved handling of long domain lists, replacing previous ScrollArea wrappers and adjusting domain row rendering logic.

Changes

Cohort / File(s)

Change Summary

Tracker Customization UI Layout web/src/pages/Dashboard.tsx

Updated TrackerBreakdownCard and customization dialog layouts to use fixed-height scrollable containers (h-[300px]), replaced ScrollArea wrappers, refactored grid layouts for domain rows (grid-cols-[auto_1fr_auto_auto] for multiple, grid-cols-[1fr] for single), updated domain display to use truncated text with title attributes, adapted checkbox logic for primary/secondary domains, and adjusted import/export UI to align with new panel structure.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Primary/secondary domain inclusion logic application across breakdown card, customization dialog, and import/export sections
• Grid layout responsiveness and conditional rendering adjustments
• Verification of domain row structure consistency across all affected UI regions

Possibly related PRs

• fix(dashboard): merge tracker customizations with duplicate displayName #751: Modifies TrackerBreakdownCard and customization/domain selection logic, merging duplicate displayNames alongside these layout changes.
• feat(tracker): add per-domain stats inclusion toggle for merged trackers #781: Adjusts per-domain includedInStats logic with scrollable domain lists and preservation of inclusion state across import/export flows.

Suggested labels

web

Poem

🐰 Long scrolls of trackers no longer make us weep,
Fixed heights now hold our domains nice and neat,
Grid layouts dance in responsive ballet,
Scrollable windows light the customizer's way! 📜✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.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 title accurately describes the main change: preventing Edit Tracker Name dialog overflow through the implementation of scrollable sections and layout adjustments.
Linked Issues check	✅ Passed	The PR implements all coding requirements from issue #772: adds fixed-height ScrollArea for vertical scrolling, changes layout to CSS grid, truncates long domain names with hover tooltips, and ensures dialog controls remain accessible.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the overflow issue in the Edit Tracker Name dialog as specified in issue #772; no unrelated modifications are present.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/edit-tracker-dialog-overflow-772

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

web/src/pages/Dashboard.tsx (1)

1976-2025: Edit Tracker Name dialog ScrollArea + grid layout look correct; consider tightening truncation behavior

The fixed-height ScrollArea plus min-h-0 flex-1/overflow-hidden wrapper should solve the vertical overflow and keep the footer controls accessible even with many domains. The grid layout (grid-cols-[auto_1fr_auto_auto]) and inclusion/primary logic also look consistent.

One small layout tweak to make truncation more reliable for very long domains in a grid context:

• Add min-w-0 to the text span so truncate can actually shrink within the 1fr column in all browsers:

-          <span className={`truncate${isPrimary ? " font-medium" : ""}`} title={domain}>{domain}</span>
+          <span
+            className={`truncate min-w-0${isPrimary ? " font-medium" : ""}`}
+            title={domain}
+          >
+            {domain}
+          </span>

This helps avoid horizontal overflow when domains are extremely long or the dialog is narrow.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2fad4e8 and b3111ec.

📒 Files selected for processing (1)

• web/src/pages/Dashboard.tsx (4 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

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.

📚 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/pages/Dashboard.tsx

🧬 Code graph analysis (1)

web/src/pages/Dashboard.tsx (3)

web/src/components/ui/label.tsx (1)

• Label (29-29)

web/src/components/ui/scroll-area.tsx (1)

• ScrollArea (61-61)

web/src/components/ui/badge.tsx (1)

• Badge (51-51)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run tests