From 6458e0d7ec02689b217154bfabb8f7903caa26d7 Mon Sep 17 00:00:00 2001
From: Chris Pymm <chris@chrispymm.co.uk>
Date: Wed, 30 Oct 2024 11:52:48 +0000
Subject: [PATCH] fix(button menu): small tweak to fix alignment within an
 moj-button-group without js

---
 .../components/button-menu/_button-menu.scss  |  2 ++
 src/moj/objects/_button-group.scss            | 26 +++++++------------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/moj/components/button-menu/_button-menu.scss b/src/moj/components/button-menu/_button-menu.scss
index 580b2e2af..534a47c8e 100644
--- a/src/moj/components/button-menu/_button-menu.scss
+++ b/src/moj/components/button-menu/_button-menu.scss
@@ -6,7 +6,9 @@ $moj-datepicker-mid-grey: #949494;
   position: relative;
 
   > .govuk-button {
+    // required for no-js alignment within moj-button-group
     margin-bottom: 0;
+    vertical-align: baseline;
   }
 }
 
diff --git a/src/moj/objects/_button-group.scss b/src/moj/objects/_button-group.scss
index 1be953e57..8015079e0 100644
--- a/src/moj/objects/_button-group.scss
+++ b/src/moj/objects/_button-group.scss
@@ -1,4 +1,3 @@
-
 .moj-button-group {
   $horizontal-gap: govuk-spacing(3);
   $vertical-gap: govuk-spacing(3);
@@ -6,32 +5,27 @@
 
   @extend .govuk-button-group;
 
-
   &--inline {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: baseline;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
     gap: $horizontal-gap;
     margin-right: 0;
 
-  .moj-button-menu {
+    .moj-button-menu {
       margin-bottom: $vertical-gap + $button-shadow-size;
     }
 
-  .moj-button-menu .moj-button-menu__toggle-button {
+    .moj-button-menu .moj-button-menu__toggle-button {
       vertical-align: baseline;
     }
 
-  .moj-button-menu,
-  .govuk-button,
-  .govuk-link {
-    width: auto;
-    margin-right: 0;
+    > .moj-button-menu,
+    > .govuk-button,
+    > .govuk-link {
+      width: auto;
+      margin-right: 0;
       margin-bottom: 0;
     }
-
-  /* :is(.govuk, .moj-button-menu, .govuk-link) + :is(.govuk, .moj-button-menu, .govuk-link) { */
-  /*     margin-top: $horizontal-gap; */
-  /*   } */
   }
 }