Modify responsive size for buttons on mobile

- fixes #6618

CHANGELOG.txt

@@ -21,6 +21,7 @@ Changelog
  * Fix: `default_app_config` deprecations for Django >= 3.2 (Tibor Leupold)
  * Fix: Refresh page from database on create before passing to hooks. Page aliases get correct `first_published_date` and `last_published_date` (Dan Braghis)
  * Fix: Additional login form fields from `WAGTAILADMIN_USER_LOGIN_FORM` are now rendered correctly (Michael Karamuth)
+ * Fix: Icon only button styling issue on small devices where height would not be set correctly (Vu Pham)
 
 
 2.15.2 (xx.xx.xxxx) - IN DEVELOPMENT

client/scss/components/_button.scss

@@ -406,6 +406,8 @@
 
     &.button-small {
         line-height: 1.7rem;
+        height: 1.8rem;
+        width: 1.8rem;
 
         .icon {
             padding: 0.25em;
@@ -415,11 +417,6 @@
     @include media-breakpoint-up(sm) {
         width: 2.2rem;
         height: 2.2rem;
-
-        &.button-small {
-            height: 1.8rem;
-            width: 1.8rem;
-        }
     }
 }
 

docs/releases/2.16.md

@@ -30,6 +30,7 @@
  * Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
  * Pages are refreshed from database on create before passing to hooks. Page aliases get correct `first_published_date` and `last_published_date` (Dan Braghis)
  * Additional login form fields from `WAGTAILADMIN_USER_LOGIN_FORM` are now rendered correctly (Michael Karamuth)
+ * Fix icon only button styling issue on small devices where height would not be set correctly (Vu Pham)
 
 ## Upgrade considerations