From 09479b8a61e096ba75a6029d0b5101ce1282d635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 6 Jul 2021 04:12:36 +0200
Subject: [PATCH] Avoid horizontal scrolling in participation feeds

The elements were given a minimum width of `rem-calc(240)` (that is,
15rem). Considering one element is double the width of the other one,
that means that in screens between 40rem and 45rem there would be a
horizontal scrollbar.

Adding a `flex-wrap: wrap` property fixes the problem. We're also using
`flex-basis` to guarantee a minimum width and make one element be double
the size of the other one when they're on the same line. No need to add
breakpoint rules due.

Finally, we're adding an artifitial gap between flex elements so we can
remove the `@include grid-col` rules.
---
 app/assets/stylesheets/layout.scss            |  1 -
 .../widgets/feeds/participation.scss          | 45 +++++++++----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index b270849a7..74cbddf3c 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2603,7 +2603,6 @@ table {
       display: inline-block;
       border-top: 4px solid $brand;
       margin-bottom: 0;
-      min-width: rem-calc(240);
       padding: $line-height / 2 0;
     }
   }
diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
index c69d0feb9..17e070a7d 100644
--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -1,34 +1,33 @@
 .feeds-participation {
+  $gap: rem-calc(map-get($grid-column-gutter, medium));
+  @include grid-column-gutter;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$gap;
 
-  @include breakpoint(medium) {
+  .feed-proposals {
+    flex-basis: rem-calc(480);
+    flex-grow: 2;
+  }
+
+  .feed-debates {
+    flex-basis: rem-calc(240);
+    flex-grow: 1;
+  }
+
+  .feed-proposals,
+  .feed-debates {
     display: flex;
+    margin-left: $gap;
+    margin-top: $line-height;
+    flex-direction: column;
 
-    .feed-proposals:not(:only-child) {
-      width: 2 * 100% / 3;
-    }
-
-    .feed-debates:not(:only-child) {
-      width: 1 * 100% / 3;
-    }
-
-    .feed-proposals,
-    .feed-debates {
-      display: flex;
-      flex-direction: column;
-
-      .feed-content {
-        flex-grow: 1;
-      }
+    .feed-content {
+      flex-grow: 1;
     }
   }
 
   .sdg-tag-list {
     margin-top: $line-height / 2;
   }
-
-  .feed-debates,
-  .feed-proposals {
-    @include grid-col;
-    margin-top: $line-height;
-  }
 }