From bdf39357043d496857fb8d930e6df9efee5a37eb Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 14 Apr 2025 09:48:34 +0530
Subject: [PATCH] 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>
---
 .../(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx  | 10 +++-------
 packages/features/shell/Shell.tsx                      |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
index cc9c5bb3c9..c9936bdb83 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
+++ b/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>
                 )}
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 8f966c03ad..b9efaf5014 100644
--- a/packages/features/shell/Shell.tsx
+++ b/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}