From 57056d2c06e98ff78ab79af9914185d94f374e1b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 1 Nov 2022 12:52:29 +0800
Subject: [PATCH] Use full width on smaller devices

---
 packages/web/pages/settings/integrations.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index 479e11f67..d74e90103 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -32,6 +32,10 @@ const Subheader = styled(Box, {
   borderBottom: '1px solid $grayLine',
   margin: '0 auto',
   width: '80%',
+  // Our defined media queries don't work in styled components
+  '@media (max-width: 575px)': {
+    width: '100%',
+  },
 })
 
 //interface
@@ -139,6 +143,9 @@ export default function Integrations(): JSX.Element {
           width: '80%',
           margin: '0 auto',
           height: '500px',
+          '@smDown': {
+            width: '100%'
+          }
         }}
       >
         <Header>Applications</Header>
@@ -157,6 +164,7 @@ export default function Integrations(): JSX.Element {
                 alignItems: 'center',
                 '@smDown': {
                   flexWrap: 'wrap',
+                  borderRadius: 'unset',
                 },
               }}
             >