Move badges underneath header

code-asher · code-asher · commit 1be8f15f4cfe · 2023-12-18T11:19:08.000-09:00
This will work better on smaller screens.

Also I had an extra useless Stack around the button.
diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -42,28 +42,27 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
         direction="row"
         justifyContent="space-between"
       >
-        <Header
-          title="OAuth2 Applications"
-          description="Configure applications to use Coder as an OAuth2 provider."
-        />
-
-        <Badges>
-          {isEntitled ? <EntitledBadge /> : <DisabledBadge />}
-          <EnterpriseBadge />
-        </Badges>
+        <div>
+          <Header
+            title="OAuth2 Applications"
+            description="Configure applications to use Coder as an OAuth2 provider."
+          />
+          <Badges>
+            {isEntitled ? <EntitledBadge /> : <DisabledBadge />}
+            <EnterpriseBadge />
+          </Badges>
+        </div>
 
-        <Stack direction="row" spacing={2}>
-          <Button
-            component={Link}
-            to="/deployment/oauth2-provider/apps/add"
-            startIcon={<AddIcon />}
-          >
-            Add application
-          </Button>
-        </Stack>
+        <Button
+          component={Link}
+          to="/deployment/oauth2-provider/apps/add"
+          startIcon={<AddIcon />}
+        >
+          Add application
+        </Button>
       </Stack>
 
-      <TableContainer>
+      <TableContainer css={{ marginTop: 32 }}>
         <Table>
           <TableHead>
             <TableRow>
