display button like other create buttons on mobile sites

scm-ui-components/packages/ui-components/src/layout/Page.js

@@ -21,7 +21,8 @@ type Props = {
 
 const styles = {
   spacing: {
-    marginTop: "1.25rem"
+    marginTop: "1.25rem",
+    textAlign: "right"
   }
 };
 
@@ -62,7 +63,7 @@ class Page extends React.Component<Props> {
             <Subtitle subtitle={subtitle} />
           </div>
           <div className="column is-two-fifths">
-            <div className={classNames(classes.spacing, "is-pulled-right")}>{content}</div>
+            <div className={classNames(classes.spacing, "is-mobile-create-button-spacing")}>{content}</div>
           </div>
         </div>
         {underline}

scm-ui/styles/scm.scss

@@ -47,6 +47,19 @@ hr.header-with-actions {
   height: 1px;
   margin-top: -10px;
   background-color: $primary;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+}
+.is-mobile-create-button-spacing {
+  @media screen and (max-width: 768px) {
+    border: 2px solid #e9f7fd;
+    padding: 1em 1em;
+    margin-top: 0 !important;
+    width: 100%;
+    text-align: center !important;
+  }
 }
 
 .footer {