fix: replace toggle with checkbox for OOO note visibility

- Replace Switch with Checkbox for "show note publicly" option - Remove "OOO Message:" prefix from displayed notes on booking page - Update i18n text to "Show note on public booking page" - Remove unused ooo_message i18n key
calcom · CarinaWolli · Dec 11, 2025 · Nov 29, 2025 · Nov 29, 2025 · Nov 29, 2025
commit 83d35ab48d7b4bd18b1fbde30d20d6bfeb73c974
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
@@ -2994,8 +2994,7 @@
   "ooo_slots_returning": "<0>{{displayName}}</0> can take their meetings while they are away.",
   "ooo_slots_book_with": "Book {{displayName}}",
   "ooo_select_reason": "Select reason",
-  "ooo_message": "OOO Message",
-  "show_note_publicly_description": "Display your note to people viewing your booking page",
+  "show_note_publicly_description": "Show note on public booking page",
   "create_an_out_of_office": "Go Out of Office",
   "edit_an_out_of_office": "Edit Out of Office Entry",
   "submit_feedback": "Submit Feedback",

diff --git a/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx b/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx
@@ -52,8 +52,8 @@ export const OutOfOfficeInSlots = (props: IOutOfOfficeInSlotsProps) => {
           </p>
 
           {notes && showNotePublicly && (
-            <p className="text-subtle mt-2 max-h-[120px] overflow-y-auto break-words px-2 text-center text-sm">
-              {t("ooo_message")}: <span className="italic">{notes}</span>
+            <p className="text-subtle mt-2 max-h-[120px] overflow-y-auto break-words px-2 text-center text-sm italic">
+              {notes}
             </p>
           )}
 

diff --git a/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx b/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx
@@ -11,10 +11,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import classNames from "@calcom/ui/classNames";
-import { Badge, UpgradeTeamsBadge } from "@calcom/ui/components/badge";
+import { UpgradeTeamsBadge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
-import { DateRangePicker, TextArea, Input } from "@calcom/ui/components/form";
+import { DateRangePicker, TextArea, Input, Checkbox } from "@calcom/ui/components/form";
 import { Label } from "@calcom/ui/components/form";
 import { Select } from "@calcom/ui/components/form";
 import { Switch } from "@calcom/ui/components/form";
@@ -182,15 +182,13 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
   return (
     <Dialog
       open={openModal}
-      modal={false}
       onOpenChange={(open) => {
         if (!open) {
           closeModal();
         }
       }}>
       <DialogContent
         enableOverflow
-        preventCloseOnOutsideClick
         onOpenAutoFocus={(event) => {
           event.preventDefault();
         }}>
@@ -340,24 +338,7 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
 
             {/* Notes input */}
             <div className="mt-4">
-              <div className="flex items-center justify-between">
-                <p className="text-emphasis text-sm font-medium">{t("notes")}</p>
-                <Controller
-                  control={control}
-                  name="showNotePublicly"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="flex items-center space-x-2">
-                      {!value && <Badge variant="grayWithoutHover">{t("hidden")}</Badge>}
-                      <Switch
-                        data-testid="show-note-publicly-switch"
-                        checked={value ?? false}
-                        onCheckedChange={onChange}
-                        tooltip={t("show_note_publicly_description")}
-                      />
-                    </div>
-                  )}
-                />
-              </div>
+              <p className="text-emphasis text-sm font-medium">{t("notes")}</p>
               <TextArea
                 data-testid="notes_input"
                 className="border-subtle mt-2 h-10 w-full rounded-lg border px-2"
@@ -367,6 +348,24 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
                   setValue("notes", e?.target.value);
                 }}
               />
+              <Controller
+                control={control}
+                name="showNotePublicly"
+                render={({ field: { value, onChange } }) => (
+                  <div className="mt-2 flex items-center">
+                    <Checkbox
+                      data-testid="show-note-publicly-checkbox"
+                      checked={value ?? false}
+                      onCheckedChange={onChange}
+                    />
+                    <label
+                      className="text-emphasis ml-2 cursor-pointer text-sm"
+                      onClick={() => onChange(!value)}>
+                      {t("show_note_publicly_description")}
+                    </label>
+                  </div>
+                )}
+              />
             </div>
 
             <div className="bg-cal-muted my-4 rounded-xl p-5">
@@ -401,7 +400,7 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
                       onChange={(e) => setSearchRedirectMember(e.target.value)}
                       value={searchRedirectMember}
                     />
-                    <div className="scroll-bar bg-default mt-2 flex h-[150px] flex-col gap-0.5 overflow-y-scroll rounded-[10px] border p-2 pl-5">
+                    <div className="scroll-bar bg-default mt-2 flex h-[150px] flex-col gap-0.5 overflow-y-scroll rounded-[10px] border p-1">
                       {redirectToMemberListOptions
                         .filter((member) => member.value !== getValues("forUserId"))
                         .map((member) => (