Skip to content

Revisit `minmax(0, 1fr)` on parent with setting `min-width` on child

Description

Over in this MR, we fixed an issue with overflowing containers due to some quirky behavior with css-grid.

The proposed fix was to replace our 1fr usage with minmax(0, 1fr). We did this in a couple of places, but not in others. It seems like we are coupling parents to knowing about their children.

Maybe we should just set min-width on the children themselves (also removing the minmax(0, 1fr))?

diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index cf9363b77be..6bdab4aab1a 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -588,6 +588,10 @@ table.code {
 
 // Merge request diff grid layout
 .diff-grid {
+  .diff-td {
+    min-width: 0;
+  }
+
   .diff-grid-row {
     display: grid;
     grid-template-columns: 1fr 1fr;

Testing locally this seems to work:

Firefox Chrome Safari
Screen_Shot_2021-01-05_at_11.34.34_AM Screen_Shot_2021-01-05_at_11.35.09_AM Screen_Shot_2021-01-05_at_11.35.37_AM