chore: removed props.hideHeadingOnMobile (#19208)

* removed props.hideHeadingOnMobile

* made sure CTA works

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

@@ -12,8 +12,7 @@ export function ShellMainAppDir(props: LayoutProps) {
         <div
           className={classNames(
             "flex items-center md:mb-6 md:mt-0",
-            props.smallHeading ? "lg:mb-7" : "lg:mb-8",
-            props.hideHeadingOnMobile ? "mb-0" : "mb-6"
+            props.smallHeading ? "lg:mb-7" : "lg:mb-8"
           )}>
           {!!props.backPath && <ShellMainAppDirBackButton backPath={props.backPath} />}
           {props.heading && (
@@ -21,13 +20,15 @@ export function ShellMainAppDir(props: LayoutProps) {
               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("w-full truncate ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
+                className={classNames(
+                  "hidden w-full truncate ltr:mr-4 rtl:ml-4 md:block",
+                  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",
-                      props.smallHeading ? "text-base" : "text-xl",
-                      props.hideHeadingOnMobile && "hidden"
+                      props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {props.heading}
                   </h3>

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

@@ -2,7 +2,7 @@ import Shell from "@calcom/features/shell/Shell";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <Shell hideHeadingOnMobile withoutSeo={true} withoutMain={true}>
+    <Shell withoutSeo={true} withoutMain={true}>
       {children}
     </Shell>
   );

apps/web/app/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -722,7 +722,6 @@ export default function SettingsLayoutAppDirClient({
     <Shell
       withoutSeo={true}
       flexChildrenContainer
-      hideHeadingOnMobile
       {...rest}
       SidebarContainer={
         <SidebarContainerElement

apps/web/components/apps/App.tsx

@@ -12,7 +12,7 @@ const ShellHeading = () => {
 
 export default function WrappedApp(props: AppPageProps) {
   return (
-    <Shell smallHeading isPublic hideHeadingOnMobile heading={<ShellHeading />} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
       {props.licenseRequired ? (
         <LicenseRequired>
           <AppPage {...props} />

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -21,7 +21,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
 
   if (session.status === "loading") return <></>;
   return (
-    <Shell {...rest} actions={actions?.("block")} hideHeadingOnMobile>
+    <Shell {...rest} actions={actions?.("block")}>
       <div className="flex flex-col xl:flex-row">
         <main className="w-full">
           {emptyStore ? (

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -9,11 +9,7 @@ export default function InstalledAppsLayout({
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <Shell
-      {...rest}
-      title="Installed Apps"
-      description="Manage your installed apps or change settings"
-      hideHeadingOnMobile>
+    <Shell {...rest} title="Installed Apps" description="Manage your installed apps or change settings">
       <AppCategoryNavigation baseURL="/apps/installed" containerClassname="min-w-0 w-full">
         {children}
       </AppCategoryNavigation>

apps/web/modules/apps/categories/categories-view.tsx

@@ -15,13 +15,7 @@ export default function Apps({ categories }: PageProps) {
   const { t, isLocaleReady } = useLocale();
 
   return (
-    <Shell
-      isPublic
-      large
-      hideHeadingOnMobile
-      title={t("app_store")}
-      description={t("app_store_description")}
-      withoutSeo>
+    <Shell isPublic large title={t("app_store")} description={t("app_store_description")} withoutSeo>
       <div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
         <Link
           href="/apps"

apps/web/modules/more/more-page-view.tsx

@@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 export default function MorePage() {
   const { t } = useLocale();
   return (
-    <Shell hideHeadingOnMobile withoutSeo={true}>
+    <Shell withoutSeo={true}>
       <div className="max-w-screen-lg">
         <MobileNavigationMoreItems />
         <p className="text-subtle mt-6 text-xs leading-tight md:hidden">{t("more_page_footer")}</p>

apps/web/modules/settings/platform/billing/billing-view.tsx

@@ -56,12 +56,7 @@ export default function PlatformBillingUpgrade() {
   if (!isPlatformUser)
     return (
       <div>
-        <Shell
-          withoutSeo={true}
-          isPlatformUser={true}
-          hideHeadingOnMobile
-          withoutMain={false}
-          SidebarContainer={<></>}>
+        <Shell withoutSeo={true} isPlatformUser={true} withoutMain={false} SidebarContainer={<></>}>
           <NoPlatformPlan />
         </Shell>
       </div>
@@ -72,7 +67,6 @@ export default function PlatformBillingUpgrade() {
       <Shell
         heading={t("platform_billing")}
         title={t("platform_billing")}
-        hideHeadingOnMobile
         withoutMain={false}
         withoutSeo={true}
         subtitle={t("manage_billing_description")}

apps/web/modules/settings/platform/managed-users/managed-users-view.tsx

@@ -74,7 +74,6 @@ const ManagedUsersView = () => {
       subtitle={t("managed_users_description")}
       title={t("managed_users")}
       description={t("managed_users_description")}
-      hideHeadingOnMobile
       withoutMain={false}
       isPlatformUser={true}>
       <Skeleton as={Label} loadingClassName="w-16" title={t("select_oAuth_client")}>

apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx

@@ -127,12 +127,7 @@ export default function EditOAuthClient() {
 
   return (
     <div>
-      <Shell
-        withoutSeo={true}
-        isPlatformUser={true}
-        hideHeadingOnMobile
-        withoutMain={false}
-        SidebarContainer={<></>}>
+      <Shell withoutSeo={true} isPlatformUser={true} withoutMain={false} SidebarContainer={<></>}>
         <NoPlatformPlan />
       </Shell>
     </div>

apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx

@@ -126,12 +126,7 @@ export default function EditOAuthClientWebhooks() {
 
   return (
     <div>
-      <Shell
-        withoutSeo={true}
-        isPlatformUser={true}
-        hideHeadingOnMobile
-        withoutMain={false}
-        SidebarContainer={<></>}>
+      <Shell withoutSeo={true} isPlatformUser={true} withoutMain={false} SidebarContainer={<></>}>
         <NoPlatformPlan />
       </Shell>
     </div>

apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx

@@ -85,12 +85,7 @@ export default function CreateOAuthClient() {
 
   return (
     <div>
-      <Shell
-        withoutSeo={true}
-        isPlatformUser={true}
-        hideHeadingOnMobile
-        withoutMain={false}
-        SidebarContainer={<></>}>
+      <Shell withoutSeo={true} isPlatformUser={true} withoutMain={false} SidebarContainer={<></>}>
         <NoPlatformPlan />
       </Shell>
     </div>

apps/web/modules/settings/platform/platform-view.tsx

@@ -71,7 +71,6 @@ export default function Platform() {
             subtitle={t("platform_description")}
             title={t("platform")}
             description={t("platform_description")}
-            hideHeadingOnMobile
             withoutSeo={true}
             withoutMain={false}
             isPlatformUser={true}>
@@ -89,7 +88,6 @@ export default function Platform() {
         // we want to hide org banner and have different sidebar tabs for platform clients
         // hence we pass isPlatformUser boolean as prop
         isPlatformUser={true}
-        hideHeadingOnMobile
         withoutMain={false}
         withoutSeo={true}
         SidebarContainer={<></>}>

apps/web/modules/upgrade/upgrade-view.tsx

@@ -29,7 +29,7 @@ export default function UpgradePage() {
   const doesUserHaveOrgToUpgrade = trpc.viewer.organizations.checkIfOrgNeedsUpgrade.useQuery();
 
   return (
-    <Shell hideHeadingOnMobile withoutSeo={true}>
+    <Shell withoutSeo={true}>
       <div className="max-w-screen-lg">
         {doesUserHaveOrgToUpgrade.data ? (
           <EmptyScreen

packages/app-store/routing-forms/pages/forms/[...appPages].tsx

@@ -346,11 +346,7 @@ const ShellContainer = ({ page }: { page: React.ReactElement }) => {
   const { t } = useLocale();
 
   return (
-    <Shell
-      title={t("routing_forms")}
-      description={t("routing_forms_description")}
-      withoutMain={true}
-      hideHeadingOnMobile>
+    <Shell title={t("routing_forms")} description={t("routing_forms_description")} withoutMain={true}>
       {page}
     </Shell>
   );

packages/features/ee/platform/pages/settings/members.tsx

@@ -42,7 +42,7 @@ const PlatformMembersView = () => {
   if (!isPlatformUser)
     return (
       <div>
-        <Shell isPlatformUser={true} hideHeadingOnMobile withoutMain={false} SidebarContainer={<></>}>
+        <Shell isPlatformUser={true} withoutMain={false} SidebarContainer={<></>}>
           <NoPlatformPlan />
         </Shell>
       </div>
@@ -65,7 +65,6 @@ const PlatformMembersView = () => {
       }
       title={t("platform_members")}
       subtitle={t("platform_members_description")}
-      hideHeadingOnMobile
       withoutMain={false}
       isPlatformUser={true}>
       <div>{!isPending && canLoggedInUserSeeMembers && <UserListTable />}</div>

packages/features/ee/workflows/pages/index.tsx

@@ -70,7 +70,6 @@ function WorkflowsPage({ filteredList }: PageProps) {
           subtitle={t("workflows_to_automate_notifications")}
           title={t("workflows")}
           description={t("workflows_to_automate_notifications")}
-          hideHeadingOnMobile
           CTA={
             session.data?.hasValidLicense ? (
               <CreateButtonWithTeamsList

packages/features/ee/workflows/pages/workflow.tsx

@@ -320,7 +320,6 @@ function WorkflowPage({
                 </div>
               )
             }
-            hideHeadingOnMobile
             heading={
               isAllDataLoaded && (
                 <div className="flex">

packages/features/shell/Shell.tsx

@@ -96,7 +96,6 @@ export type LayoutProps = {
   beforeCTAactions?: JSX.Element;
   afterHeading?: ReactNode;
   smallHeading?: boolean;
-  hideHeadingOnMobile?: boolean;
   isPlatformUser?: boolean;
 };
 
@@ -145,9 +144,8 @@ export function ShellMain(props: LayoutProps) {
       {(props.heading || !!props.backPath) && (
         <div
           className={classNames(
-            "flex items-center md:mb-6 md:mt-0",
-            props.smallHeading ? "lg:mb-7" : "lg:mb-8",
-            props.hideHeadingOnMobile ? "mb-0" : "mb-6"
+            "hidden items-center md:mb-6 md:mt-0 md:flex",
+            props.smallHeading ? "lg:mb-7" : "lg:mb-8"
           )}>
           {!!props.backPath && (
             <Button
@@ -173,8 +171,7 @@ export function ShellMain(props: LayoutProps) {
                   <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",
-                      props.smallHeading ? "text-base" : "text-xl",
-                      props.hideHeadingOnMobile && "hidden"
+                      props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                   </h3>
@@ -239,7 +236,7 @@ function MainContainer({
     <main className="bg-default relative z-0 flex-1 focus:outline-none">
       {/* show top navigation for md and smaller (tablet and phones) */}
       {TopNavContainerProp}
-      <div className="max-w-full px-2 py-4 lg:px-6">
+      <div className="max-w-full p-2 sm:py-4 lg:px-6">
         <ErrorBoundary>
           {!props.withoutMain ? <ShellMain {...props}>{props.children}</ShellMain> : props.children}
         </ErrorBoundary>