Remove horizontal whitespace on user profile page for small breakpoints

3 files changed, 29 insertions, 16 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index b813eb16dad..a1e847009fc 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -249,6 +249,16 @@
     .event-item {
       padding-left: 40px;
     }
+
+    @include media-breakpoint-up(lg) {
+      margin-right: 5px;
+    }
+  }
+
+  .projects-block {
+    @include media-breakpoint-up(lg) {
+      margin-left: 5px;
+    }
   }
 
   @include media-breakpoint-down(xs) {
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index d22905ecc93..b5bc1180290 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -9,24 +9,22 @@
   .col-md-12.col-lg-6
     - if can?(current_user, :read_cross_project)
       .activities-block
-        .append-right-5
-          .prepend-top-16
-            .d-flex.align-items-center.border-bottom
-              %h4.flex-grow
-                = s_('UserProfile|Activity')
-              = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
-            .overview-content-list{ data: { href: user_path } }
-              .center.light.loading
-                = spinner nil, true
-
-  .col-md-12.col-lg-6
-    .projects-block
-      .prepend-left-5
         .prepend-top-16
           .d-flex.align-items-center.border-bottom
             %h4.flex-grow
-              = s_('UserProfile|Personal projects')
-            = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
-          .overview-content-list{ data: { href: user_projects_path } }
+              = s_('UserProfile|Activity')
+            = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
+          .overview-content-list{ data: { href: user_path } }
             .center.light.loading
               = spinner nil, true
+
+  .col-md-12.col-lg-6
+    .projects-block
+      .prepend-top-16
+        .d-flex.align-items-center.border-bottom
+          %h4.flex-grow
+            = s_('UserProfile|Personal projects')
+          = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
+        .overview-content-list{ data: { href: user_projects_path } }
+          .center.light.loading
+            = spinner nil, true
diff --git a/changelogs/unreleased/56010-user-profile-page-horizonal-whitespace-between-overview-columns-breaks-two-column-layout.yml b/changelogs/unreleased/56010-user-profile-page-horizonal-whitespace-between-overview-columns-breaks-two-column-layout.yml
new file mode 100644
index 00000000000..407346bbf22
--- /dev/null
+++ b/changelogs/unreleased/56010-user-profile-page-horizonal-whitespace-between-overview-columns-breaks-two-column-layout.yml
@@ -0,0 +1,5 @@
+---
+title: Remove horizontal whitespace on user profile overview on small breakpoints
+merge_request: 24189
+author:
+type: other