[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.
This commit is contained in:
Xavier Morel 2022-07-26 09:29:28 +02:00
parent 60266a1b23
commit 5176ff094c

View File

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