refs #6256 lv breakword

src/components/ui/CardSummary.vue

@@ -93,7 +93,7 @@ watch(props, async () => {
             flex: 2;
         }
         > .q-card.vn-three {
-            flex: 3;
+            flex: 4;
         }
         > .q-card.vn-max {
             width: 100%;
@@ -112,11 +112,13 @@ 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);

src/components/ui/VnLv.vue

@@ -9,14 +9,36 @@ const $props = defineProps({
     titleValue: { type: [Number, String, Boolean], default: null },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    textOverflow: { type: String, default: 'ellipsis' },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
+const textOverflowClass = computed(() => {
+    if ($props.textOverflow === 'ellipsis') return 'line-break-text';
+    return 'ellipsis-text';
+});
 </script>
+<style scoped>
+.ellipsis-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.line-break-text {
+    white-space: pre-line;
+    hyphens: auto;
+    word-wrap: break-word;
+}
+</style>
 <template>
     <div class="vn-label-value">
         <div v-if="$props.label || $slots.label" class="label">
             <slot name="label">
-                <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
+                <span
+                    :title="$props.titleLabel ?? $props.label"
+                    :class="textOverflowClass"
+                    >{{ $props.label }}</span
+                >
             </slot>
         </div>
         <div class="value">
@@ -28,7 +50,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
                 />
             </span>
             <slot v-else name="value">
-                <span :title="$props.value">
+                <span :title="$props.value" :class="textOverflowClass">
                     {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
                 </span>
             </slot>

src/pages/Customer/Card/CustomerSummary.vue

@@ -60,7 +60,7 @@ const creditWarning = computed(() => {
 <template>
     <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
         <template #body="{ entity }">
-            <QCard class="vn-one">
+            <QCard class="vn-two">
                 <a class="header" :href="clientUrl + `basic-data`">
                     {{ t('customer.summary.basicData') }}
                     <QIcon name="open_in_new" color="primary" />