From 5176ff094c366d0a51e861d15e309eecffa344f3 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@odoo.com>
Date: Tue, 26 Jul 2022 09:29:28 +0200
Subject: [PATCH] [FIX] runbot_merge: home page styling

Previously if a branch name could not be line-broken (because it was
full of underscores) it would break the layout by making "its"
staging's column much wider than the expected 1/2 / 1/4 /
1/6 (depending on window width), compressing the width of its
sibling's columns.

By disabling content-based width (only taking in account flex-width)
and setting overflow to hidden, the overlong branch names get cut off
instead.
---
 runbot_merge/static/scss/runbot_merge.scss | 41 ++++++++++++++--------
 1 file changed, 26 insertions(+), 15 deletions(-)

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; }