improve small screen layout

2023-04-27 16:51:46 +10:00
parent f0461fb65f
commit e17f79e0b1
1 changed files with 4 additions and 2 deletions
--- a/resources/js/components/SMButtonRow.vue
+++ b/resources/js/components/SMButtonRow.vue
@@ -19,7 +19,8 @@ const slots = useSlots();
 <style lang="scss">
 .row.button-row {
    flex-direction: row-reverse;
-    padding: 0 16px;
+    align-items: center;
+    // padding: 0 16px;

    & > div {
        display: flex;
@@ -34,12 +35,13 @@ const slots = useSlots();
 }

@media only screen and (max-width: 768px) {
-    .button-row {
+    .row.button-row {
        padding: 0;
        flex-direction: column-reverse;
        gap: 15px;

        & > div {
+            align-items: center;
            flex-direction: column;
        }
    }