Fix

PostHog · Nov 23, 2023 · a28b9e4 · a28b9e4
1 parent ac8c586
commit a28b9e4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 54 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
@@ -9,7 +9,11 @@
     min-height: 3rem;
     padding: 0.5rem 0.75rem;
     text-align: left;
-    container-type: inline-size;
+
+    &.LemonBanner--compact {
+        flex-direction: column;
+        padding: 0.5rem;
+    }
 
     &.LemonBanner--info {
         background-color: var(--primary-alt-highlight);
@@ -30,41 +34,12 @@
         color: var(--success-dark);
     }
 
-    .LemonBanner__content {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: space-between;
-        gap: 0.5rem;
-
-        .LemonBanner__content__row {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            justify-content: space-between;
-
-            p {
-                margin-bottom: 0.25em;
-            }
-
-            > .LemonIcon {
-                line-height: 0;
-                flex-shrink: 0;
-                font-size: 1.5rem;
-            }
-        }
+    .LemonBanner__icon {
+        line-height: 0;
+        flex-shrink: 0;
+        font-size: 1.5rem;
     }
-
-    @container (max-width: 30rem) {
-        .LemonBanner__content {
-            flex-direction: column;
-            align-items: stretch;
-
-            .LemonBanner__content__row {
-                > .LemonIcon {
-                    display: none;
-                }
-            }
-        }
+    p {
+        margin-bottom: 0.25em;
     }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
@@ -7,6 +7,7 @@ import { LemonButton, SideAction } from 'lib/lemon-ui/LemonButton'
 import { LemonButtonPropsBase } from 'lib/lemon-ui/LemonButton/LemonButton'
 
 import { lemonBannerLogic } from './lemonBannerLogic'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 
 export type LemonBannerAction = SideAction & Pick<LemonButtonPropsBase, 'children'>
 
@@ -46,26 +47,39 @@ export function LemonBanner({
         return <></>
     }
 
+    const { ref: wrapperRef, size } = useResizeBreakpoints({
+        0: 'compact',
+        400: 'normal',
+    })
+
+    const isCompact = size === 'compact'
+
     return (
-        <div className={clsx('LemonBanner', `LemonBanner--${type}`, className)}>
-            <div className="LemonBanner__content">
-                <div className="LemonBanner__content__row flex-1">
-                    {type === 'warning' || type === 'error' ? <IconWarning /> : <IconInfo />}
-                    <div className="flex-1">{children}</div>
-                </div>
-                <div className="LemonBanner__content__row ">
-                    {action && <LemonButton type="secondary" {...action} />}
-                    {showCloseButton && (
-                        <LemonButton
-                            status="primary-alt"
-                            size="small"
-                            icon={<IconClose />}
-                            onClick={_onClose}
-                            aria-label="close"
-                        />
-                    )}
-                </div>
+        <div
+            className={clsx('LemonBanner', `LemonBanner--${type}`, isCompact && 'LemonBanner--compact', className)}
+            ref={wrapperRef}
+        >
+            <div className="flex items-center gap-2 grow-1">
+                {!isCompact ? (
+                    type === 'warning' || type === 'error' ? (
+                        <IconWarning className="LemonBanner__icon" />
+                    ) : (
+                        <IconInfo className="LemonBanner__icon" />
+                    )
+                ) : null}
+                <div className="grow">{children}</div>
+                {!isCompact && action && <LemonButton type="secondary" {...action} />}
+                {showCloseButton && (
+                    <LemonButton
+                        status="primary-alt"
+                        size="small"
+                        icon={<IconClose />}
+                        onClick={_onClose}
+                        aria-label="close"
+                    />
+                )}
             </div>
+            {isCompact && action && <LemonButton type="secondary" fullWidth {...action} />}
         </div>
     )
 }