fix(button menu): fix button spacings on very small screens

ministryofjustice · Oct 28, 2024 · 475ee1c · 475ee1c
1 parent 3b12870
commit 475ee1c
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 13 deletions.
diff --git a/src/moj/components/button-menu/_button-menu.scss b/src/moj/components/button-menu/_button-menu.scss
@@ -4,6 +4,10 @@ $moj-datepicker-mid-grey: #949494;
 .moj-button-menu {
   display: inline-block;
   position: relative;
+
+  > .govuk-button {
+    margin-bottom: 0;
+  }
 }
 
 .moj-button-menu__toggle-button {

diff --git a/src/moj/components/button-menu/button-menu.js b/src/moj/components/button-menu/button-menu.js
@@ -47,6 +47,7 @@ MOJFrontend.ButtonMenu.prototype.init = function () {
       if (className.startsWith("govuk-button-")) {
         button.classList.remove(className);
       }
+      button.classList.remove("moj-button-menu__item")
     });
     if (this.config.buttonClasses) {
       button.classList.add(...this.config.buttonClasses.split(" "));

diff --git a/src/moj/components/identity-bar/_identity-bar.scss b/src/moj/components/identity-bar/_identity-bar.scss
@@ -11,18 +11,16 @@
   padding-top: govuk-spacing(2);
 }
 
-
 .moj-identity-bar__container {
   @include moj-width-container;
   font-size: 0; /* Hide whitespace between elements */
   text-align: justify; /* Trick to remove the need for floats */
 
   &:after {
-    content: '';
+    content: "";
     display: inline-block;
     width: 100%;
   }
-
 }
 
 .moj-identity-bar__title {
@@ -42,18 +40,13 @@
     padding-top: govuk-spacing(2) + 1px; /* Alignment tweaks */
     padding-bottom: govuk-spacing(2) - 1px; /* Alignment tweaks */
   }
-
 }
 
-
 .moj-identity-bar__actions {
-  margin-bottom: - govuk-spacing(2);
-
   @include govuk-media-query($from: tablet) {
     display: inline-block;
     vertical-align: middle;
   }
-
 }
 
 .moj-identity-bar__menu {
@@ -67,5 +60,4 @@
   .moj-button-menu__toggle-button {
     margin-bottom: 0;
   }
-
 }
diff --git a/src/moj/components/page-header-actions/_page-header-actions.scss b/src/moj/components/page-header-actions/_page-header-actions.scss
@@ -16,7 +16,7 @@
 
 .moj-page-header-actions__actions {
   .moj-button-group {
-    margin-bottom: 0
+    margin-bottom: 0;
   }
   .govuk-button {
     margin-bottom: 0;

diff --git a/src/moj/objects/_button-group.scss b/src/moj/objects/_button-group.scss
@@ -11,7 +11,8 @@
   flex-direction: row;
   flex-wrap: wrap;
   align-items: baseline;
-      margin-right: ($horizontal-gap * -1);
+    gap: $horizontal-gap;
+    margin-right: 0;
 
   .moj-button-menu {
       margin-bottom: $vertical-gap + $button-shadow-size;
@@ -20,11 +21,17 @@
   .moj-button-menu .moj-button-menu__toggle-button {
       vertical-align: baseline;
     }
+
   .moj-button-menu,
   .govuk-button,
   .govuk-link {
     width: auto;
-    margin-right: $horizontal-gap;
-  }
+    margin-right: 0;
+      margin-bottom: 0;
+    }
+
+  /* :is(.govuk, .moj-button-menu, .govuk-link) + :is(.govuk, .moj-button-menu, .govuk-link) { */
+  /*     margin-top: $horizontal-gap; */
+  /*   } */
   }
 }