From c64af939e0e393b8a6a002dec2514d3dd0e7bffc Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Tue, 26 Mar 2024 15:07:13 +0000
Subject: [PATCH] fix: action bar buttons on mobile

https://app.clickup.com/t/86azp8r7v
---
 .../cxl-ui/scss/global/cxl-app-layout.scss    | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/cxl-ui/scss/global/cxl-app-layout.scss b/packages/cxl-ui/scss/global/cxl-app-layout.scss
index 2e2656475..eb5a09310 100644
--- a/packages/cxl-ui/scss/global/cxl-app-layout.scss
+++ b/packages/cxl-ui/scss/global/cxl-app-layout.scss
@@ -97,17 +97,30 @@ cxl-app-layout {
   /**
    * Action bar.
    */
-  [slot="action-bar"] > * {
-    margin-left: var(--lumo-space-xs);
-  }
+  [slot="action-bar"] {
+    > * {
+      margin-left: var(--lumo-space-xs);
 
-  [slot="action-bar"] > *:first-child {
-    flex: 1;
-    margin-left: unset;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    > .mobile,
+    > vaadin-button {
+      flex: 1;
+    }
+
+    > .mobile {
+      text-align: center;
+    }
   }
 
-  &[wide] [slot="action-bar"] > *:first-child {
-    flex: unset;
+  &[wide] [slot="action-bar"] {
+    > .mobile,
+    > vaadin-button {
+      flex: initial;
+    }
   }
 
   /**
@@ -126,5 +139,4 @@ cxl-app-layout {
       }
     }
   }
-
 }