From 2d68d9f16c9c1004a6687aff86f89107d3b45f2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <b.baedorf@openproject.com>
Date: Thu, 10 Aug 2023 14:49:49 +0200
Subject: [PATCH] fix: Make activity page columns the same width

When having long texts in the changes column, it could take up a ton of
space, making the projects column very narrow. This commit hardcodes
the widths to be 50% each.

This commit also fixes mobile by wrapping the two columns if there isn't
enough horizontal space.

Ref: https://community.openproject.org/projects/openproject/work_packages/49595/activity
---
 app/views/placeholder_users/show.html.erb    | 2 +-
 app/views/users/show.html.erb                | 2 +-
 frontend/src/global_styles/layout/_grid.sass | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/views/placeholder_users/show.html.erb b/app/views/placeholder_users/show.html.erb
index 4341fdbf2bc1..4a7071a9dbdc 100644
--- a/app/views/placeholder_users/show.html.erb
+++ b/app/views/placeholder_users/show.html.erb
@@ -43,7 +43,7 @@ See COPYRIGHT and LICENSE files for more details.
   <% end %>
 <% end %>
 
-<div class="grid-block medium-up-2">
+<div class="grid-block grid-block_double-column">
   <div class="grid-content">
     <%= call_hook :view_account_left_top, placeholder_user: @placeholder_user %>
 
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 19d1534ff200..d06c82d58ac2 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -53,7 +53,7 @@ See COPYRIGHT and LICENSE files for more details.
     </li>
   <% end %>
 <% end %>
-<div class="grid-block medium-up-2">
+<div class="grid-block grid-block_double-column">
   <div class="grid-content">
     <%= call_hook :view_account_left_top, user: @user %>
     <% if visible_user_information?(@user) %>
diff --git a/frontend/src/global_styles/layout/_grid.sass b/frontend/src/global_styles/layout/_grid.sass
index 0f592c850672..0320775c3e76 100644
--- a/frontend/src/global_styles/layout/_grid.sass
+++ b/frontend/src/global_styles/layout/_grid.sass
@@ -262,6 +262,15 @@ $block-grid-max-size: 6 !default
     &, .grid-content
       overflow: visible
 
+  &_double-column
+    flex-wrap: wrap
+
+    > .grid-content
+      min-width: 300px
+      flex-basis: 50%
+      flex-shrink: 0
+      flex-grow: 1
+
 .grid-content
   @extend %child-core
   @include grid-content