From 09de50728c9d50e2dcc785d93bcd260c370e8dc4 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Thu, 28 Jan 2021 09:15:32 -0600
Subject: [PATCH] Add responsive styles

---
 .../public/application/_dashboard_app.scss         | 14 ++++++++++++++
 .../listing/dashboard_unsaved_listing.tsx          | 11 +++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/plugins/dashboard/public/application/_dashboard_app.scss b/src/plugins/dashboard/public/application/_dashboard_app.scss
index 63a73d6f80c8f..ca956948c006c 100644
--- a/src/plugins/dashboard/public/application/_dashboard_app.scss
+++ b/src/plugins/dashboard/public/application/_dashboard_app.scss
@@ -49,3 +49,17 @@
 .dshUnsavedListingItem__actions {
   margin-left: $euiSizeL + $euiSizeXS;
 }
+
+@include euiBreakpoint('xs', 's') {
+  .dshUnsavedListingItem {
+    margin-top: $euiSize;
+  }
+
+  .dshUnsavedListingItem__heading {
+    margin-bottom: $euiSizeXS;
+  }
+
+  .dshUnsavedListingItem__actions {
+    flex-direction: column;
+  }
+}
\ No newline at end of file
diff --git a/src/plugins/dashboard/public/application/listing/dashboard_unsaved_listing.tsx b/src/plugins/dashboard/public/application/listing/dashboard_unsaved_listing.tsx
index 05163406b22e0..8378376caf0e7 100644
--- a/src/plugins/dashboard/public/application/listing/dashboard_unsaved_listing.tsx
+++ b/src/plugins/dashboard/public/application/listing/dashboard_unsaved_listing.tsx
@@ -36,7 +36,12 @@ const DashboardUnsavedItem = ({
   const title = dashboard?.title ?? getNewDashboardTitle();
   return (
     <div className="dshUnsavedListingItem">
-      <EuiFlexGroup alignItems="center" gutterSize="none">
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="none"
+        className="dshUnsavedListingItem__heading"
+        responsive={false}
+      >
         <EuiFlexItem grow={false}>
           <EuiIcon color="text" className="dshUnsavedListingItem__icon" type="dashboardApp" />
         </EuiFlexItem>
@@ -49,9 +54,10 @@ const DashboardUnsavedItem = ({
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexGroup
-        gutterSize="none"
         alignItems="flexStart"
+        gutterSize="none"
         className="dshUnsavedListingItem__actions"
+        responsive={false}
       >
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
@@ -67,6 +73,7 @@ const DashboardUnsavedItem = ({
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
+            flush="left"
             size="s"
             color="danger"
             onClick={onDiscardClick}