From 061b4f24dabb6be02bb6c8e888ba9f0c0220116a Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Fri, 20 May 2022 00:55:55 -0500
Subject: [PATCH] Fixed collapsibles having wrong width on buttons + collapsed
 content

---
 src/components/layout/Collapsible.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/Collapsible.vue b/src/components/layout/Collapsible.vue
index a9554cc..0565c3e 100644
--- a/src/components/layout/Collapsible.vue
+++ b/src/components/layout/Collapsible.vue
@@ -1,5 +1,5 @@
 <template>
-    <Col style="width: 100%">
+    <Col class="collapsible-container">
         <button @click="collapsed.value = !collapsed.value" class="feature collapsible-toggle">
             <component :is="displayComponent" />
         </button>
@@ -24,14 +24,31 @@ const contentComponent = computed(() => coerceComponent(props.content));
 </script>
 
 <style scoped>
-.collapsible-toggle {
+.collapsible-container {
     width: calc(100% - 10px);
+}
+
+.collapsible-toggle {
+    max-width: unset;
+    width: calc(100% + 0px);
+    margin: 0;
+    margin-left: -5px;
     background: var(--raised-background);
     padding: var(--feature-margin);
     color: var(--foreground);
     cursor: pointer;
 }
 
+.collapsible-toggle:last-child {
+    margin-left: unset;
+}
+
+:deep(.collapsible-toggle + .table) {
+    max-width: unset;
+    width: calc(100% + 10px);
+    margin-left: -5px;
+}
+
 :deep(.col) {
     margin-top: 0;
     margin-bottom: 0;