Fix ModeToggle Tooltip Misalignment

[nileshpahari]

Proposed change

Fixes the misalignment of the tooltip, which is currently pointing to the SignIn button (when not logged in) and Profile Icon (when logged in) rather than the ModeToggle button.

Resolves #2711

Files changed:

frontend/src/components/ModeToggle.tsx

Fix:

Adding placement="bottom-end" to the Tooltip solves the issue and improves clarity.

Checklist

• I read and followed the contributing guidelines
• I ran make check-test locally and all tests passed
• I used AI for code, documentation, or tests in this PR

[coderabbitai]

Walkthrough

Updated tooltip positioning in the ModeToggle component by adding an explicit placement="bottom-end" prop to fix tooltip alignment. The tooltip content and behavior remain unchanged; only the positioning configuration and code formatting were modified.

Changes

Cohort / File(s)	Summary
Tooltip positioning adjustment frontend/src/components/ModeToggle.tsx	Added explicit placement="bottom-end" prop to Tooltip component to fix misalignment issue where tooltip was pointing to the wrong corner. Code formatting updated for multiline structure.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file modification with straightforward prop addition
• No complex logic changes or behavioral modifications
• Positioning-only adjustment to address alignment issue

Suggested reviewers

• kasya
• arkid15r

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR addresses issue #2711's tooltip alignment requirement by adding placement="bottom-end" to fix misalignment; however, the color mismatch requirement (dark theme = light background, light theme = dark background) is not addressed in this PR.	Implement tooltip color switching based on theme to ensure proper contrast: white background in dark mode and black background in light mode as specified in issue #2711.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change—fixing ModeToggle tooltip misalignment—which directly corresponds to the primary objective in the changeset.
Out of Scope Changes check	✅ Passed	The PR only modifies the ModeToggle.tsx file to add the placement prop to the Tooltip component, which is directly in scope with the stated objective of fixing tooltip misalignment.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly explains the issue being fixed (tooltip misalignment), identifies the affected file, and describes the specific solution applied (adding placement="bottom-end" to the Tooltip 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.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

frontend/src/components/ModuleForm.tsx (1)

278-292: Better surfacing of suggestion errors; consider whether to expose raw error text.

Using setError in the catch block gives users clear feedback when fetching suggestions fails and is consistent with the existing error state handling in this component, so the behavioral change looks good.

One thing to consider: err.message (from Apollo/GraphQL) can contain low-level or internal details that you might not want to show directly to end users. You may want to keep the console/log message detailed while presenting a friendlier, more generic message in the UI, depending on your error-handling policy.

Based on learnings, this continues to rely on native HTML required validation for the form as expected and only adds contextual feedback for the async suggestions flow.

frontend/src/components/ModeToggle.tsx (1)

24-28: Tooltip placement change aligns with misalignment fix scope.

Adding placement="bottom-end" (with showArrow) should help the tooltip align more precisely with the mode toggle button while keeping content and accessibility unchanged. This looks appropriate for resolving the positioning part of #2711.

If you intend this PR to fully close that issue, note that the tooltip color/contrast behavior described there still appears to rely on the default Tooltip styling and may need a follow-up tweak.

Please double‑check in both logged‑in and logged‑out states that the tooltip points to the ModeToggle itself (and not the Sign In/Profile controls) across common viewport widths.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72341f0 and b956103.

📒 Files selected for processing (3)

• frontend/src/app/api/auth/[...nextauth]/route.ts (2 hunks)
• frontend/src/components/ModeToggle.tsx (1 hunks)
• frontend/src/components/ModuleForm.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📚 Learning: 2025-08-10T11:08:47.258Z

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/src/app/api/auth/[...nextauth]/route.ts:13-25
Timestamp: 2025-08-10T11:08:47.258Z
Learning: In the OWASP Nest codebase (frontend/src/app/api/auth/[...nextauth]/route.ts), input validation and string trimming for authentication-related queries like `isProjectLeader` and `isMentor` are handled in the backend rather than the frontend. The backend is responsible for sanitizing and validating input parameters.

Applied to files:

• frontend/src/app/api/auth/[...nextauth]/route.ts

📚 Learning: 2025-07-12T17:14:28.536Z

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/src/app/mentorship/programs/[programKey]/edit/page.tsx:90-128
Timestamp: 2025-07-12T17:14:28.536Z
Learning: Both ProgramForm (programCard.tsx) and ModuleForm (mainmoduleCard.tsx) components already implement HTML validation using the `required` attribute on form fields. The browser's native validation prevents form submission and displays error messages when required fields are empty, eliminating the need for additional JavaScript validation before GraphQL mutations.

Applied to files:

• frontend/src/components/ModuleForm.tsx

📚 Learning: 2025-09-17T02:42:41.928Z

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 2288
File: frontend/src/components/ActionButton.tsx:0-0
Timestamp: 2025-09-17T02:42:41.928Z
Learning: In frontend/src/components/ActionButton.tsx, the user Rajgupta36 intentionally changed text-blue-600 to text-[#1D7BD7] to align the text color with the border color (#1D7BD7) for visual consistency, prioritizing design alignment over theme tokens.

Applied to files:

• frontend/src/components/ModeToggle.tsx

🔇 Additional comments (2)

frontend/src/app/api/auth/[...nextauth]/route.ts (2)

20-23: More informative project‑leader error propagation looks good.

Including the original err.message in the thrown Error makes failures in checkIfProjectLeader easier to debug while preserving the existing behavior of failing the JWT callback on query errors.

---

36-39: Mentor‑status error messaging is now consistent with leader check.

Same improvement here: the new error text includes the original cause, which should help when diagnosing mentor‑status lookup issues, with no change to control flow.

[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

[kasya]

@nileshpahari thanks for updating this! 👍🏼