From c3b6d2b0e0802378027ac02969a397c63aa469fc Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 22 Jan 2022 20:46:03 +0000
Subject: [PATCH] :lipstick: Collapsible sections fill available space

---
 src/components/LinkItems/Collapsable.vue | 14 +++++++++++++-
 src/components/LinkItems/Section.vue     |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index 76732f03..132f24c0 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/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>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index db3d73ee..cdb8bf21 100644
--- a/src/components/LinkItems/Section.vue
+++ b/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"
   >