Fix Bitbucket file path wrapping
Created by: felixfbecker
This is a quick PoC to help fixing https://github.com/sourcegraph/sourcegraph/issues/11110 while maintaining wrapping capability when action items are long. It basically applies the same style as used for GitHub, with some use of display: contents
to make nested buttons participate in a shared wrapping context.
I.e. the behavior is: When both file path and action items don't fit next to each other, use a two-row layout instead (using flex-wrap: wrap
and by disallowing shrinking of the file path with flex: 0
). Secondly both the file path and the action items are allowed to wrap within themselves if they are even longer than a single row.
A: Both fit in one row
B: Don't fit in one row, use two rows
B2: Blob view
C: File path and action items don't fit into one row each, have their own contents also wrap
For comparison, here's the same layout behavior on GitHub:
I only quickly hacked this together in dev tools and tried to copy it over into SCSS. @marekweb could you see if this works? I hope this helps!
Fixes #11110