From 9c7f56a9ae761983b6405e1d6610d67b32a9267b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 4 Jun 2021 15:52:05 +0200
Subject: [PATCH] auto-wrapping on size collapse

---
 .../standard-components/src/Layout.svelte     | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/Layout.svelte b/packages/standard-components/src/Layout.svelte
index c896b7f2b4..35edd28fc1 100644
--- a/packages/standard-components/src/Layout.svelte
+++ b/packages/standard-components/src/Layout.svelte
@@ -12,12 +12,24 @@
     twoColumns: 2,
     threeColumns: 3,
   }
+
+  let containerWidth
+  $: columnsDependingOnSize = calculateColumns(containerWidth)
+
+  function calculateColumns(parentWidth) {
+    const numberOfAllowedColumns = Math.floor(parentWidth / 250) || 100
+    if (layoutMap[type] <= numberOfAllowedColumns) {
+      return false
+    } else if (layoutMap[type] > numberOfAllowedColumns) {
+      return numberOfAllowedColumns
+    }
+  }
 </script>
 
 <div
+  bind:clientWidth={containerWidth}
   in:transition={{ type: $component.transition }}
-  use:styleable={$component.styles}
-  class={type}
+  class="{type} columns-{columnsDependingOnSize}"
 >
   <slot />
   {#if layoutMap[type] - $component.children > 0}
@@ -44,6 +56,15 @@
   .threeColumns {
     grid-template-columns: 1fr 1fr 1fr;
   }
+  .containerSmall {
+    grid-template-columns: 1fr;
+  }
+  .columns-1 {
+    grid-template-columns: 1fr;
+  }
+  .columns-2 {
+    grid-template-columns: 1fr 1fr;
+  }
 
   p {
     background-color: var(--grey-3);