fix: Overflow for switch label (#18948)

PostHog · Nov 29, 2023 · d1959e3 · d1959e3
1 parent 41ba028
commit d1959e3
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 3 deletions.
diff --git a/frontend/__snapshots__/lemon-ui-lemon-checkbox--overview.png b/frontend/__snapshots__/lemon-ui-lemon-checkbox--overview.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-switch--overview.png b/frontend/__snapshots__/lemon-ui-lemon-switch--overview.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png
diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -93,6 +93,8 @@
     }
 
     &.LemonCheckbox--bordered {
+        line-height: 1.4;
+
         label {
             min-height: 2.5rem;
             padding: 0 0.75rem;

diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.stories.tsx b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.stories.tsx
@@ -32,6 +32,10 @@ export const Overview = (): JSX.Element => {
 
             <LemonCheckbox label="Bordered FullWidth" fullWidth bordered />
             <LemonCheckbox label="Bordered small" bordered size="small" />
+
+            <div className="w-20">
+                <LemonCheckbox label="Bordered with a really long label" bordered />
+            </div>
         </div>
     )
 }

diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -23,19 +23,20 @@
     }
 
     &.LemonSwitch--bordered {
-        height: 2.5rem;
+        min-height: 2.5rem;
         padding: 0 0.75rem;
+        line-height: 1.4;
         background: var(--bg-light);
         border: 1px solid var(--border);
         border-radius: var(--radius);
 
         .posthog-3000 & {
-            height: calc(2.125rem + 3px); // Medium size button height + button shadow height
+            min-height: calc(2.125rem + 3px); // Medium size button height + button shadow height
         }
 
         &.LemonSwitch--small {
             gap: 0.5rem;
-            height: 2rem;
+            min-height: 2rem;
             padding: 0 0.5rem;
         }
     }

diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.stories.tsx b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.stories.tsx
@@ -39,6 +39,10 @@ export const Overview = (): JSX.Element => {
             <LemonSwitch label="Bordered FullWidth" fullWidth bordered />
             <LemonSwitch label="Bordered FullWidth icon" fullWidth bordered icon={<IconGlobeLock />} />
             <LemonSwitch label="Bordered disabled" bordered disabled />
+
+            <div className="w-20">
+                <LemonSwitch label="Bordered with a really long label" bordered />
+            </div>
         </div>
     )
 }