💄 Collapsible sections fill available space

src/components/LinkItems/Collapsable.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="`collapsable ${rowColSpanClass} ${collapseClass}`"
+    :class="`collapsable ${rowColSpanClass} ${collapseClass} ${!cutToHeight ? 'full-height' : ''}`"
     :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
   >
     <input
@@ -43,6 +43,7 @@ export default {
     rows: Number, // Set section vertical row span / height
     color: String, // Optional color override
     customStyles: String, // Optional custom stylings
+    cutToHeight: Boolean, // To set section height with content height
   },
   components: {
     Icon,
@@ -252,5 +253,16 @@ export default {
     right: 0.5rem;
     top: 0.5rem;
   }
+  // Makes sections fill available space
+  &.is-open.full-height {
+    height: -webkit-fill-available;
+    display: flex;
+    flex-direction: column;
+    align-items: normal;
+    .collapsible-content {
+      height: -webkit-fill-available;
+      width: 100%;
+    }
+  }
 }
 </style>

src/components/LinkItems/Section.vue

@@ -8,6 +8,7 @@
     :rows="displayData.rows"
     :color="displayData.color"
     :customStyles="displayData.customStyles"
+    :cutToHeight="displayData.cutToHeight"
     @openEditSection="openEditSection"
     @openContextMenu="openContextMenu"
   >