fix: toggle alligment (#4361)

apps/web/components/v2/eventtype/EventAdvancedTab.tsx

@@ -123,6 +123,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         <div className="flex space-x-3 ">
           <Switch
             checked={customInputs.length > 0}
+            fitToHeight={true}
             onCheckedChange={(e) => {
               if (e && customInputs.length === 0) {
                 // Push a placeholders
@@ -134,7 +135,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               }
             }}
           />
-          <div className="relative top-2 flex flex-col">
+          <div className="flex flex-col">
             <Label className="text-sm font-semibold leading-none text-black">{t("additional_inputs")}</Label>
             <p className="-mt-2 text-sm leading-normal text-gray-600">{t("additional_input_description")}</p>
           </div>
@@ -178,8 +179,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               checked={value}
               onCheckedChange={(e) => onChange(e)}
               disabled={seatsEnabled}
+              fitToHeight={true}
             />
-            <div className="relative top-4 flex flex-col">
+            <div className="flex flex-col">
               <Label className="text-sm font-semibold leading-none text-black">
                 {t("requires_confirmation")}
               </Label>
@@ -199,11 +201,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
           <div className="flex space-x-3 ">
             <Switch
               name="disableGuests"
+              fitToHeight={true}
               checked={value}
               onCheckedChange={(e) => onChange(e)}
               disabled={seatsEnabled}
             />
-            <div className="relative top-2 flex flex-col">
+            <div className="flex flex-col">
               <Label className="text-sm font-semibold leading-none text-black">{t("disable_guests")}</Label>
               <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_guests_description")}</p>
             </div>
@@ -218,8 +221,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         defaultValue={eventType.hideCalendarNotes}
         render={({ field: { value, onChange } }) => (
           <div className="flex space-x-3 ">
-            <Switch name="hideCalendarNotes" checked={value} onCheckedChange={(e) => onChange(e)} />
-            <div className="relative top-4 flex flex-col">
+            <Switch
+              name="hideCalendarNotes"
+              fitToHeight={true}
+              checked={value}
+              onCheckedChange={(e) => onChange(e)}
+            />
+            <div className="flex flex-col">
               <Label className="text-sm font-semibold leading-none text-black">{t("disable_notes")}</Label>
               <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_notes_description")}</p>
             </div>
@@ -236,13 +244,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
             <div className="flex space-x-3 ">
               <Switch
                 name="hashedLinkCheck"
+                fitToHeight={true}
                 defaultChecked={!!value}
                 onCheckedChange={(e) => {
                   setHashedLinkVisible(e);
                   onChange(e ? hashedUrl : undefined);
                 }}
               />
-              <div className="relative top-2 flex flex-col">
+              <div className="flex flex-col">
                 <Label className="text-sm font-semibold leading-none text-black">{t("private_link")}</Label>
                 <p className="-mt-2 text-sm leading-normal text-gray-600">{t("private_link_description")}</p>
               </div>

packages/ui/v2/core/Switch.tsx

@@ -11,13 +11,14 @@ const Switch = (
     thumbProps?: {
       className?: string;
     };
+    fitToHeight?: boolean;
   }
 ) => {
   const { label, ...primitiveProps } = props;
   const id = useId();
 
   return (
-    <div className="flex h-auto w-auto flex-row items-center">
+    <div className={classNames("flex h-auto w-auto flex-row items-center", props.fitToHeight && "h-fit")}>
       <PrimitiveSwitch.Root
         className={classNames(
           props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300",