fix: [M3-10430] - Focus Indicator on MUI Toggle

[shagufa-akamai]

Description 📝

Prevent focus indicator on MUI Toggle from being cut off and misaligned

Changes 🔄

List any change(s) relevant to the reviewer.

• update css on toggle.tsx file

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

Include a screenshot <img src="" /> or video <video src="" /> of the change.

🔒 Use the Mask Sensitive Data setting for security.

💡 For changes requiring multiple steps to validate, prefer a video for clarity.

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

• Not special setup needed. Just focus the toggle button with keyboard to replicate the issue.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[cpathipa]

@shagufa-akamai Change set is missing, here is the documentation for changeset.

[mjac0bs]

Congrats on your first Cloud Manager PR, @shagufa-akamai! 🎉

Thanks for the fix. The focus indicator is a complete circle now.

You can disregard the test failure in CI - looks like unrelated flake. Looks good to merge once CI passes again - rekicking off CI now.

Screen.Recording.2025-10-15.at.10.01.07.AM.mov

Unrelated to this PR: while testing, I noticed that our focus color in light mode for a disabled toggle isn't ideal because it's not fully visible (blends into the white paper background). This isn't a problem in dark mode. Would you mind creating a follow-up M3 ticket to look into fixing this? (If you don't have proper access yet, just let me know, and I can.)

[shagufa-akamai]

Congrats on your first Cloud Manager PR, @shagufa-akamai! 🎉

Thanks for the fix. The focus indicator is a complete circle now.

You can disregard the test failure in CI - looks like unrelated flake. Looks good to merge once CI passes again - rekicking off CI now.

Screen.Recording.2025-10-15.at.10.01.07.AM.mov

Unrelated to this PR: while testing, I noticed that our focus color in light mode for a disabled toggle isn't ideal because it's not fully visible (blends into the white paper background). This isn't a problem in dark mode. Would you mind creating a follow-up M3 ticket to look into fixing this? (If you don't have proper access yet, just let me know, and I can.)

Thanks @mjac0bs.

I have created a ticket for the new issue.
https://jira.linode.com/browse/M3-10680

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #3 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	840 Passing	11 Skipped	43m 52s

Details

Failing Tests
	Spec	Test
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » can create and delete object storage buckets

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts"

[bnussman-akamai]

Nice fix! 🎉