diff --git a/packages/client/src/components/key-value.vue b/packages/client/src/components/key-value.vue
index da98abd77c..592c7be593 100644
--- a/packages/client/src/components/key-value.vue
+++ b/packages/client/src/components/key-value.vue
@@ -10,46 +10,27 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		copy: {
-			type: String,
-			required: false,
-			default: null,
-		},
-		oneline: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-
-	setup(props) {
-		const copy_ = () => {
-			copyToClipboard(props.copy);
-			os.success();
-		};
-
-		return {
-			copy_
-		};
-	},
+const props = withDefaults(defineProps<{
+	copy: string | null;
+	oneline: boolean;
+}>(), {
+	copy: null,
+	oneline: false,
 });
+
+const copy_ = () => {
+	copyToClipboard(props.copy);
+	os.success();
+};
 </script>
 
 <style lang="scss" scoped>
 .alqyeyti {
-	> .key, > .value {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
 	> .key {
 		font-size: 0.85em;
 		padding: 0 0 0.25em 0;
@@ -67,6 +48,9 @@ export default defineComponent({
 
 		> .value {
 			width: 70%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 	}
 }