Merge pull request #3608 from JoinColony/fix/3470-colony-picker-height-adjustment

fix: make colony switcher the same height as sidebar

Author: Nortsova

src/components/v5/frame/PageLayout/PageLayout.tsx

@@ -50,7 +50,7 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
         <section ref={topContentContainerRef}>{topContent}</section>
         <div className="flex h-[calc(100vh-var(--top-content-height))] flex-row">
           <section
-            className={clsx('md:py-4 md:pl-4', {
+            className={clsx('relative md:py-4 md:pl-4', {
               'sm:py-4 sm:pl-4': enableMobileAndDesktopLayoutBreakpoints,
             })}
           >

src/components/v5/shared/Navigation/ColonySwitcher/ColonySwitcher.tsx

@@ -38,10 +38,10 @@ const ColonySwitcher: React.FC<ColonySwitcherProps> = ({
 
   const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
     usePopperTooltip({
-      placement: 'right',
+      placement: 'right-start',
       trigger: 'click',
       interactive: true,
-      offset: offset ?? [-20, 16],
+      offset: offset ?? [-31, 16],
     });
 
   const colonyName =

src/components/v5/shared/Navigation/ColonySwitcher/partials/JoinedColoniesPopover/JoinedColoniesPopover.tsx

@@ -34,13 +34,13 @@ const JoinedColoniesPopover = ({
       setTooltipRef={setTooltipRef}
       tooltipProps={getTooltipProps}
       classNames={clsx(
-        'bg-white z-top mt-4 max-h-[calc(100vh-32px)] w-[252px] rounded-lg border-gray-200 px-0 pb-4 pt-0 shadow-none',
+        'bg-white !left-[calc(100%+0.4rem)] z-top mt-4 max-h-[calc(100%-32px)] w-[252px] !transform-none rounded-lg border-gray-200 px-0 pb-4 pt-0 shadow-none',
         {
           '!bg-gray-100': isDarkMode,
         },
       )}
     >
-      <div className="flex max-h-[calc(536px)] flex-col gap-6 overflow-hidden">
+      <div className="flex flex-col gap-6 overflow-hidden">
         {wallet ? (
           <JoinedColoniesList
             enableMobileAndDesktopLayoutBreakpoints={