From 9c1b0c12789807ad264d2e5fd22eca2990d3c240 Mon Sep 17 00:00:00 2001
From: Gregor Wassmann <gregor.wassmann@gmail.com>
Date: Sun, 26 Mar 2023 18:34:08 +0200
Subject: [PATCH] docs: fix layout for smaller screens (#1707)

Fixes #1649
---
 docs/src/global.css                     | 5 +++++
 docs/src/layouts/ComponentLayout.svelte | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/src/global.css b/docs/src/global.css
index fd8003b2..e154174f 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -33,6 +33,11 @@ html[theme="g90"] .code-override {
   overflow-x: auto;
 }
 
+/* Addig this to the layout grid fixes overstretching. */
+.fix-overflow {
+  min-width: 0;
+}
+
 .token.tag,
 .token.operator {
   color: #6ea6ff;
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index e099d00a..9277ceed 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -66,7 +66,7 @@
 </script>
 
 <Content data-components>
-  <Grid>
+  <Grid class="fix-overflow">
     <Row>
       <Column>
         <h1>{component}</h1>