Fixing tooltip in kanban

[Khalzz]

Fixing positioning of the tooltip and background blur handling on the header of the kanban

closes #873

Summary by CodeRabbit

• UI Improvements
  • Updated modal stacking and header behavior for more consistent layering across screens.
  • Reduced the height of tooltip modals so they fit better on smaller viewports.
  • Refined the symptoms section into a more compact, horizontal layout with improved spacing and clearer condition indicators.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR fixes z-index stacking issues between a kanban header and tooltip modal by adjusting Tailwind z-index classes in AbsoluteModal and SectionHeader, and reduces modal tooltip max height from 90vh to 80vh. Separately, SymptomCard rendering is refactored into a compact row layout with filtered conditions, and the symptoms grid mapping is simplified.

Changes

Z-index and Modal Height Fix

Layer / File(s)	Summary
Backdrop and header stacking order absolute-modal.tsx, section-header.tsx	Changes backdrop z-index from z-[800] to z-800 and removes z-50 from the sticky SectionHeader wrapper class list.
Tooltip modal height reduction modal-tooltip.tsx	Reduces AbsoluteModal maxHeight from 90vh to 80vh in both the no-data and main rendering branches.

Symptoms Card Compact Layout

Layer / File(s)	Summary
Compact SymptomCard row symptoms-card.tsx	Refactors SymptomCard to derive a filtered conditions list and renders a compact horizontal row with updated icon, label, and count badge styling.
Symptoms grid wrapper symptoms-card.tsx	Updates responsive grid/column-span classes based on the reactive flag, removes the per-item wrapper div, and passes loading directly to SymptomCard.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: korutx

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The SymptomsCard refactor is unrelated to the kanban tooltip z-index fix and appears outside the issue scope.	Move the SymptomsCard changes into a separate PR unless they are required for the tooltip fix.

✅ 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 is concise and clearly refers to the kanban tooltip fix described by the changeset.
Linked Issues check	✅ Passed	SectionHeader’s z-index was lowered, which addresses the tooltip-over-header layering issue in #873.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 873-kanban-zindex

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

App preview image

The latest app preview image for this PR is ready.

• Immutable image: ghcr.io/microboxlabs/miot-app@sha256:e2a65f568376e8e88f17533bb9740f6f141b636b3c32344e622407cee0acf12f
• Moving tag: ghcr.io/microboxlabs/miot-app:pr-874
• SHA tag: ghcr.io/microboxlabs/miot-app:pr-874-sha-f14b775

[coderabbitai]

🧹 Nitpick comments (1)

turbo-repo/apps/app/src/features/task-forms/components/task-bento-form/components/side-data/symptoms-card.tsx (1)

47-55: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Mark SymptomCard props as read-only.

None of symptom, dict, loading are marked readonly, unlike SymptomsCard's props further down.

♻️ Suggested fix

 const SymptomCard = ({
   symptom,
   dict,
   loading = false,
 }: {
-  symptom: SymptomData;
-  dict: I18nRecord;
-  loading?: boolean;
+  readonly symptom: SymptomData;
+  readonly dict: I18nRecord;
+  readonly loading?: boolean;
 }) => {

As per path instructions, turbo-repo/apps/app/**/*.tsx: "Always mark React component props as read-only using Readonly<Props> wrapper."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@turbo-repo/apps/app/src/features/task-forms/components/task-bento-form/components/side-data/symptoms-card.tsx`
around lines 47 - 55, `SymptomCard` props are mutable and should match the repo
rule for React components. Update the `SymptomCard` signature to use a read-only
props type, mirroring the `SymptomsCard` pattern further down, so `symptom`,
`dict`, and `loading` are wrapped in `Readonly<Props>` (or an equivalent
read-only props alias) and the component no longer accepts mutable props.

Source: Path instructions

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@turbo-repo/apps/app/src/features/task-forms/components/task-bento-form/components/side-data/symptoms-card.tsx`:
- Around line 47-55: `SymptomCard` props are mutable and should match the repo
rule for React components. Update the `SymptomCard` signature to use a read-only
props type, mirroring the `SymptomsCard` pattern further down, so `symptom`,
`dict`, and `loading` are wrapped in `Readonly<Props>` (or an equivalent
read-only props alias) and the component no longer accepts mutable props.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8aca1077-00ce-45e5-ba7a-9bf972cb9502

📥 Commits

Reviewing files that changed from the base of the PR and between e45f321 and f14b775.

⛔ Files ignored due to path filters (1)

• turbo-repo/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (4)

• turbo-repo/apps/app/src/features/common/components/absolute-modal/absolute-modal.tsx
• turbo-repo/apps/app/src/features/layout/components/section-header/section-header.tsx
• turbo-repo/apps/app/src/features/shipping/components/modal-tooltip.tsx
• turbo-repo/apps/app/src/features/task-forms/components/task-bento-form/components/side-data/symptoms-card.tsx