From 6200a725e6992525d0a8d2c755bf3bd62f135e9c Mon Sep 17 00:00:00 2001 From: Tyler 'Unleaded' Jones Date: Tue, 22 Oct 2024 21:06:42 -0400 Subject: [PATCH] Fix: long elements overflow mobile Safari, shows horizontal scroll bar The "Svelte 5 Migration Guide" page, under the "Modern Browser Required" section, there is a list of inline elements (`clientWidth`...) that horizontally overflow on Mobile Safari, causing a horizontal scrollbar to appear. Adding the `line-break` property to the relevant CSS selector is a simple change that fixes the issue and doesn't appear to break any other styling. (Full transparency, I don't have the time to go through every single page to verify this claim 100%) --- packages/site-kit/src/lib/components/Text.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 6f688a139d..28cdb5ed7c 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -101,6 +101,7 @@ code:not(pre *), kbd { + line-break: normal; white-space: pre-wrap; padding: 0.2rem 0.4rem; margin: 0 0.2rem;