Merge branch 'master' into dn-chore/remove-antd-progress

frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx

@@ -137,7 +137,6 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                             otherOrganizations?.length || preflight?.can_create_org
                                 ? {
                                       overlay: <OrganizationSwitcherOverlay />,
-                                      actionable: true,
                                   }
                                 : undefined,
                     })
@@ -152,7 +151,6 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                         name: currentTeam.name,
                         popover: {
                             overlay: <ProjectSwitcherOverlay />,
-                            actionable: true,
                         },
                     })
                 }

frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss

@@ -39,18 +39,11 @@
     .LemonModal {
         min-width: var(--annotations-popover-width);
         max-width: var(--annotations-popover-width);
+        min-height: 100%;
         margin: 0;
         border: none;
         box-shadow: none;
     }
-
-    .Popover__box {
-        padding: 0;
-    }
-
-    ul {
-        max-height: calc(4 * 6.75rem + 3 * 0.5rem); // Fit in 4 one-line annotations without scrolling
-    }
 }
 
 .AnnotationCard {

frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx

@@ -198,6 +198,7 @@ function AnnotationsPopover({
             visible={isPopoverShown}
             onClickOutside={closePopover}
             showArrow
+            padded={false}
             overlay={
                 <LemonModal
                     inline

frontend/src/lib/components/HelpButton/HelpButton.tsx

@@ -170,7 +170,6 @@ export function HelpButton({
                 onVisibilityChange={(visible) => !visible && hideHelp()}
                 visible={isHelpVisible}
                 placement={placement}
-                actionable
                 onClickOutside={hideHelp}
             >
                 <div className={clsx('help-button', inline && 'inline')} onClick={toggleHelp} data-attr="help-button">

frontend/src/lib/components/PageHeader.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { useValues } from 'kea'
-import { Within3000PageHeaderContext } from 'lib/lemon-ui/LemonButton/LemonButton'
+import { WithinPageHeaderContext } from 'lib/lemon-ui/LemonButton/LemonButton'
 import { createPortal } from 'react-dom'
 import { DraggableToNotebookProps } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 
@@ -22,7 +22,7 @@ export function PageHeader({ caption, buttons, tabbedPage }: PageHeaderProps): J
             {buttons &&
                 actionsContainer &&
                 createPortal(
-                    <Within3000PageHeaderContext.Provider value={true}>{buttons}</Within3000PageHeaderContext.Provider>,
+                    <WithinPageHeaderContext.Provider value={true}>{buttons}</WithinPageHeaderContext.Provider>,
                     actionsContainer
                 )}
 

frontend/src/lib/components/PropertyFilters/components/FilterRow.scss

@@ -1,4 +1,4 @@
-.filter-row-popover .Popover__box {
+.filter-row-popover .ScrollableShadows {
     overflow: visible; // Only required because the Ant popover is rendered _within_ the filter popover
 }
 

frontend/src/lib/components/ScrollableShadows/ScrollableShadows.tsx

@@ -2,7 +2,7 @@ import './ScrollableShadows.scss'
 
 import { clsx } from 'clsx'
 import { useScrollable } from 'lib/hooks/useScrollable'
-import { MutableRefObject } from 'react'
+import React, { MutableRefObject } from 'react'
 
 export type ScrollableShadowsProps = {
     children: React.ReactNode
@@ -12,14 +12,17 @@ export type ScrollableShadowsProps = {
     scrollRef?: MutableRefObject<HTMLDivElement | null>
 }
 
-export const ScrollableShadows = ({
-    children,
-    direction,
-    className,
-    innerClassName,
-    scrollRef,
-}: ScrollableShadowsProps): JSX.Element => {
-    const { ref, isScrollableLeft, isScrollableRight, isScrollableBottom, isScrollableTop } = useScrollable()
+export const ScrollableShadows = React.forwardRef<HTMLDivElement, ScrollableShadowsProps>(function ScrollableShadows(
+    { children, direction, className, innerClassName, scrollRef },
+    ref
+) {
+    const {
+        ref: scrollRefScrollable,
+        isScrollableLeft,
+        isScrollableRight,
+        isScrollableBottom,
+        isScrollableTop,
+    } = useScrollable()
 
     return (
         <div
@@ -33,18 +36,19 @@ export const ScrollableShadows = ({
                 direction === 'vertical' && isScrollableBottom && 'ScrollableShadows--bottom',
                 className
             )}
+            ref={ref}
         >
             <div
                 className={clsx('ScrollableShadows__inner', innerClassName)}
-                ref={(theRef) => {
-                    ref.current = theRef
+                ref={(refValue) => {
+                    scrollRefScrollable.current = refValue
                     if (scrollRef) {
-                        scrollRef.current = theRef
+                        scrollRef.current = refValue
                     }
                 }}
             >
                 {children}
             </div>
         </div>
     )
-}
+})