diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index 60d89b164..3cdadf173 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -17,7 +17,7 @@
v-if="isCollapsible"
v-model="isCollapsed"
class="collapser"
- direction="left-right"
+ direction="top-bottom"
/>
@@ -212,25 +212,6 @@ watch(
flex: 0 0 32px;
}
-.CoreColumn > .header > .collapser > .collapserArrow {
- transition: all 0.5s ease-in-out;
- transform: rotate(0deg);
-}
-
-.CoreColumn:not(.collapsibleToRight).collapsed
- > .header
- > .collapser
- > .collapserArrow {
- transform: rotate(180deg);
-}
-
-.CoreColumn.collapsibleToRight:not(.collapsed)
- > .header
- > .collapser
- > .collapserArrow {
- transform: rotate(180deg);
-}
-
.CoreColumn.collapsibleToRight > .header {
justify-content: left;
}
diff --git a/src/ui/src/components/core/layout/CoreSection.vue b/src/ui/src/components/core/layout/CoreSection.vue
index 1d1f1b828..516ae3c8c 100644
--- a/src/ui/src/components/core/layout/CoreSection.vue
+++ b/src/ui/src/components/core/layout/CoreSection.vue
@@ -112,6 +112,7 @@ const isCollapsed = ref(
margin: 16px 16px 0 16px;
display: grid;
grid-template-columns: 1fr auto;
+ align-items: center;
}
.CoreSection__title--collapsed {
margin: 16px;
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index 6dc100726..868229b8c 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -137,23 +137,6 @@ onMounted(() => {
margin-bottom: 16px;
}
-.collapserContainer > .collapser {
- flex: 0 0 32px;
-}
-
-.collapserContainer .collapserArrow {
- transition: all 0.5s ease-in-out;
- transform: rotate(0deg);
-}
-
-.CoreSidebar.collapsed .collapserArrow {
- transform: rotate(180deg);
-}
-
-.collapserContainer > .collapser:hover {
- background: var(--separatorColor);
-}
-
@media only screen and (max-width: 768px) {
.CoreSidebar {
min-width: 100%;
@@ -164,9 +147,5 @@ onMounted(() => {
.CoreSidebar.collapsed > .collapserContainer {
margin-bottom: 0;
}
-
- .collapserContainer > .collapser {
- transform: rotate(90deg);
- }
}