fix: buttons should not be rotated + rename prop collapsable -> collapsible

app/src/components/globals/YCard.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
     title?: string
     titleTag?: string
     icon?: string
-    collapsable?: boolean
+    collapsible?: boolean
     collapsed?: boolean
     buttonUnbreak?: Breakpoint
   }>(),
@@ -21,7 +21,7 @@ const props = withDefaults(
     title: undefined,
     titleTag: 'h2',
     icon: undefined,
-    collapsable: false,
+    collapsible: false,
     collapsed: false,
     buttonUnbreak: 'md',
   },
@@ -39,7 +39,7 @@ const visible = ref(!props.collapsed)
 </script>
 
 <template>
-  <BCard :no-body="collapsable ? true : noBody" :class="{ 'border-0': asTab }">
+  <BCard :no-body="collapsible ? true : noBody" :class="{ 'border-0': asTab, 'collapsible': collapsible }">
     <template v-if="!asTab" #header>
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
@@ -62,7 +62,7 @@ const visible = ref(!props.collapsed)
       </div>
 
       <BButton
-        v-if="collapsable"
+        v-if="collapsible"
         size="sm"
         variant="outline-secondary"
         class="align-self-center ms-auto"
@@ -78,7 +78,7 @@ const visible = ref(!props.collapsed)
       </BButton>
     </template>
 
-    <BCollapse v-if="collapsable" :visible="visible">
+    <BCollapse v-if="collapsible" :visible="visible">
       <slot v-if="noBody" name="default" />
       <BCardBody v-else>
         <slot name="default" />

app/src/scss/main.scss

@@ -222,13 +222,15 @@ h3.card-title {
 }
 
 // collapse icon
-.not-collapsed > .icon {
-  transform: rotate(-90deg);
-}
-.collapsed > .icon {
-  transform: rotate(90deg);
-  position: relative;
-  top: 2px;
+.collapsible {
+  .not-collapsed > .icon {
+    transform: rotate(-90deg);
+  }
+  .collapsed > .icon {
+    transform: rotate(90deg);
+    position: relative;
+    top: 2px;
+  }
 }
 
 // limit the size of toggle dropdown buttons to a square

app/src/views/app/_AppIntegrationAndLinks.vue

@@ -12,7 +12,7 @@ defineProps<{
     v-if="integration"
     id="app-integration"
     :title="$t('app.integration.title')"
-    collapsable
+    collapsible
     collapsed
     no-body
   >
@@ -45,7 +45,7 @@ defineProps<{
     id="app-links"
     icon="link"
     :title="$t('app.links.title')"
-    collapsable
+    collapsible
     collapsed
     no-body
   >

app/src/views/diagnosis/DiagnosisView.vue

@@ -117,7 +117,7 @@ function shareLogs() {
     <YCard
       v-for="report in reports"
       :key="report.id"
-      collapsable
+      collapsible
       :collapsed="report.noIssues"
       no-body
       button-unbreak="lg"

app/src/views/group/GroupList.vue

@@ -168,7 +168,7 @@ async function deleteGroup(name: string) {
     <YCard
       v-for="group in filteredGroups"
       :key="group.name"
-      collapsable
+      collapsible
       :title="
         group.isSpecial
           ? $t('group_' + group.name)
@@ -239,7 +239,7 @@ async function deleteGroup(name: string) {
     </YCard>
 
     <!-- USER GROUPS CARD -->
-    <YCard collapsable :title="$t('group_specific_permissions')" icon="group">
+    <YCard collipsable :title="$t('group_specific_permissions')" icon="group">
       <template v-for="userName in activeUserGroups" :key="userName">
         <BRow>
           <BCol md="3" lg="2">

app/src/views/tool/ToolMigrations.vue

@@ -123,7 +123,7 @@ async function skipMigration(id: string) {
     <YCard
       :title="$t('migrations_done')"
       icon="cogs"
-      collapsable
+      collapsible
       collapsed
       no-body
     >