From dc2b145843aeff8940ad2d395eda1b25a293c02e Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Wed, 7 Jun 2023 23:55:43 +0200
Subject: [PATCH] Show header layout in large views even if theres only one
 layout enable. Don't show toggle though. (#9398)

---
 .../bookings/Booker/components/Header.tsx     | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index 092b937baa..ef8e2bd4fa 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -32,7 +32,7 @@ export function Header({
     [setLayout]
   );
 
-  if (isMobile || !enabledLayouts || enabledLayouts.length <= 1) return null;
+  if (isMobile || !enabledLayouts) return null;
 
   // Only reason we create this component, is because it is used 3 times in this component,
   // and this way we can't forget to update one of the props in all places :)
@@ -42,6 +42,7 @@ export function Header({
 
   // In month view we only show the layout toggle.
   if (isMonthView) {
+    if (enabledLayouts.length <= 1) return null;
     return (
       <div className="fixed top-3 right-3 z-10">
         <LayoutToggleWithData />
@@ -73,22 +74,24 @@ export function Header({
           />
         </ButtonGroup>
       </div>
-      <div className="ml-auto flex gap-3">
-        <TimeFormatToggle />
-        <div className="fixed top-4 right-4">
-          <LayoutToggleWithData />
-        </div>
-        {/*
+      {enabledLayouts.length > 1 && (
+        <div className="ml-auto flex gap-3">
+          <TimeFormatToggle />
+          <div className="fixed top-4 right-4">
+            <LayoutToggleWithData />
+          </div>
+          {/*
           This second layout toggle is hidden, but needed to reserve the correct spot in the DIV
           for the fixed toggle above to fit into. If we wouldn't make it fixed in this view, the transition
           would be really weird, because the element is positioned fixed in the month view, and then
           when switching layouts wouldn't anymmore, causing it to animate from the center to the top right,
           while it actuall already was on place. That's why we have this element twice.
         */}
-        <div className="pointer-events-none opacity-0" aria-hidden>
-          <LayoutToggleWithData />
+          <div className="pointer-events-none opacity-0" aria-hidden>
+            <LayoutToggleWithData />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }