diff --git a/runbot_merge/static/scss/runbot_merge.scss b/runbot_merge/static/scss/runbot_merge.scss
index 437f1bfc..c00bf61f 100644
--- a/runbot_merge/static/scss/runbot_merge.scss
+++ b/runbot_merge/static/scss/runbot_merge.scss
@@ -40,23 +40,34 @@ h5 { font-size: 1em; }
 
 // mergebot layouting
 .stagings {
-    display: flex;
-    align-items: stretch;
-}
-.stagings > li {
-    flex: 1;
+  display: flex;
+  align-items: stretch;
 
-    padding: 0.1em;
-    padding-left: 0.5em;
-}
-.stagings > li:not(:last-child) {
-    border-right: 1px solid lightgray;
-}
-.batch:not(:last-child) {
-    border-bottom: 1px solid lightgray;
-}
-.batch a:not(:last-of-type) a:after {
+  > li {
+    flex: 1;
+    // prevent content-based autosizing otherwise that's flex' starting point
+    width: 0;
+
+    padding: 0.1em 0.1em 0.1em 0.5em;
+
+    &:not(:last-child) {
+      border-right: 1px solid lightgray;
+    }
+  }
+  .batch {
+    // cut off branch names if they can't be line-wrapped and would break the
+    // layout, works with flex to force all columns to be at the same size
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid lightgray;
+    }
+  }
+
+  .batch a:not(:last-of-type) a:after {
     content: ",";
+  }
 }
 .pr-listing > * { display: inline-block; }
 .pr-awaiting { opacity: 0.8; }