Merge branch '25780-reveal-variables-button-may-overrun-width-of-screen' into 'master'

Resolve "Reveal Variables button may overrun width of screen"

Closes #25780

See merge request !8221

1 files changed, 25 insertions, 1 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index cd0839e58ea..1b0bf4554e6 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -929,8 +929,32 @@ pre.light-well {
 .variables-table {
   table-layout: fixed;
 
+  &.table-responsive {
+    border: none;
+  }
+
   .variable-key {
-    width: 30%;
+    width: 300px;
+    max-width: 300px;
+    overflow: hidden;
+    word-wrap: break-word;
+
+    // override bootstrap
+    white-space: normal!important;
+
+    @media (max-width: $screen-sm-max) {
+      width: 150px;
+      max-width: 150px;
+    }
+  }
+
+  .variable-value {
+    @media(max-width: $screen-xs-max) {
+      width: 150px;
+      max-width: 150px;
+      overflow: hidden;
+      word-wrap: break-word;
+    }
   }
 }