From 142be70b893490b00ca7042c26cbac6b07b0281d Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Wed, 26 Oct 2022 20:59:01 +0530
Subject: [PATCH] fix: overflow text, ui bugs (#5071)

* fix: overflow text, ui bugs

* fix: merge conflict

* fix: availability buttons ui

* fix: mobile view added for /event-type header

* fix: dropdown closing bug on mobile

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .../v2/eventtype/AvailabilityTab.tsx          | 21 ++++++++++-------
 .../components/v2/eventtype/EventSetupTab.tsx |  4 ++--
 .../v2/eventtype/EventTypeSingleLayout.tsx    | 23 ++++++++++++++++---
 packages/app-store/_components/AppCard.tsx    |  4 ++--
 packages/ui/v2/core/Shell.tsx                 |  8 +++----
 5 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/apps/web/components/v2/eventtype/AvailabilityTab.tsx b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
index fd131f7afa..aa130bbca8 100644
--- a/apps/web/components/v2/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
@@ -129,37 +129,41 @@ export const AvailabilityTab = () => {
         />
       </div>
 
-      <div className="space-y-4 rounded border p-8 py-6 pt-2">
+      <div className="space-y-4 rounded border p-4 py-6 pt-2 md:p-8">
         <ol className="table border-collapse text-sm">
           {weekdayNames(i18n.language, 1, "long").map((day, index) => {
             const isAvailable = !!filterDays(index).length;
             return (
               <li key={day} className="my-6 flex border-transparent last:mb-2">
-                <span className={classNames("w-32 font-medium", !isAvailable && "text-gray-500 opacity-50")}>
+                <span
+                  className={classNames(
+                    "w-20 font-medium sm:w-32",
+                    !isAvailable && "text-gray-500 opacity-50"
+                  )}>
                   {day}
                 </span>
                 {isLoading ? (
                   <SkeletonText className="block h-5 w-60" />
                 ) : isAvailable ? (
-                  <div className="space-y-3">
+                  <div className="space-y-3 text-right">
                     {filterDays(index).map((dayRange, i) => (
                       <div key={i} className="flex items-center leading-4">
-                        <span className="w-28">{format(dayRange.startTime)}</span>
-                        <span className="">-</span>
+                        <span className="w-16 sm:w-28 sm:text-left">{format(dayRange.startTime)}</span>
+                        <span className="ml-4">-</span>
                         <div className="ml-6">{format(dayRange.endTime)}</div>
                       </div>
                     ))}
                   </div>
                 ) : (
-                  <span className="text-gray-500 opacity-50 ">{t("unavailable")}</span>
+                  <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
                 )}
               </li>
             );
           })}
         </ol>
         <hr />
-        <div className="flex justify-between">
-          <span className="flex items-center text-sm text-gray-600">
+        <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
+          <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
             <Icon.FiGlobe className="mr-2" />
             {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
           </span>
@@ -168,6 +172,7 @@ export const AvailabilityTab = () => {
             color="minimal"
             EndIcon={Icon.FiExternalLink}
             target="_blank"
+            className="justify-center border sm:border-0"
             rel="noopener noreferrer">
             {t("edit_availability")}
           </Button>
diff --git a/apps/web/components/v2/eventtype/EventSetupTab.tsx b/apps/web/components/v2/eventtype/EventSetupTab.tsx
index c97f1eda88..1a7eaf7e35 100644
--- a/apps/web/components/v2/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/v2/eventtype/EventSetupTab.tsx
@@ -132,14 +132,14 @@ export const EventSetupTab = (
               }
               return (
                 <li key={location.type} className="mb-2 rounded-md border border-neutral-300 py-1.5 px-2">
-                  <div className="flex justify-between">
+                  <div className="flex max-w-full justify-between">
                     <div key={index} className="flex flex-grow items-center">
                       <img
                         src={eventLocationType.iconUrl}
                         className="h-6 w-6"
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="text-sm ltr:ml-2 rtl:mr-2">
+                      <span className="truncate text-sm ltr:ml-2 rtl:mr-2">
                         {location[eventLocationType.defaultValueVariable] || eventLocationType.label}
                       </span>
                     </div>
diff --git a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
index 63e6f55622..1f7437fb59 100644
--- a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
@@ -23,6 +23,7 @@ import {
 } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/v2/core/Dialog";
+import Divider from "@calcom/ui/v2/core/Divider";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -172,11 +173,11 @@ function EventTypeSingleLayout({
       subtitle={eventType.description || ""}
       CTA={
         <div className="flex items-center justify-end">
-          <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
+          <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
             <Skeleton
               as={Label}
               htmlFor="hiddenSwitch"
-              className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline">
+              className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
               {t("hide_from_profile")}
             </Skeleton>
             <Switch
@@ -231,7 +232,7 @@ function EventTypeSingleLayout({
             />
           </ButtonGroup>
 
-          <VerticalDivider />
+          <VerticalDivider className="hidden lg:block" />
 
           <Dropdown>
             <DropdownMenuTrigger className="block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 lg:hidden">
@@ -264,6 +265,22 @@ function EventTypeSingleLayout({
                   {t("delete")}
                 </Button>
               </DropdownMenuItem>
+              <Divider />
+              <div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
+                <Skeleton
+                  as={Label}
+                  htmlFor="hiddenSwitch"
+                  className="mt-2 inline cursor-pointer self-center pr-2 sm:hidden">
+                  {t("hide_from_profile")}
+                </Skeleton>
+                <Switch
+                  id="hiddenSwitch"
+                  defaultChecked={formMethods.getValues("hidden")}
+                  onCheckedChange={(e) => {
+                    formMethods.setValue("hidden", e);
+                  }}
+                />
+              </div>
             </DropdownMenuContent>
           </Dropdown>
           <div className="border-l-2 border-gray-300" />
diff --git a/packages/app-store/_components/AppCard.tsx b/packages/app-store/_components/AppCard.tsx
index c1a1f1753a..515bf27965 100644
--- a/packages/app-store/_components/AppCard.tsx
+++ b/packages/app-store/_components/AppCard.tsx
@@ -26,8 +26,8 @@ export default function AppCard({
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
-    <div ref={animationRef} className="mb-4 mt-2 rounded-md border border-gray-200 p-8 text-sm">
-      <div className="flex w-full">
+    <div ref={animationRef} className="mb-4 mt-2 rounded-md border border-gray-200 p-4 text-sm sm:p-8">
+      <div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
         {/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
         <Link href={"/apps/" + app.slug}>
           <a className="mr-3 h-auto w-10 rounded-sm">
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index ef8eb8a473..6c25e8faf0 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -785,12 +785,12 @@ export function ShellMain(props: LayoutProps) {
           <header
             className={classNames(
               props.large && "py-8",
-              "mb-4 flex w-full items-start pt-4 pb-2 md:p-0 lg:mb-10"
+              "mb-4 flex w-full max-w-full items-center pt-4 md:p-0 lg:mb-10"
             )}>
             {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
             <div className="w-full ltr:mr-4 rtl:ml-4 sm:block">
               {props.heading && (
-                <h1 className="font-cal text-xl font-bold tracking-wide text-black">
+                <h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mb-1 truncate text-xl font-bold tracking-wide text-black xl:max-w-full">
                   {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                 </h1>
               )}
@@ -830,7 +830,7 @@ function MainContainer({
   const [sideContainerOpen, setSideContainerOpen] = props.drawerState || [false, noop];
 
   return (
-    <main className="relative z-0 flex flex-1 flex-col overflow-y-auto bg-white focus:outline-none ">
+    <main className="relative z-0 flex flex-1 flex-col overflow-y-auto bg-white focus:outline-none">
       {/* show top navigation for md and smaller (tablet and phones) */}
       {TopNavContainerProp}
       {/* The following is used for settings navigation on medium and smaller screens */}
@@ -844,7 +844,7 @@ function MainContainer({
         }}
       />
       {SettingsSidebarContainerProp}
-      <div className="px-4 py-2 lg:py-8 lg:px-12">
+      <div className="max-w-full px-4 py-2 lg:py-8 lg:px-12">
         <ErrorBoundary>
           {/* add padding to top for mobile when App Bar is fixed */}
           <div className="pt-14 sm:hidden" />