[#742] handle desktop search overflow properly (#801)

src/components/Menubar/DesktopMenubar.tsx

@@ -9,6 +9,7 @@ import { SharedMenubarProps } from './Menubar'
 import { NavigationControls } from './components/NavigationControls'
 import { SelectView } from './SelectView'
 import { UserMenu } from './UserMenu'
+import { useState } from 'react'
 
 export const DesktopMenubar: React.FC<SharedMenubarProps> = ({
   calendarRef,
@@ -33,6 +34,8 @@ export const DesktopMenubar: React.FC<SharedMenubarProps> = ({
   const { t } = useI18n()
   const theme = useTheme()
 
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false)
+
   return (
     <header
       className="menubar"
@@ -54,16 +57,23 @@ export const DesktopMenubar: React.FC<SharedMenubarProps> = ({
           <NavigationControls onNavigate={onNavigate} />
         </div>
 
-        <div className="menu-items">
+        {!isSearchExpanded && (
-          <div className="current-date-time">
+          <div className="menu-items">
-            <p>{dateLabel}</p>
+            <div className="current-date-time">
+              <p>{dateLabel}</p>
+            </div>
           </div>
-        </div>
+        )}
       </div>
 
       <div className="right-menu">
-        <div className="search-container">
+        <div
-          <SearchBar />
+          className="search-container"
+          style={{
+            minWidth: 0
+          }}
+        >
+          <SearchBar onToggleSearch={setIsSearchExpanded} />
         </div>
 
         <div className="menu-items">

src/components/Menubar/EventSearchBar.tsx

@@ -66,7 +66,7 @@ const SearchBar: React.FC<{
     md: '35vw',
     xl: '35vw',
     '@media (min-width: 2000px)': {
-      width: '55vw'
+      maxWidth: '55vw'
     }
   }
 
@@ -230,9 +230,9 @@ const SearchBar: React.FC<{
       <Box
         ref={containerRef}
         sx={{
-          margin: '0 auto',
           position: 'relative',
-          width: extended ? searchWidth : 'auto',
+          width: extended ? '100%' : 'auto',
+          maxWidth: searchWidth,
           transition: 'width 0.25s ease-out'
         }}
       >

src/components/Menubar/Menubar.styl

@@ -41,6 +41,7 @@
   height 60px
   min-height 60px
   background-color #fff
+  overflow hidden
 
   &--mobile
     position sticky
@@ -101,6 +102,9 @@
   display flex
   justify-content flex-end
   align-items center
+  flex 1
+  overflow hidden
+
 
 .current-date-time
   font-family Roboto
@@ -119,3 +123,6 @@ body.fullscreen-view .search-container
 
 .search-container
   width 100%
+  min-width 0
+  display flex
+  justify-content flex-end