fix: Make event type title visible in mobile view (#20670)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: benny@cal.com <benny@cal.com>

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx

@@ -19,22 +19,18 @@ export function ShellMainAppDir(props: LayoutProps) {
             <header
               className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
               {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
-              <div
-                className={classNames(
-                  "hidden w-full truncate ltr:mr-4 rtl:ml-4 md:block",
-                  props.headerClassName
-                )}>
+              <div className={classNames("w-full truncate ltr:mr-4 rtl:ml-4", props.headerClassName)}>
                 {props.heading && (
                   <h3
                     className={classNames(
-                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
+                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 truncate text-lg font-semibold tracking-wide sm:text-xl xl:max-w-full",
                       props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {props.heading}
                   </h3>
                 )}
                 {props.subtitle && (
-                  <p className="text-default hidden text-sm md:block" data-testid="subtitle">
+                  <p className="text-default text-sm" data-testid="subtitle">
                     {props.subtitle}
                   </p>
                 )}

packages/features/shell/Shell.tsx

@@ -158,7 +158,7 @@ export function ShellMain(props: LayoutProps) {
                 {props.heading && (
                   <h3
                     className={classNames(
-                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 hidden truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
+                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 truncate text-lg font-semibold tracking-wide sm:text-xl xl:max-w-full",
                       props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {!isLocaleReady ? <SkeletonText invisible /> : props.heading}