From 7488f29dc96de37107d8b0b11190e19559d7c2d8 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 11 Oct 2021 10:34:43 +0100
Subject: [PATCH] fixed event-type layout (#898)

* fixed event-type layout

* added props.centered to shell for centered layouts
---
 components/Shell.tsx         | 9 ++++-----
 pages/event-types/[type].tsx | 3 ++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 34c49c69..5f631cc7 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -60,9 +60,10 @@ function useRedirectToLoginIfUnauthenticated() {
 }
 
 export default function Shell(props: {
+  centered?: boolean;
   title?: string;
   heading: ReactNode;
-  subtitle: string;
+  subtitle?: ReactNode;
   children: ReactNode;
   CTA?: ReactNode;
 }) {
@@ -122,7 +123,7 @@ export default function Shell(props: {
     <>
       <HeadSeo
         title={pageTitle ?? "Cal.com"}
-        description={props.subtitle}
+        description={props.subtitle ? props.subtitle?.toString() : ""}
         nextSeoProps={{
           nofollow: true,
           noindex: true,
@@ -133,10 +134,8 @@ export default function Shell(props: {
       </div>
 
       <div className="h-screen flex overflow-hidden bg-gray-100">
-        {/* Static sidebar for desktop */}
         <div className="hidden md:flex md:flex-shrink-0">
           <div className="flex flex-col w-56">
-            {/* Sidebar component, swap this element with another sidebar if you like */}
             <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
               <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
                 <Link href="/event-types">
@@ -199,7 +198,7 @@ export default function Shell(props: {
                 </div>
               </div>
             </nav>
-            <div className="py-8">
+            <div className={classNames(props.centered && "md:max-w-5xl mx-auto", "py-8")}>
               <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
                 <div className="mb-8 w-full">
                   <h1 className="font-cal text-xl font-bold text-gray-900 tracking-wide mb-1">
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index 2a8dd71d..8bc35e22 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -322,9 +322,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
   return (
     <div>
       <Shell
+        centered
         title={`${eventType.title} | Event Type`}
         heading={
-          <div className="relative group" onClick={() => setEditIcon(false)}>
+          <div className="relative group -mb-2" onClick={() => setEditIcon(false)}>
             <input
               ref={titleRef}
               type="text"