From 5c42ec066863e9cc959f7b2fd1477115e93f4739 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Fri, 15 Mar 2024 15:19:35 +0100
Subject: [PATCH] Use container query instead of React hook in `LemonBanner`

---
 .../lib/lemon-ui/LemonBanner/LemonBanner.scss |  9 ++---
 .../LemonBanner/LemonBanner.stories.tsx       |  4 +--
 .../lib/lemon-ui/LemonBanner/LemonBanner.tsx  | 35 ++++++-------------
 3 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
index c93e75a38e24c..09fb088957219 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
@@ -1,20 +1,15 @@
 .LemonBanner {
     display: flex;
+    flex-direction: column;
     gap: 0.5rem;
-    align-items: center;
     min-height: 3rem;
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem;
     font-weight: 500;
     color: var(--primary-alt);
     text-align: left;
     border: solid 1px var(--border-3000);
     border-radius: var(--radius);
 
-    &.LemonBanner--compact {
-        flex-direction: column;
-        padding: 0.5rem;
-    }
-
     &.LemonBanner--info {
         background-color: var(--primary-alt-highlight);
     }
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
index 96c88f50e9736..8b8f7d8780735 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
@@ -50,7 +50,7 @@ export const Small: Story = Template.bind({})
 Small.args = {
     type: 'info',
     children: 'This is a one-time message. Acknowledge it and move on with your life.',
-    className: 'w-50 resize-x overflow-hidden',
+    className: 'w-50 overflow-hidden',
 }
 
 export const SmallWithButtons: Story = Template.bind({})
@@ -62,5 +62,5 @@ SmallWithButtons.args = {
         children: 'Acknowledge',
         onClick: () => alert('👋'),
     },
-    className: 'w-50 resize-x overflow-hidden',
+    className: 'w-50 overflow-hidden',
 }
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
index 5b3648d7403b7..9ce2a5eb28fa2 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
@@ -3,7 +3,6 @@ import './LemonBanner.scss'
 import { IconInfo, IconWarning, IconX } from '@posthog/icons'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
-import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { LemonButton, SideAction } from 'lib/lemon-ui/LemonButton'
 import { LemonButtonPropsBase } from 'lib/lemon-ui/LemonButton'
 
@@ -30,17 +29,12 @@ export function LemonBanner({
     action,
     className,
     dismissKey = '',
-}: LemonBannerProps): JSX.Element {
+}: LemonBannerProps): JSX.Element | null {
     const logic = lemonBannerLogic({ dismissKey })
     const { isDismissed } = useValues(logic)
     const { dismiss } = useActions(logic)
     const showCloseButton = dismissKey || onClose
 
-    const { ref: wrapperRef, size } = useResizeBreakpoints({
-        0: 'compact',
-        400: 'normal',
-    })
-
     const _onClose = (): void => {
         if (dismissKey) {
             dismiss()
@@ -49,29 +43,22 @@ export function LemonBanner({
     }
 
     if (isDismissed) {
-        return <></>
+        return null
     }
 
-    const isCompact = size === 'compact'
-
     return (
-        <div
-            className={clsx('LemonBanner', `LemonBanner--${type}`, isCompact && 'LemonBanner--compact', className)}
-            ref={wrapperRef}
-        >
-            <div className="flex items-center gap-2 grow">
-                {!isCompact ? (
-                    type === 'warning' || type === 'error' ? (
-                        <IconWarning className="LemonBanner__icon" />
-                    ) : (
-                        <IconInfo className="LemonBanner__icon" />
-                    )
-                ) : null}
+        <div className={clsx('LemonBanner @container', `LemonBanner--${type}`, className)}>
+            <div className="flex items-center gap-2 grow @md:px-1">
+                {type === 'warning' || type === 'error' ? (
+                    <IconWarning className="LemonBanner__icon hidden @md:block" />
+                ) : (
+                    <IconInfo className="LemonBanner__icon hidden @md:block" />
+                )}
                 <div className="grow overflow-hidden">{children}</div>
-                {!isCompact && action && <LemonButton type="secondary" {...action} />}
+                {action && <LemonButton className="hidden @md:flex" type="secondary" {...action} />}
                 {showCloseButton && <LemonButton size="small" icon={<IconX />} onClick={_onClose} aria-label="close" />}
             </div>
-            {isCompact && action && <LemonButton type="secondary" fullWidth {...action} />}
+            {action && <LemonButton className="@md:hidden" type="secondary" fullWidth {...action} />}
         </div>
     )
 }