From 5e59849be8a44a11e7d78d9fc8c92922b2d5209e Mon Sep 17 00:00:00 2001
From: dzikoysk <dzikoysk@dzikoysk.net>
Date: Fri, 11 Aug 2023 20:34:04 +0200
Subject: [PATCH] GH-1883 Add overflow-wrap policy for long repo names in UI
 (Fix #1883)

---
 .../components/renderers/ArrayListRenderer.vue   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/reposilite-frontend/src/components/renderers/ArrayListRenderer.vue b/reposilite-frontend/src/components/renderers/ArrayListRenderer.vue
index a28d4e0d1..2cf97c927 100644
--- 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>
\ No newline at end of file
+</script>
+
+<style>
+.array-list .tabs .tab {
+  overflow-wrap: anywhere;
+  text-transform: none !important;
+}
+</style>
\ No newline at end of file