GH-1883 Add overflow-wrap policy for long repo names in UI (Fix #1883)

dzikoysk · Aug 11, 2023 · 5e59849 · 5e59849
1 parent b2ec513
commit 5e59849
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/reposilite-frontend/src/components/renderers/ArrayListRenderer.vue b/reposilite-frontend/src/components/renderers/ArrayListRenderer.vue
@@ -90,8 +90,9 @@ export default {
     const selectedIndex = ref(0)
 
     const createLabel = (element) => {
-      if (element.id) {
-        return element.id
+      if (element.id?.length > 0) {
+        const capitalized = element.id.charAt(0).toUpperCase() + element.id.slice(1)
+        return capitalized
       }
 
       if (element.reference) {
@@ -111,7 +112,7 @@ export default {
         return element
       }
 
-      return '<new>'
+      return '<New>'
     }
     
     return {
@@ -144,4 +145,11 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+.array-list .tabs .tab {
+  overflow-wrap: anywhere;
+  text-transform: none !important;
+}
+</style>