chore: min-scale for MkAcct

1 files changed, 11 insertions, 2 deletions

diff --git a/packages/frontend/src/components/global/MkCondensedLine.vue b/packages/frontend/src/components/global/MkCondensedLine.vue
index e3c0a866b7..40c7766a2a 100644
--- a/packages/frontend/src/components/global/MkCondensedLine.vue
+++ b/packages/frontend/src/components/global/MkCondensedLine.vue
@@ -7,14 +7,19 @@
 </template>
 
 <script lang="ts">
+interface Props {
+	readonly minScale?: number;
+}
+
 const contentSymbol = Symbol();
 const observer = new ResizeObserver((entries) => {
 	for (const entry of entries) {
 		const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement;
+		const props: Required<Props> = content[contentSymbol];
 		const container = content.parentElement as HTMLSpanElement;
 		const contentWidth = content.getBoundingClientRect().width;
 		const containerWidth = container.getBoundingClientRect().width;
-		container.style.transform = `scaleX(${Math.min(1, containerWidth / contentWidth)})`;
+		container.style.transform = `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})`;
 	}
 });
 </script>
@@ -22,6 +27,10 @@ const observer = new ResizeObserver((entries) => {
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
+const props = withDefaults(defineProps<Props>(), {
+	minScale: 0,
+});
+
 const content = ref<HTMLSpanElement>();
 
 watch(content, (value, oldValue) => {
@@ -33,7 +42,7 @@ watch(content, (value, oldValue) => {
 		}
 	}
 	if (value) {
-		value[contentSymbol] = contentSymbol;
+		value[contentSymbol] = props;
 		observer.observe(value);
 		if (value.parentElement) {
 			observer.observe(value.parentElement);