From 6d24a35240234aeb50c2dd1a82f565828729ec02 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 4 Aug 2020 10:52:53 -0500
Subject: [PATCH] feat(modal): stack modal buttons in small viewports

---
 .../components/src/components/modal/_modal.scss   | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
index b7234af96a9d..e597641d88c1 100644
--- a/packages/components/src/components/modal/_modal.scss
+++ b/packages/components/src/components/modal/_modal.scss
@@ -295,6 +295,7 @@
 
   .#{$prefix}--modal-footer {
     display: flex;
+    flex-direction: column;
 
     grid-row: -1/-1;
     grid-column: 1/-1;
@@ -302,6 +303,10 @@
     height: 4rem;
     margin-top: auto;
 
+    @include carbon--breakpoint(md) {
+      flex-direction: row;
+    }
+
     button.#{$prefix}--btn {
       flex: 0 1 50%;
       max-width: none;
@@ -309,6 +314,16 @@
       margin: 0;
       padding-top: $spacing-05;
       padding-bottom: $spacing-07;
+      border-bottom: $button-separator;
+
+      @include carbon--breakpoint(md) {
+        border-right: $button-separator;
+        border-bottom: 0;
+      }
+
+      &:last-of-type {
+        border: 0;
+      }
     }
   }