From de9c0381503cf6bc83b10e62882408098e578c1b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 8 Nov 2021 16:40:45 +0000
Subject: [PATCH] Fix card list block empty state and update size

---
 .../client/src/components/app/Repeater.svelte    |  1 +
 .../src/components/app/SpectrumCard.svelte       | 16 ++++++++++++++--
 .../app/blocks/CardListWithSearch.svelte         |  9 +++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte
index 79f044f402..ff077f359b 100644
--- a/packages/client/src/components/app/Repeater.svelte
+++ b/packages/client/src/components/app/Repeater.svelte
@@ -38,6 +38,7 @@
     padding: var(--spacing-l);
     display: grid;
     place-items: center;
+    grid-column: 1 / -1;
   }
   .noRows i {
     margin-bottom: var(--spacing-m);
diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte
index 981ac98d9e..d8353eea7e 100644
--- a/packages/client/src/components/app/SpectrumCard.svelte
+++ b/packages/client/src/components/app/SpectrumCard.svelte
@@ -74,7 +74,7 @@
 
 <style>
   .spectrum-Card {
-    width: 240px;
+    width: 300px;
     border-color: var(--spectrum-global-color-gray-300) !important;
     display: flex;
     flex-direction: column;
@@ -85,6 +85,9 @@
     flex-direction: row;
     width: 420px;
   }
+  .spectrum-Card-container {
+    padding: var(--spectrum-global-dimension-size-50) 0;
+  }
   .spectrum-Card-title :global(a) {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -123,10 +126,19 @@
   .spectrum-Card-footer {
     border-top: none;
     padding-top: 0;
+    padding-bottom: 0;
     margin-top: -8px;
+    margin-bottom: var(
+      --spectrum-card-body-padding-bottom,
+      var(--spectrum-global-dimension-size-300)
+    );
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 
   .button-container {
-    margin-top: -3px;
+    margin-bottom: var(--spectrum-global-dimension-size-300);
   }
 </style>
diff --git a/packages/client/src/components/app/blocks/CardListWithSearch.svelte b/packages/client/src/components/app/blocks/CardListWithSearch.svelte
index 3e320bfee4..a750a37361 100644
--- a/packages/client/src/components/app/blocks/CardListWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/CardListWithSearch.svelte
@@ -41,7 +41,7 @@
 
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
-  $: cardWidth = cardHorizontal ? 420 : 240
+  $: cardWidth = cardHorizontal ? 420 : 300
 
   // Enrich the default filter with the specified search fields
   const enrichFilter = (filter, columns, formId) => {
@@ -140,9 +140,10 @@
           props={{
             dataProvider: `{{ literal [${dataProviderId}] }}`,
             direction: "row",
-            hAlign: "left",
+            hAlign: "stretch",
             vAlign: "top",
             gap: "M",
+            noRowsMessage: "No rows found",
           }}
           styles={{
             display: "grid",
@@ -172,10 +173,6 @@
 </Block>
 
 <style>
-  .card-list :global(.spectrum-Card) {
-    width: auto !important;
-  }
-
   .header {
     display: flex;
     flex-direction: row;