Improve deck

src/client/ui/deck/column.vue

@@ -5,6 +5,7 @@
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
 	v-hotkey="keymap"
+	:style="{ '--deckColumnHeaderHeight': deckStore.reactiveState.columnHeaderHeight.value + 'px' }"
 >
 	<header :class="{ indicated }"
 		draggable="true"
@@ -35,6 +36,7 @@ import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRig
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 import * as os from '@/os';
 import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
+import { deckStore } from './deck-store';
 
 export default defineComponent({
 	props: {
@@ -67,6 +69,7 @@ export default defineComponent({
 
 	data() {
 		return {
+			deckStore,
 			active: true,
 			dragging: false,
 			draghover: false,
@@ -261,8 +264,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dnpfarvg {
-	$header-height: 42px;
-
 	--section-padding: 10px;
 
 	height: 100%;
@@ -296,8 +297,8 @@ export default defineComponent({
 	}
 
 	&:not(.active) {
-		flex-basis: $header-height;
-		min-height: $header-height;
+		flex-basis: var(--deckColumnHeaderHeight);
+		min-height: var(--deckColumnHeaderHeight);
 
 		> header.indicated {
 			box-shadow: 4px 0px var(--accent) inset;
@@ -329,8 +330,8 @@ export default defineComponent({
 		position: relative;
 		display: flex;
 		z-index: 2;
-		line-height: $header-height;
-		height: $header-height;
+		line-height: var(--deckColumnHeaderHeight);
+		height: var(--deckColumnHeaderHeight);
 		padding: 0 16px;
 		font-size: 0.9em;
 		color: var(--panelHeaderFg);
@@ -362,8 +363,8 @@ export default defineComponent({
 		> .action > *,
 		> .menu {
 			z-index: 1;
-			width: $header-height;
-			line-height: $header-height;
+			width: var(--deckColumnHeaderHeight);
+			line-height: var(--deckColumnHeaderHeight);
 			font-size: 16px;
 			color: var(--faceTextButton);
 
@@ -395,7 +396,7 @@ export default defineComponent({
 	}
 
 	> div {
-		height: calc(100% - #{$header-height});
+		height: calc(100% - var(--deckColumnHeaderHeight));
 		overflow: auto;
 		overflow-x: hidden;
 		-webkit-overflow-scrolling: touch;