Fix a few issues with modals

[VilppeRiskidev]

• Stop auto-focusing the close button to prevent displaying the tooltip by default when a modal is opened.
• Add missing padding to login modal
• Add max. length to service account nickname input field

[codecov]

Codecov Report

❌ Patch coverage is 0% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 9.88%. Comparing base (41d8862) to head (3fa8e52).

Files with missing lines	Patch %	Lines
...kages/cyberstorm/src/newComponents/Modal/Modal.tsx	0.00%	7 Missing ⚠️
...eams/team/tabs/ServiceAccounts/ServiceAccounts.tsx	0.00%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##           master   #1596      +/-   ##
=========================================
- Coverage    9.88%   9.88%   -0.01%     
=========================================
  Files         308     308              
  Lines       22502   22512      +10     
  Branches      404     404              
=========================================
  Hits         2225    2225              
- Misses      20277   20287      +10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Walkthrough

This PR introduces styling adjustments and UX improvements across multiple components. It adds padding to the navigation login container, defines new CSS classes for a nickname input field with a max-length indicator, enforces a 32-character client-side limit on the nickname input with corresponding helper text in the ServiceAccounts form, and modifies Modal focus behavior to move focus to the modal content container instead of the first default focusable element.

Possibly related PRs

• Add package management tools #1507: Modifies the same Modal.tsx file to add focus management and adjust the trigger prop behavior—related at the code level through shared component changes.

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 (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "Fix a few issues with modals" is directly related to the changeset. The pull request addresses three modal-related fixes: modal focus management (Modal.tsx), padding for the login modal (Navigation.css), and input constraints for the service account nickname field within a modal context (ServiceAccounts components). The title accurately captures the general category and intent of these changes at a high level.
Description Check	✅ Passed	The description clearly maps to the changeset and is directly related. It accurately lists the three substantive changes: preventing auto-focus of the close button (Modal.tsx), adding padding to the login modal (Navigation.css), and adding a max length constraint to the service account nickname input (ServiceAccounts components). The description provides sufficient context for understanding what was changed and why.

✨ 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 qa-findings-modal-fix

---

📜 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 41d8862 and 3fa8e52.

📒 Files selected for processing (4)

• apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.css (1 hunks)
• apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.css (1 hunks)
• apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx (2 hunks)
• packages/cyberstorm/src/newComponents/Modal/Modal.tsx (3 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). (1)

• GitHub Check: Generate visual diffs

🔇 Additional comments (4)

apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.css (1)

143-143: LGTM!

Clean padding addition that addresses the missing padding issue in the login modal.

packages/cyberstorm/src/newComponents/Modal/Modal.tsx (2)

195-195: Ref initialization looks good.

Properly typed for the content container.

---

256-262: Verify keyboard navigation and screen reader behavior.

The focus management prevents the close button tooltip from appearing immediately, which addresses the PR objective. However, ensure that:

• Users can still tab to interactive elements after the modal opens
• Screen readers properly announce the modal content
• Focus trap still works correctly when cycling through focusable elements

Test the following scenarios:

1. Open a modal and press Tab - verify focus moves to the first interactive element
2. Test with a screen reader to confirm proper modal announcement
3. Tab through all focusable elements and verify focus trap cycles correctly

apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.css (1)

41-51: LGTM!

Clean styling addition for the nickname input container and max-length indicator. Consistent use of design tokens and appropriate layout.

---

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