Repository: kestra-io/kestra
Issue: Bad namespace hyphenation (in table)
Labels: enhancement

### Issue description

Namespace should be clearer in table - break line at each point ?

![image](https://user-images.githubusercontent.com/46634684/231785604-f479b6e0-a2e2-492d-adfe-83bc0b202b3b.png)


Issue comments:
@brian-mulier-p if you replace the . with that white space unicode I think it will do the trick
```js
text.replaceAll('.' '&#x200B;.')
``` 
Imma try that, thanks :)

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 4c7f0795a0..971a04fbb3 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -79,12 +79,12 @@
                         </template>
                     </el-table-column>
 
-                    <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('namespace')" prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" />
+                    <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('namespace')" prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)"/>
 
                     <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('flowId')" prop="flowId" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('flow')">
                         <template #default="scope">
                             <router-link :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.flowId}}">
-                                {{ scope.row.flowId }}
+                                {{ $filters.invisibleSpace(scope.row.flowId) }}
                             </router-link>
                         </template>
                     </el-table-column>
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index aaf3d4054a..2d0f055d98 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -47,7 +47,7 @@
                                 <router-link
                                     :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
                                 >
-                                    {{ scope.row.id }}
+                                    {{ $filters.invisibleSpace(scope.row.id) }}
                                 </router-link>
                                 &nbsp;<markdown-tooltip
                                     :id="scope.row.namespace + '-' + scope.row.id"
@@ -63,7 +63,7 @@
                             </template>
                         </el-table-column>
 
-                        <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" />
+                        <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
 
                         <el-table-column
                             prop="state"
@@ -104,19 +104,21 @@
 
         <bottom-line>
             <ul>
-                <ul v-if="flowsSelection.length !== 0 && canRead">
-                    <bottom-line-counter v-model="queryBulkAction" :selections="flowsSelection" :total="total" @update:model-value="selectAll()">
-                        <el-button v-if="canRead" :icon="Download" size="large" @click="exportFlows()">
-                            {{ $t('export') }}
-                        </el-button>
-                        <el-button v-if="canDelete" @click="deleteFlows" size="large" :icon="TrashCan">
-                            {{ $t('delete') }}
-                        </el-button>
-                        <el-button v-if="canDisable" @click="disableFlows" size="large" :icon="FileDocumentRemoveOutline">
-                            {{ $t('disable') }}
-                        </el-button>
-                    </bottom-line-counter>
-                </ul>
+                <li>
+                    <ul v-if="flowsSelection.length !== 0 && canRead">
+                        <bottom-line-counter v-model="queryBulkAction" :selections="flowsSelection" :total="total" @update:model-value="selectAll()">
+                            <el-button v-if="canRead" :icon="Download" size="large" @click="exportFlows()">
+                                {{ $t('export') }}
+                            </el-button>
+                            <el-button v-if="canDelete" @click="deleteFlows" size="large" :icon="TrashCan">
+                                {{ $t('delete') }}
+                            </el-button>
+                            <el-button v-if="canDisable" @click="disableFlows" size="large" :icon="FileDocumentRemoveOutline">
+                                {{ $t('disable') }}
+                            </el-button>
+                        </bottom-line-counter>
+                    </ul>
+                </li>
                 <li class="spacer" />
                 <li>
                     <div class="el-input el-input-file el-input--large custom-upload">
diff --git a/ui/src/components/templates/Templates.vue b/ui/src/components/templates/Templates.vue
index 49f8e9653d..e94535cb97 100644
--- a/ui/src/components/templates/Templates.vue
+++ b/ui/src/components/templates/Templates.vue
@@ -32,6 +32,7 @@
                         @selection-change="handleSelectionChange"
                     >
                         <el-table-column type="selection" v-if="(canRead)" />
+
                         <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
                             <template #default="scope">
                                 <router-link
@@ -47,6 +48,8 @@
                             </template>
                         </el-table-column>
 
+                        <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
+
                         <el-table-column column-key="action" class-name="row-action">
                             <template #default="scope">
                                 <router-link :to="{name: 'templates/update', params : {namespace: scope.row.namespace, id: scope.row.id}}">
diff --git a/ui/src/styles/layout/element-plus-overload.scss b/ui/src/styles/layout/element-plus-overload.scss
index 66877d09b0..7923971196 100644
--- a/ui/src/styles/layout/element-plus-overload.scss
+++ b/ui/src/styles/layout/element-plus-overload.scss
@@ -62,7 +62,7 @@
     }
 
     label {
-        displabey: flex;
+        display: flex;
         cursor: pointer;
         margin-left: 10px;
         line-height: 30px;
@@ -207,6 +207,7 @@ form.ks-horizontal {
 
     .cell {
         padding: 0 8px;
+        word-break: break-word;
     }
 
     .el-table__cell {
diff --git a/ui/src/utils/filters.js b/ui/src/utils/filters.js
index bd0cf4cd5e..5f5db2063e 100644
--- a/ui/src/utils/filters.js
+++ b/ui/src/utils/filters.js
@@ -2,6 +2,9 @@ import Utils from "./utils";
 import {getCurrentInstance} from "vue";
 
 export default {
+    invisibleSpace: (value) => {
+        return value.replaceAll(".", "\u200B" + ".");
+    },
     humanizeDuration: (value, options) => {
         return Utils.humanDuration(value, options);
     },


Test patch: