feat: add conditional todesktop class to html element (#22985)

- Add applyToDesktopClass function to detect window.todesktop
- Conditionally add 'todesktop' class to html element when ToDesktop environment is detected
- Follow existing pattern used by applyTheme function for client-side script injection
- Enable desktop-specific CSS styling that already exists in globals.css

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Eunjae Lee <hey@eunjae.dev>

apps/web/pages/_applyThemeForDocument.ts

@@ -57,3 +57,22 @@ export const applyTheme = function () {
     console.error("Error applying theme:", e);
   }
 };
+
+// ToDesktop class application function - will be stringified and injected. So, it must not use anything from the closure
+export const applyToDesktopClass = function () {
+  try {
+    const onReady = () => {
+      if (typeof window !== "undefined" && window.todesktop && document.documentElement) {
+        document.documentElement.classList.add("todesktop");
+      } else if (document.documentElement) {
+        return;
+      } else {
+        requestAnimationFrame(onReady);
+      }
+    };
+
+    requestAnimationFrame(onReady);
+  } catch (e) {
+    console.error("Error applying todesktop class:", e);
+  }
+};

apps/web/pages/_document.tsx

@@ -5,7 +5,7 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 
-import { applyTheme } from "./_applyThemeForDocument";
+import { applyTheme, applyToDesktopClass } from "./_applyThemeForDocument";
 
 type Props = Record<string, unknown> & DocumentProps & { newLocale: string };
 
@@ -50,6 +50,7 @@ class MyDocument extends Document<Props> {
               __html: `
               window.calNewLocale = "${newLocale}";
               (${applyTheme.toString()})();
+              (${applyToDesktopClass.toString()})();
             `,
             }}
           />