Hide Event Type from profile toggle shifts

[aaronang]

Issue Summary

When hiding an Event Type from profile, the toggle shifts position.

Steps to Reproduce

1. Go to any Event Types.
2. Open any Event Type for editing.
3. Toggle the Event Type to show/hide from profile in the top-right corner.

Actual Results

https://github.com/calcom/cal.com/assets/7579804/00695d29-95b0-4090-b0b2-6e0fe09e5ec7

Expected Results

The toggle's position shouldn't shift to the left:

https://github.com/calcom/cal.com/assets/7579804/a6305e66-167d-4614-8a50-c9971b226301

P.S. I don't have the dev environment set up, which is why I'm creating an issue instead. The fix should be a simple change from px-2 to pl-2 for that specific toggle component.

[dosubot[bot]]

To address the issue of the toggle shifting position when hiding an Event Type from the profile, it seems like the problem is related to the CSS styling of the toggle component. Since there's no direct mention of px-2 or pl-2 in the snippet you provided, the issue might be stemming from elsewhere in your CSS or from the internal implementation of the SettingsToggle component.

If the goal is to change the padding from px-2 (padding on both left and right sides) to pl-2 (padding on the left side only) for alignment purposes, you'll need to locate where these padding classes are applied. This could be within the SettingsToggle component's implementation or a related CSS file. Once found, you can adjust the class from px-2 to pl-2.

In case you can't directly modify the SettingsToggle component, you can override the CSS in your project's stylesheet as follows:

/* Override CSS in your project's stylesheet */
.settings-toggle-classname {
  padding-left: 0.5rem; /* Equivalent to pl-2 in Tailwind CSS */
  padding-right: 0; /* Remove right padding */
}

Make sure to replace .settings-toggle-classname with the actual class name or selector targeting the SettingsToggle component. This approach assumes you have the ability to modify the CSS affecting the toggle component.

Keep in mind that several factors could be influencing the toggle's position, including CSS classes applied to parent containers, conditional rendering and styling, and external CSS or global styles. If you need further assistance or clarification, feel free to ask.

Details

Sources

• packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx
• packages/ui/components/form/switch/SettingsToggle.tsx

About Dosu This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.