client: refine ui

1 files changed, 19 insertions, 9 deletions

diff --git a/packages/client/src/components/global/spacer.vue b/packages/client/src/components/global/spacer.vue
index 1129d54c71..34297a3c8b 100644
--- a/packages/client/src/components/global/spacer.vue
+++ b/packages/client/src/components/global/spacer.vue
@@ -15,19 +15,29 @@ export default defineComponent({
 			type: Number,
 			required: false,
 			default: null,
-		}
+		},
+		marginMin: {
+			type: Number,
+			required: false,
+			default: 12,
+		},
+		marginMax: {
+			type: Number,
+			required: false,
+			default: 32,
+		},
 	},
 
 	setup(props, context) {
 		let ro: ResizeObserver;
-		const root = ref<HTMLElement>(null);
-		const content = ref<HTMLElement>(null);
+		const root = ref<HTMLElement>();
+		const content = ref<HTMLElement>();
 		const margin = ref(0);
 		const adjust = (rect: { width: number; height: number; }) => {
 			if (rect.width > (props.contentMax || 500)) {
-				margin.value = 32;
+				margin.value = props.marginMax;
 			} else {
-				margin.value = 12;
+				margin.value = props.marginMin;
 			}
 		};
 
@@ -40,14 +50,14 @@ export default defineComponent({
 				});
 				*/
 				adjust({
-					width: root.value.offsetWidth,
-					height: root.value.offsetHeight,
+					width: root.value!.offsetWidth,
+					height: root.value!.offsetHeight,
 				});
 			});
-			ro.observe(root.value);
+			ro.observe(root.value!);
 
 			if (props.contentMax) {
-				content.value.style.maxWidth = `${props.contentMax}px`;
+				content.value!.style.maxWidth = `${props.contentMax}px`;
 			}
 		});