From dcd553d5dc861dffb7a3e3511645b615cd59832d Mon Sep 17 00:00:00 2001
From: Marco Segreto <marco.segreto@dfinity.org>
Date: Mon, 22 Mar 2021 14:56:57 -0700
Subject: [PATCH] fix: button design on mobile (#308)

* Fix continue button style on small screens

* Added newline
---
 .../src/components/Button.tsx                 | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/identity-provider/src/components/Button.tsx b/apps/identity-provider/src/components/Button.tsx
index 22a8410c..57664105 100644
--- a/apps/identity-provider/src/components/Button.tsx
+++ b/apps/identity-provider/src/components/Button.tsx
@@ -1,11 +1,24 @@
 import MatButton, { ButtonProps } from '@material-ui/core/Button';
-import { styled } from '@material-ui/core/styles';
+import { withStyles, createStyles, Theme } from '@material-ui/core/styles';
 import React from 'react';
 
-const SpacedMatButton = styled(MatButton)(({ theme }) => ({
-  marginLeft: theme.spacing(1),
-  marginRight: theme.spacing(1),
-}));
+const styles = ({ breakpoints, spacing }: Theme) => createStyles({
+  root: {
+    marginLeft: spacing(1),
+    marginRight: spacing(1),
+    maxWidth: `calc(100% - ${spacing(1)}px)`,
+    whiteSpace: 'nowrap'
+  },
+  [breakpoints.down('xs')]: {
+    label: {
+      display: 'block'
+    }
+  }
+});
+
+const SpacedMatButton = withStyles(styles)((props: ButtonProps) => 
+  <MatButton {...props} classes={props.classes}  />
+);
 
 export const Button = Object.assign(
   (