fix: the contents inside `pre` tag will not be wrapped (#263)

frontend/src/components/content_value/ContentValueHash.vue

@@ -136,7 +136,7 @@ const valueColumn = computed(() => ({
     // },
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         if (row.rm === true) {
             return h('s', {}, row.dv || row.v)

frontend/src/components/content_value/ContentValueList.vue

@@ -108,7 +108,7 @@ const valueColumn = computed(() => ({
     },
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         return row.dv || row.v
     },

frontend/src/components/content_value/ContentValueSet.vue

@@ -107,7 +107,7 @@ const valueColumn = computed(() => ({
     },
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         return row.dv || row.v
     },

frontend/src/components/content_value/ContentValueStream.vue

@@ -93,7 +93,7 @@ const valueColumn = computed(() => ({
     },
     // sorter: (row1, row2) => row1.value - row2.value,
     render: (row) => {
-        return h('pre', {}, row.dv)
+        return h('pre', { class: 'pre-wrap' }, row.dv)
     },
 }))
 const actionColumn = {

frontend/src/components/content_value/ContentValueZSet.vue

@@ -157,7 +157,7 @@ const valueColumn = computed(() => ({
     // sorter: (row1, row2) => row1.value - row2.value,
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         return row.dv || row.v
     },

frontend/src/styles/style.scss

@@ -177,6 +177,10 @@ body {
     animation: rotate 2s linear infinite;
 }
 
+.pre-wrap {
+    white-space: pre-wrap;
+}
+
 @keyframes rotate {
     100% {
         transform: rotate(360deg);