Prevent enviroment table to overflow when name has underscores

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -449,7 +449,7 @@
           </span>
         </td>
 
-        <td>
+        <td class="environments-build-cell">
           <a v-if="shouldRenderBuildName"
             class="build-link"
             :href="model.last_deployment.deployable.build_path">

app/assets/stylesheets/pages/environments.scss

@@ -30,19 +30,25 @@
     display: table-cell;
   }
 
+  .environments-name,
   .environments-commit,
   .environments-actions {
     width: 20%;
   }
 
-  .environments-deploy,
-  .environments-build,
   .environments-date {
     width: 10%;
   }
 
-  .environments-name {
-    width: 30%;
+  .environments-deploy,
+  .environments-build {
+    width: 15%;
+  }
+
+  .environment-name,
+  .environments-build-cell,
+  .deployment-column {
+    word-break: break-all;
   }
 
   .deployment-column {

changelogs/unreleased/25207-text-overflow-env-table.yml

+---
+title: Prevent enviroment table to overflow when name has underscores
+merge_request: 8142
+author: