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;