Event Type: Title not displayed in the mobile view (#7451)

* Event Type: Title not displayed in the mobile view

* Fix toggle not updating in UI

---------

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

apps/web/components/SettingsShell.tsx

@@ -46,7 +46,7 @@ export default function SettingsShell({
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <Shell {...rest}>
+    <Shell {...rest} hideHeadingOnMobile>
       <div className="sm:mx-auto">
         <NavTabs tabs={tabs} />
       </div>

apps/web/components/apps/App.tsx

@@ -366,7 +366,7 @@ export default function App(props: {
   dependencies?: string[];
 }) {
   return (
-    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic hideHeadingOnMobile heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}

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

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

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

@@ -57,7 +57,7 @@ export default function InstalledAppsLayout({
   }
 
   return (
-    <Shell {...rest}>
+    <Shell {...rest} hideHeadingOnMobile>
       <AppCategoryNavigation baseURL="/apps/installed" containerClassname="min-w-0 w-full">
         {children}
       </AppCategoryNavigation>

apps/web/components/ui/EditableHeading.tsx

@@ -16,8 +16,10 @@ const EditableHeading = function EditableHeading({
   const [isEditing, setIsEditing] = useState(false);
   const enableEditing = () => setIsEditing(true);
   return (
-    <div className="group relative cursor-pointer" onClick={enableEditing}>
-      <div className="flex items-center">
+    <div
+      className="group pointer-events-none relative truncate sm:pointer-events-auto"
+      onClick={enableEditing}>
+      <div className="flex cursor-pointer items-center">
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
           {!isEditing && isReady && (
@@ -29,7 +31,7 @@ const EditableHeading = function EditableHeading({
             value={value}
             required
             className={classNames(
-              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
+              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
             )}
             onFocus={(e) => {
               setIsEditing(true);

apps/web/pages/apps/categories/index.tsx

@@ -13,7 +13,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
   const { t, isLocaleReady } = useLocale();
 
   return (
-    <Shell isPublic large>
+    <Shell isPublic large hideHeadingOnMobile>
       <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/pages/availability/[schedule].tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -24,10 +25,15 @@ import {
   Tooltip,
   Dialog,
   DialogTrigger,
+  DropdownMenuSeparator,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownItem,
+  DropdownMenuTrigger,
   ConfirmationDialogContent,
   VerticalDivider,
 } from "@calcom/ui";
-import { Info, Plus, Trash } from "@calcom/ui/components/icon";
+import { Info, Plus, Trash, MoreHorizontal } from "@calcom/ui/components/icon";
 
 import { HttpError } from "@lib/core/http/error";
 
@@ -97,6 +103,7 @@ export default function Availability() {
 
   const { fromEventType } = router.query;
   const { timeFormat } = me.data || { timeFormat: null };
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const { data: schedule, isLoading } = trpc.viewer.availability.schedule.get.useQuery(
     { scheduleId },
     {
@@ -182,11 +189,8 @@ export default function Availability() {
       }
       CTA={
         <div className="flex items-center justify-end">
-          <div className="sm:hover:bg-subtle flex items-center rounded-md px-2">
-            <Skeleton
-              as={Label}
-              htmlFor="hiddenSwitch"
-              className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline">
+          <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
+            <Skeleton as={Label} htmlFor="hiddenSwitch" className="mt-2 cursor-pointer self-center pr-2 ">
               {t("set_to_default")}
             </Skeleton>
             <Switch
@@ -199,7 +203,7 @@ export default function Availability() {
             />
           </div>
 
-          <VerticalDivider />
+          <VerticalDivider className="hidden sm:inline" />
           <Dialog>
             <DialogTrigger asChild>
               <Button
@@ -207,6 +211,7 @@ export default function Availability() {
                 variant="icon"
                 color="destructive"
                 aria-label={t("delete")}
+                className="hidden sm:inline"
                 disabled={schedule?.isLastSchedule}
                 tooltip={t("requires_at_least_one_schedule")}
               />
@@ -223,8 +228,51 @@ export default function Availability() {
               {t("delete_schedule_description")}
             </ConfirmationDialogContent>
           </Dialog>
-
-          <VerticalDivider />
+          <VerticalDivider className="hidden sm:inline" />
+          <Dropdown>
+            <DropdownMenuTrigger asChild>
+              <Button className="sm:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent style={{ minWidth: "200px" }}>
+              <DropdownItem
+                type="button"
+                color="destructive"
+                StartIcon={Trash}
+                onClick={() => setDeleteDialogOpen(true)}>
+                {t("delete")}
+              </DropdownItem>
+              <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                <ConfirmationDialogContent
+                  isLoading={deleteMutation.isLoading}
+                  variety="danger"
+                  title={t("delete_schedule")}
+                  confirmBtnText={t("delete")}
+                  loadingText={t("delete")}
+                  onConfirm={() => {
+                    schedule !== undefined && deleteMutation.mutate({ scheduleId: schedule.id });
+                  }}>
+                  {t("delete_schedule_description")}
+                </ConfirmationDialogContent>
+              </Dialog>
+              <DropdownMenuSeparator />
+              <div className="flex h-9 flex-row items-center justify-between py-2 px-4 hover:bg-gray-100">
+                <Skeleton
+                  as={Label}
+                  htmlFor="hiddenSwitch"
+                  className="mt-2 cursor-pointer self-center pr-2 sm:inline">
+                  {t("set_to_default")}
+                </Skeleton>
+                <Switch
+                  id="hiddenSwitch"
+                  disabled={isLoading || schedule?.isDefault}
+                  checked={form.watch("isDefault")}
+                  onCheckedChange={(e) => {
+                    form.setValue("isDefault", e);
+                  }}
+                />
+              </div>
+            </DropdownMenuContent>
+          </Dropdown>
 
           <div className="border-default border-l-2" />
           <Button className="ml-4 lg:ml-0" type="submit" form="availability-form">

apps/web/pages/availability/index.tsx

@@ -111,7 +111,11 @@ export default function AvailabilityPage() {
   const { t } = useLocale();
   return (
     <div>
-      <Shell heading={t("availability")} subtitle={t("configure_availability")} CTA={<NewScheduleButton />}>
+      <Shell
+        heading={t("availability")}
+        hideHeadingOnMobile
+        subtitle={t("configure_availability")}
+        CTA={<NewScheduleButton />}>
         <WithQuery success={({ data }) => <AvailabilityList {...data} />} customLoader={<SkeletonLoader />} />
       </Shell>
     </div>

apps/web/pages/availability/troubleshoot.tsx

@@ -122,7 +122,7 @@ export default function Troubleshoot() {
   const { t } = useLocale();
   return (
     <div>
-      <Shell heading={t("troubleshoot")} subtitle={t("troubleshoot_description")}>
+      <Shell heading={t("troubleshoot")} hideHeadingOnMobile subtitle={t("troubleshoot_description")}>
         {!isLoading && data && <AvailabilityView user={data} />}
       </Shell>
     </div>

apps/web/pages/event-types/index.tsx

@@ -768,6 +768,7 @@ const EventTypesPage = () => {
       <Shell
         withoutSeo
         heading={t("event_types_page_title")}
+        hideHeadingOnMobile
         subtitle={t("event_types_page_subtitle")}
         CTA={<CTA />}>
         <WithQuery

apps/web/pages/insights/index.tsx

@@ -55,7 +55,7 @@ export default function InsightsPage() {
 
   return (
     <div>
-      <Shell>
+      <Shell hideHeadingOnMobile>
         <UpgradeTip
           title={t("make_informed_decisions")}
           description={t("make_informed_decisions_description")}

apps/web/pages/more.tsx

@@ -6,7 +6,7 @@ import PageWrapper from "@components/PageWrapper";
 export default function MorePage() {
   const { t } = useLocale();
   return (
-    <Shell>
+    <Shell hideHeadingOnMobile>
       <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/pages/teams/index.tsx

@@ -14,6 +14,7 @@ function Teams() {
   return (
     <Shell
       heading={t("teams")}
+      hideHeadingOnMobile
       subtitle={t("create_manage_teams_collaborative")}
       CTA={
         <Button

packages/app-store/routing-forms/components/FormActions.tsx

@@ -352,13 +352,21 @@ type FormActionProps<T> = {
   action: FormActionType;
   children?: React.ReactNode;
   render?: (props: { routingForm: RoutingForm | null; className?: string; label?: string }) => JSX.Element;
+  extraClassNames?: string;
 } & ButtonProps;
 
 export const FormAction = forwardRef(function FormAction<T extends typeof Button>(
   props: FormActionProps<T>,
   forwardedRef: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>
 ) {
-  const { action: actionName, routingForm, children, as: asFromElement, ...additionalProps } = props;
+  const {
+    action: actionName,
+    routingForm,
+    children,
+    as: asFromElement,
+    extraClassNames,
+    ...additionalProps
+  } = props;
   const { appUrl, _delete, toggle } = useContext(actionsCtx);
   const dropdownCtxValue = useContext(dropdownCtx);
   const dropdown = dropdownCtxValue?.dropdown;
@@ -419,11 +427,17 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
           return <></>;
         }
         return (
-          <div {...restProps} className="hover:bg-emphasis self-center rounded-md p-2">
+          <div
+            {...restProps}
+            className={classNames(
+              "sm:hover:bg-subtle self-center rounded-md p-2 hover:bg-gray-200",
+              extraClassNames
+            )}>
             <Switch
               checked={!routingForm.disabled}
               label={label}
               onCheckedChange={(checked) => toggle.onAction({ routingForm, checked })}
+              labelOnLeading
             />
           </div>
         );

packages/app-store/routing-forms/components/SingleForm.tsx

@@ -66,8 +66,10 @@ const Actions = ({
 
   return (
     <div className="flex items-center">
-      <FormAction className="self-center" data-testid="toggle-form" action="toggle" routingForm={form} />
-      <VerticalDivider />
+      <div className="hidden items-center sm:inline-flex">
+        <FormAction className="self-center" data-testid="toggle-form" action="toggle" routingForm={form} />
+        <VerticalDivider />
+      </div>
       <ButtonGroup combined containerProps={{ className: "hidden md:inline-flex items-center" }}>
         <Tooltip content={t("preview")}>
           <FormAction
@@ -186,7 +188,7 @@ const Actions = ({
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           ) : null}
-          <DropdownMenuSeparator />
+          <DropdownMenuSeparator className="hidden sm:block" />
           <FormAction
             action="_delete"
             routingForm={form}
@@ -196,6 +198,16 @@ const Actions = ({
             StartIcon={Trash}>
             {t("delete")}
           </FormAction>
+          <div className="block sm:hidden">
+            <DropdownMenuSeparator />
+            <FormAction
+              data-testid="toggle-form"
+              action="toggle"
+              routingForm={form}
+              label="Disable Form"
+              extraClassNames="hover:bg-subtle cursor-pointer rounded-[5px] pr-4"
+            />
+          </div>
         </FormActionsDropdown>
       </div>
       <VerticalDivider />
@@ -272,8 +284,8 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
             subtitle={form.description || ""}
             backPath={`/${appUrl}/forms`}
             CTA={<Actions form={form} mutation={mutation} />}>
-            <div className="-mx-4 px-4 sm:px-6 md:-mx-8 md:px-8">
-              <div className="flex flex-col items-center md:flex-row md:items-start">
+            <div className="-mx-4 mt-4 px-4 sm:px-6 md:-mx-8 md:mt-0 md:px-8">
+              <div className="flex flex-col items-center items-baseline md:flex-row md:items-start">
                 <div className="lg:min-w-72 lg:max-w-72 mb-6 md:mr-6">
                   <TextField
                     type="text"

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

@@ -253,7 +253,11 @@ export default function RoutingForms({
 }
 
 RoutingForms.getLayout = (page: React.ReactElement) => {
-  return <Shell withoutMain={true}>{page}</Shell>;
+  return (
+    <Shell withoutMain={true} hideHeadingOnMobile>
+      {page}
+    </Shell>
+  );
 };
 
 export const getServerSideProps = async function getServerSideProps(

packages/features/bookings/layout/BookingLayout.tsx

@@ -34,7 +34,7 @@ export default function BookingLayout({
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <Shell {...rest}>
+    <Shell {...rest} hideHeadingOnMobile>
       <div className="flex max-w-6xl flex-col">
         <div className="flex flex-col lg:flex-row">
           <HorizontalTabs tabs={tabs} />

packages/features/ee/teams/components/TeamListItem.tsx

@@ -105,7 +105,7 @@ export default function TeamListItem(props: Props) {
         alt="Team Logo"
         className="inline-flex justify-center"
       />
-      <div className="ms-3 inline-block">
+      <div className="ms-3 inline-block truncate">
         <span className="text-default text-sm font-bold">{team.name}</span>
         <span className="text-muted block text-xs">
           {team.slug ? `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}` : "Unpublished team"}

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

@@ -95,6 +95,7 @@ function WorkflowsPage() {
       heading={t("workflows")}
       title={t("workflows")}
       subtitle={t("workflows_to_automate_notifications")}
+      hideHeadingOnMobile
       CTA={
         query?.data?.profiles.length === 1 &&
         session.data?.hasValidLicense &&

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

@@ -263,6 +263,7 @@ function WorkflowPage() {
             </Button>
           </div>
         }
+        hideHeadingOnMobile
         heading={
           session.data?.hasValidLicense &&
           isAllDataLoaded && (

packages/features/settings/layouts/SettingsLayout.tsx

@@ -393,6 +393,7 @@ export default function SettingsLayout({
     <Shell
       withoutSeo={true}
       flexChildrenContainer
+      hideHeadingOnMobile
       {...rest}
       SidebarContainer={
         <>

packages/features/shell/Shell.tsx

@@ -196,6 +196,7 @@ type LayoutProps = {
   // Gives the ability to include actions to the right of the heading
   actions?: JSX.Element;
   smallHeading?: boolean;
+  hideHeadingOnMobile?: boolean;
 };
 
 const useBrandColors = () => {
@@ -796,8 +797,9 @@ export function ShellMain(props: LayoutProps) {
     <>
       <div
         className={classNames(
-          "flex items-center md:mt-0 md:mb-6",
-          props.smallHeading ? "lg:mb-7" : "lg:mb-8"
+          "flex items-center md:mb-6 md:mt-0",
+          props.smallHeading ? "lg:mb-7" : "lg:mb-8",
+          props.hideHeadingOnMobile ? "mb-0" : "mb-6"
         )}>
         {!!props.backPath && (
           <Button
@@ -813,14 +815,16 @@ export function ShellMain(props: LayoutProps) {
           />
         )}
         {props.heading && (
-          <header className={classNames(props.large && "py-8", "flex w-full max-w-full items-center")}>
+          <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("w-full ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
+            <div className={classNames("w-full truncate ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
               {props.heading && (
                 <h3
                   className={classNames(
-                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis hidden truncate text-xl font-semibold tracking-wide md:block xl:max-w-full",
-                    props.smallHeading ? "text-base" : "text-xl"
+                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis 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"
                   )}>
                   {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                 </h3>

packages/ui/components/form/switch/Switch.tsx

@@ -19,13 +19,14 @@ const Switch = (
     fitToHeight?: boolean;
     disabled?: boolean;
     tooltip?: string;
+    labelOnLeading?: boolean;
     classNames?: {
       container?: string;
       thumb?: string;
     };
   }
 ) => {
-  const { label, fitToHeight, classNames, ...primitiveProps } = props;
+  const { label, fitToHeight, classNames, labelOnLeading, ...primitiveProps } = props;
   const id = useId();
   const isChecked = props.checked || props.defaultChecked;
   return (
@@ -34,6 +35,7 @@ const Switch = (
         className={cx(
           "flex h-auto w-auto flex-row items-center",
           fitToHeight && "h-fit",
+          labelOnLeading && "flex-row-reverse",
           classNames?.container
         )}>
         <PrimitiveSwitch.Root
@@ -58,7 +60,8 @@ const Switch = (
             htmlFor={id}
             className={cx(
               "text-emphasis ms-2 align-text-top text-sm font-medium",
-              primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer "
+              primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer",
+              labelOnLeading && "flex-1"
             )}>
             {label}
           </Label.Root>