Fixed stacked list

I simplified the stacked list which has resolved the text overlapping issue.

There is still an issue with linking the stacked list to a detail page

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.55.2",
+    "@budibase/bbui": "^1.56.0",
     "@budibase/client": "^0.6.2",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/string-templates": "^0.6.2",

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -80,7 +80,7 @@
       class="icon"
       data-cy={`${key}-binding-button`}
       on:click={bindingDrawer.show}>
-      <Icon name="edit" />
+      <Icon name="lightning" />
     </div>
   {/if}
 </div>
@@ -144,7 +144,7 @@
     border-top-right-radius: var(--border-radius-m);
     border-bottom-right-radius: var(--border-radius-m);
     color: var(--grey-7);
-    font-size: 16px;
+    font-size: 14px;
   }
   .icon:hover {
     color: var(--ink);

packages/builder/yarn.lock

@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.55.2":
+"@budibase/bbui@^1.56.0":
-  version "1.55.2"
+  version "1.56.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.55.2.tgz#be636e8b86b7e516a08eb626bb50c4b1f9774bf8"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.56.0.tgz#91376f11b43706fd380291e9a5283760996eb62b"
-  integrity sha512-CevH/olxDFIko9uwYUpUTevPmpShrLwJSR7+wn/JetZERwhTwbLhOXzpsyXaK226qQ8vWhm0U31HRSKI1HwDDg==
+  integrity sha512-OEFC7MapbJk7Bd7oo79cVOq9BIcK1x8XPHLC1lB2N4hts37IygzB4Egg6JZBD7rh7CqU8ppc4W7wkfQbaXEO1Q==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

packages/standard-components/manifest.json

@@ -183,18 +183,8 @@
       },
       {
         "type": "text",
-        "label": "Text 1",
+        "label": "Subheading",
-        "key": "text1"
+        "key": "subheading"
-      },
-      {
-        "type": "text",
-        "label": "Text 2",
-        "key": "text2"
-      },
-      {
-        "type": "text",
-        "label": "Text 3",
-        "key": "text3"
       },
       {
         "type": "screen",

packages/standard-components/src/StackedList.svelte

@@ -6,9 +6,7 @@
 
   export let imageUrl = ""
   export let heading = ""
-  export let text1 = ""
+  export let subheading = ""
-  export let text2 = ""
-  export let text3 = ""
   export let destinationUrl = ""
 
   $: showImage = !!imageUrl
@@ -16,16 +14,16 @@
 
 <div class="container" use:styleable={$component.styles}>
   <a href={destinationUrl}>
-    <div class="content">
+    <div class="stackedlist">
       {#if showImage}
         <div class="image-block">
           <img class="image" src={imageUrl} alt="" />
         </div>
       {/if}
-      <h2 class="heading">{heading}</h2>
+      <div class="content">
-      <h4 class="text">{text1}</h4>
+        <div class="heading">{heading}</div>
-      <h4 class="text">{text2}</h4>
+        <div class="subheading">{subheading}</div>
-      <h4 class="text3">{text3}</h4>
+      </div>
     </div>
   </a>
 </div>
@@ -34,61 +32,51 @@
   a {
     text-decoration: none;
     color: inherit;
+    cursor: pointer;
   }
   .container {
-    padding: 20px;
+    padding: 1rem 1.5rem;
+    min-height: 3rem;
+    display: block;
+    align-items: flex-start;
   }
 
-  .content {
+  .stackedlist {
-    display: grid;
-    grid-template-columns: 120px 300px 1fr 1fr 1fr;
-    align-items: center;
-    gap: 20px;
-    min-height: 80px;
-  }
-
-  @media (max-width: 800px) {
-    .content {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 20px;
-    }
-  }
-  .image-block {
-    width: 80px;
-    height: 80px;
     display: flex;
-    align-items: center;
+    flex-direction: row;
-    justify-content: center;
+    overflow: hidden;
+    max-width: 100%;
   }
 
-  .image {
+  .subheading {
-    padding: 2px;
+    opacity: 0.6;
-    max-width: 80px;
+  }
-    max-height: 80px;
+
-    margin-right: 20px;
+  .content {
+    min-width: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
   }
 
   .heading {
-    font-size: 24px;
+    font-weight: 600;
-    margin: 0;
-    min-width: 200px;
   }
 
-  .text {
+  .image-block {
-    font-size: 16px;
+    display: flex;
-    font-weight: 400;
+    flex: 0 0 auto;
+    margin-right: 1.5rem;
+    color: inherit;
+    text-decoration: none;
   }
 
-  .text3 {
+  .image {
-    text-align: end;
+    display: block;
-    font-size: 16px;
+    overflow: hidden;
-    font-weight: 400;
+    width: 3rem;
-  }
+    max-width: 100%;
-
+    -webkit-user-select: none;
-  @media (max-width: 800px) {
+    user-select: none;
-    .text3 {
+    border-radius: 99px;
-      text-align: start;
-    }
   }
 </style>