fix: risk matrix probability tooltip hidden by sidebar

[tchoumi313]

z-index increased to prevent tooltip from being hidden by the sidebar

For long descriptions, the user may make used of | to format the descriptions

      name: Likely
      description: |
        The source of risk is likely to achieve its intended objective according to one of the operating procedures envisaged.
        
        This assessment considers:
        - Historical attack patterns and threat actor capabilities
        - Current security controls and their effectiveness
        - Industry-specific threat landscape and emerging vulnerabilities
        
        The likelihood of the scenario is significant and requires immediate attention from security teams.
      

Summary by CodeRabbit

• Style
  • Enhanced tooltip visibility and improved hover interactions in the Risk Matrix for a better user experience.
  • Optimized popup container sizing and responsive layout behavior for correct display across all screen sizes and device types.
  • Improved text formatting for axis labels and descriptions with enhanced whitespace handling and line-break behavior for better readability.

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

[coderabbitai]

Walkthrough

The RiskMatrix component receives styling and layout refinements targeting tooltip and popup visibility. Tooltip components now have elevated z-index layering, popup containers employ responsive width constraints with a compact calculation approach, and axis header descriptions gain improved whitespace handling for better text rendering.

Changes

Cohort / File(s)	Summary
Tooltip and Popup Styling frontend/src/lib/components/RiskMatrix/RiskMatrix.svelte	Tooltip components assigned zIndex="9999" for elevated layering; popup content containers transition from max-w-xl shadow styling to w-max with calculated responsive width max-width: min(28rem, 90vw); header/axis container z-index styling removed for simpler layout.
Axis Header Whitespace Handling frontend/src/lib/components/RiskMatrix/RiskMatrix.svelte	X-axis and y-axis header description paragraphs updated with whitespace-pre-line class and break-words for improved text rendering; data-testid attributes preserved.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify z-index layering (9999 vs other stacked elements) doesn't cause unintended visual conflicts
• Confirm responsive width calculation min(28rem, 90vw) displays correctly across different viewport sizes
• Test tooltip and popup positioning to ensure proper alignment after class changes
• Validate whitespace-pre-line behavior renders axis descriptions as intended

Possibly related PRs

• fix: update old popup to ToolTip (skeleton v3) #2138 — Modifies tooltip and popup handling in RiskMatrix.svelte with data-popup/popupTarget removal and Tooltip component switches.
• fix: add tooltip for inverted matrices #2156 — Adjusts RiskMatrix.svelte tooltip content sizing and axis header rendering behavior.

Suggested reviewers

• ab-smith
• eric-intuitem

Poem

🐰 A rabbit hops through matrix rows,
Where tooltips now sit high—oh how it glows!
With z-index peaks and widths so wise,
The headers breathe with newline sighs,
Layout blooms where shadows once stood! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: risk matrix probability tooltip hidden by sidebar & jira #CA-1411' directly and specifically describes the main change: fixing a z-index issue to prevent tooltips from being hidden by the sidebar, referencing the relevant issue ticket.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch CA-1408-honor-line-breaks-in-risk-matrix-hover

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8d170cc and 2c7e60c.

📒 Files selected for processing (1)

• frontend/src/lib/components/RiskMatrix/RiskMatrix.svelte (2 hunks)

⏰ 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). (7)

• GitHub Check: build_community_frontend
• GitHub Check: build_enterprise_frontend
• GitHub Check: startup-functional-test (3.12)
• GitHub Check: startup-docker-compose-test
• GitHub Check: enterprise-startup-docker-compose-test
• GitHub Check: enterprise-startup-functional-test (3.12)
• GitHub Check: Analyze (python)

🔇 Additional comments (1)

frontend/src/lib/components/RiskMatrix/RiskMatrix.svelte (1)

117-144: Verify color contrast and review zIndex implementation.

The tooltip enhancements address the PR objectives, but several aspects require attention:

1. zIndex prop usage: The zIndex="9999" appears to be a valid prop for the Tooltip component in skeleton-svelte. Verify that this successfully elevates tooltips above the sidebar in testing, as the original z-20 class has been replaced entirely.

2. Text color contrast: Line 127 sets color: {xHeader.hexcolor ?? '#FFFFFF'} on a black card background (bg-black). Since hexcolor represents cell background colors, using background colors as text may result in poor readability. Test the contrast with typical hexcolor values used in your risk matrix. Consider using white text consistently or deriving readable text colors based on background luminance.

3. Max-width reduction: The change from max-w-xl (36rem) to min(28rem, 90vw) narrows tooltip width to 28rem. Verify this accommodates your longest multi-line descriptions without awkward wrapping.

4. Whitespace handling: The whitespace-pre-line break-words classes correctly preserve line breaks and prevent overflow per the PR objectives. ✓

5. Consistency: Both x-axis (lines 117-144) and y-axis (lines 184-212) tooltips are identically updated, maintaining consistent behavior. ✓

---

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