Wrap text when it is too long within badges

.changes/unreleased/UX-20251107-151736.yaml

@@ -0,0 +1,6 @@
+kind: UX
+body: Wrap text when it is too long within badges
+time: 2025-11-07T15:17:36.104379989+01:00
+custom:
+    Issue: ""
+    SchemaChange: No schema change

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue

@@ -43,11 +43,23 @@ export default {
 span.badge {
     @include badge_social($social-action-color);
     font-size: 95%;
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-word;
+    display: inline-block;
+    max-width: 100%;
     margin-bottom: 5px;
     margin-right: 1em;
-    max-width: 100%; /* Adjust as needed */
+    text-align: left;
-    overflow: hidden;
+    line-height: 1.2em;
-    text-overflow: ellipsis;
+
-    white-space: nowrap;
+    &::before {
+        position: absolute;
+        left: 11px;
+        top: 0;
+        margin: 0 0.3em 0 -0.75em;
+    }
+    position: relative;
+    padding-left: 1.5em;
 }
 </style>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue

@@ -43,7 +43,22 @@ export default {
 span.badge {
     @include badge_social($social-issue-color);
     font-size: 95%;
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-word;
+    display: inline-block;
+    max-width: 100%;
     margin-bottom: 5px;
     margin-right: 1em;
+    text-align: left;
+
+    &::before {
+        position: absolute;
+        left: 11px;
+        top: 0;
+        margin: 0 0.3em 0 -0.75em;
+    }
+    position: relative;
+    padding-left: 1.5em;
 }
 </style>