Add wrap styling to image column (#9257)

* add wrap styling to image column

* add Image formatter and  apply styling

---------

Co-authored-by: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>

shell/components/formatter/Image.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  props:
+    {
+      value: {
+        type:    String,
+        default: ''
+      }
+    }
+};
+</script>
+
+<template>
+  <span class="formatter-image">
+    {{ value }}
+  </span>
+</template>
+
+<style scoped>
+  .formatter-image {
+    word-break: break-all;
+  }
+</style>

shell/components/formatter/PodImages.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 
 <template>
-  <span>
+  <span class="formatter-pod-images">
     <span>{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
@@ -64,3 +64,9 @@ export default {
     >{{ t('generic.plusMore', {n:images.length-1}) }}</span>
   </span>
 </template>
+
+<style scoped>
+  .formatter-pod-images {
+    word-break: break-all;
+  }
+</style>

shell/config/table-headers.js

@@ -265,10 +265,11 @@ export const DURATION = {
 };
 
 export const IMAGE = {
-  name:     'image',
-  labelKey: 'tableHeaders.image',
-  value:    'image',
-  sort:     ['image', 'nameSort'],
+  name:      'image',
+  labelKey:  'tableHeaders.image',
+  value:     'image',
+  sort:      ['image', 'nameSort'],
+  formatter: 'Image',
 };
 
 export const POD_IMAGES = {