fix(ui): improve design of collapse button

- The `CoreColumn` displayed the collapse arrow in the wrong direction
- The `CoreSection` title wasn't vertical aligned with the button
- Remove dead CSS code

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"
 			/>
 		</div>
 		<div v-if="isCollapsed && fields.title.value" class="collapsedTitle">
@@ -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;
 }

src/ui/src/components/core/layout/CoreSection.vue

@@ -112,6 +112,7 @@ const isCollapsed = ref<boolean>(
 	margin: 16px 16px 0 16px;
 	display: grid;
 	grid-template-columns: 1fr auto;
+	align-items: center;
 }
 .CoreSection__title--collapsed {
 	margin: 16px;

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);
-	}
 }
 </style>