From 7c7cf2b043b4e6b48c2ea3daf59beae2a6d27e3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 2 Sep 2021 23:32:09 +0200
Subject: [PATCH] Move budget group actions to their own line

The problem of having actions next to the title is that, when there are
titles of very different lenghts, at certain resolutions some actions
will be next to their titles (because there'll be space for everything)
but some actions will be below their titles. This makes it hard for
people to follow where the actions are.
---
 .../admin/budgets/groups_and_headings.scss    | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss
index c6f7d5a86..0d6c2d11b 100644
--- a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss
@@ -6,20 +6,6 @@
     margin-top: $line-height * 1.5;
   }
 
-  > section {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  h4 {
-    margin-#{$global-right}: $gap;
-  }
-
-  dl,
-  .callout {
-    width: 100%;
-  }
-
   dt,
   dd {
     display: inline;
@@ -44,8 +30,10 @@
   .groups-actions {
     @include flex-with-gap($gap);
     align-items: flex-start;
-    flex: 1;
-    margin-bottom: $line-height / 2;
+
+    + * {
+      margin-top: $line-height / 2;
+    }
 
     .edit-link,
     .destroy-link {