Fix ColorPicker not showing up and Auto theme not working (#7626)

apps/web/components/Embed.tsx

@@ -669,8 +669,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   embedUrl: string;
 }) => {
   const { t } = useLocale();
+
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+
   const s = (href: string) => {
     const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
     const [a, b] = href.split("=");
@@ -809,7 +812,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl" className="p-0.5" type="creation">
+    <DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
       <div className="flex">
         <div className="flex w-1/3 flex-col bg-gray-50 p-8">
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
@@ -960,6 +963,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Button Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -979,6 +984,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Text Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -1060,6 +1067,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         <div className="mb-2 pt-2">{palette.title}</div>
                         <div className="w-full">
                           <ColorPicker
+                            popoverAlign="start"
+                            container={dialogContentRef?.current ?? undefined}
                             defaultValue="#000000"
                             onChange={(color) => {
                               addToPalette({

packages/lib/hooks/useTheme.tsx

@@ -6,12 +6,10 @@ import type { Maybe } from "@calcom/trpc/server";
 
 // makes sure the ui doesn't flash
 export default function useTheme(theme?: Maybe<string>) {
-  let currentTheme: Maybe<string> = theme || "system";
-
   const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
   const embedTheme = useEmbedTheme();
   // Embed UI configuration takes more precedence over App Configuration
-  currentTheme = embedTheme || theme;
+  const currentTheme = embedTheme || theme || "system";
 
   useEffect(() => {
     if (currentTheme !== activeTheme && typeof currentTheme === "string") {

packages/ui/components/form/color-picker/colorpicker.tsx

@@ -7,6 +7,8 @@ import { fallBackHex, isValidHexCode } from "@calcom/lib/CustomBranding";
 export type ColorPickerProps = {
   defaultValue: string;
   onChange: (text: string) => void;
+  container?: HTMLElement;
+  popoverAlign?: React.ComponentProps<typeof Popover.Content>["align"];
 };
 
 const ColorPicker = (props: ColorPickerProps) => {
@@ -16,7 +18,7 @@ const ColorPicker = (props: ColorPickerProps) => {
   const [color, setColor] = useState(init);
 
   return (
-    <div className=" mt-1 flex items-center justify-center">
+    <div className="mt-1 flex items-center justify-center">
       <Popover.Root>
         <div className="flex items-center rounded-l-md border border-r-0 border-gray-300 p-1.5">
           <Popover.Trigger asChild>
@@ -27,8 +29,8 @@ const ColorPicker = (props: ColorPickerProps) => {
             />
           </Popover.Trigger>
         </div>
-        <Popover.Portal>
-          <Popover.Content align="center" sideOffset={10}>
+        <Popover.Portal container={props.container}>
+          <Popover.Content align={props.popoverAlign ?? "center"} sideOffset={10}>
             <HexColorPicker
               color={color}
               className="!h-32 !w-32"