diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 29363509d..33a6980d5 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -97,7 +97,7 @@ watch(props, async () => {
             flex: 2;
         }
         > .q-card.vn-three {
-            flex: 3;
+            flex: 4;
         }
         > .q-card.vn-max {
             width: 100%;
@@ -116,17 +116,17 @@ watch(props, async () => {
                 margin-top: 5px;
                 .label {
                     color: var(--vn-label);
-                    width: 10em;
+                    width: 8em;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     margin-right: 10px;
+                    flex-grow: 0;
+                    flex-shrink: 0;
                 }
                 .value {
                     color: var(--vn-text);
-                    width: max-content;
                     overflow: hidden;
-                    white-space: nowrap;
                 }
             }
             .header {
diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index e99ec4b05..665404afc 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -13,6 +13,13 @@ const $props = defineProps({
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 </script>
+<style scoped>
+.label,
+.value {
+    white-space: pre-line;
+    word-wrap: break-word;
+}
+</style>
 <template>
     <div class="vn-label-value">
         <div v-if="$props.label || $slots.label" class="label">