From b5b65e3d81dd92e64d4e1c366d20bc45551f121e Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sun, 3 Oct 2021 17:08:13 -0600
Subject: [PATCH] ui(admin): fix max width container

---
 .../scripts/components/admin/Sidebar.tsx      | 14 +++--
 resources/scripts/routers/AdminRouter.tsx     | 62 ++++++++++---------
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/resources/scripts/components/admin/Sidebar.tsx b/resources/scripts/components/admin/Sidebar.tsx
index d43839255..b1efeb578 100644
--- a/resources/scripts/components/admin/Sidebar.tsx
+++ b/resources/scripts/components/admin/Sidebar.tsx
@@ -52,22 +52,26 @@ const Sidebar = styled.div<{ $collapsed?: boolean }>`
       ${tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`};
     }
   }
-  
+
   ${props => props.$collapsed && css`
     ${tw`w-20`};
-    
+
     ${Section} {
       ${tw`invisible`};
     }
 
-    ${Wrapper} > a {
-      ${tw`justify-center px-0`};
+    ${Wrapper} {
+        ${tw`px-5`};
+
+        & > a {
+            ${tw`justify-center px-0`};
+        }
     }
 
     & > a {
       ${tw`justify-center px-4`};
     }
-    
+
     & > a > span,
     ${User} > div,
     ${User} > a,
diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx
index 6fca9faa9..51b1b0b9a 100644
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/resources/scripts/routers/AdminRouter.tsx
@@ -33,7 +33,7 @@ import { AdminContext } from '@/state/admin';
 import {
     CogIcon,
     DatabaseIcon,
-    FolderAddIcon,
+    FolderIcon,
     GlobeIcon,
     OfficeBuildingIcon,
     ReplyIcon,
@@ -100,7 +100,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                         <ViewGridIcon/><span>Nests</span>
                     </NavLink>
                     <NavLink to={`${match.url}/mounts`}>
-                        <FolderAddIcon/><span>Mounts</span>
+                        <FolderIcon/><span>Mounts</span>
                     </NavLink>
                 </Sidebar.Wrapper>
                 <NavLink to={'/'} css={tw`mt-auto mb-3`}>
@@ -117,34 +117,36 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                 </Sidebar.User>
             </Sidebar>
             <div css={tw`flex-1 overflow-x-hidden px-6 pt-6 lg:px-10 lg:pt-8 xl:px-16 xl:pt-12`}>
-                <Switch location={location}>
-                    <Route path={`${match.path}`} component={OverviewContainer} exact/>
-                    <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
-                    <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
-                    <Route path={`${match.path}/databases/new`} component={NewDatabaseContainer} exact/>
-                    <Route path={`${match.path}/databases/:id`} component={DatabaseEditContainer} exact/>
-                    <Route path={`${match.path}/locations`} component={LocationsContainer} exact/>
-                    <Route path={`${match.path}/locations/:id`} component={LocationEditContainer} exact/>
-                    <Route path={`${match.path}/nodes`} component={NodesContainer} exact/>
-                    <Route path={`${match.path}/nodes/new`} component={NewNodeContainer} exact/>
-                    <Route path={`${match.path}/nodes/:id`} component={NodeRouter}/>
-                    <Route path={`${match.path}/servers`} component={ServersContainer} exact/>
-                    <Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/>
-                    <Route path={`${match.path}/servers/:id`} component={ServerRouter}/>
-                    <Route path={`${match.path}/users`} component={UsersContainer} exact/>
-                    <Route path={`${match.path}/users/new`} component={NewUserContainer} exact/>
-                    <Route path={`${match.path}/users/:id`} component={UserRouter}/>
-                    <Route path={`${match.path}/roles`} component={RolesContainer} exact/>
-                    <Route path={`${match.path}/roles/:id`} component={RoleEditContainer} exact/>
-                    <Route path={`${match.path}/nests`} component={NestsContainer} exact/>
-                    <Route path={`${match.path}/nests/:nestId`} component={NestEditContainer} exact/>
-                    <Route path={`${match.path}/nests/:nestId/new`} component={NewEggContainer} exact/>
-                    <Route path={`${match.path}/nests/:nestId/eggs/:id`} component={EggRouter}/>
-                    <Route path={`${match.path}/mounts`} component={MountsContainer} exact/>
-                    <Route path={`${match.path}/mounts/new`} component={NewMountContainer} exact/>
-                    <Route path={`${match.path}/mounts/:id`} component={MountEditContainer} exact/>
-                    <Route path={'*'} component={NotFound}/>
-                </Switch>
+                <div css={tw`w-full flex flex-col mx-auto`} style={{ maxWidth: '86rem' }}>
+                    <Switch location={location}>
+                        <Route path={`${match.path}`} component={OverviewContainer} exact/>
+                        <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
+                        <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
+                        <Route path={`${match.path}/databases/new`} component={NewDatabaseContainer} exact/>
+                        <Route path={`${match.path}/databases/:id`} component={DatabaseEditContainer} exact/>
+                        <Route path={`${match.path}/locations`} component={LocationsContainer} exact/>
+                        <Route path={`${match.path}/locations/:id`} component={LocationEditContainer} exact/>
+                        <Route path={`${match.path}/nodes`} component={NodesContainer} exact/>
+                        <Route path={`${match.path}/nodes/new`} component={NewNodeContainer} exact/>
+                        <Route path={`${match.path}/nodes/:id`} component={NodeRouter}/>
+                        <Route path={`${match.path}/servers`} component={ServersContainer} exact/>
+                        <Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/>
+                        <Route path={`${match.path}/servers/:id`} component={ServerRouter}/>
+                        <Route path={`${match.path}/users`} component={UsersContainer} exact/>
+                        <Route path={`${match.path}/users/new`} component={NewUserContainer} exact/>
+                        <Route path={`${match.path}/users/:id`} component={UserRouter}/>
+                        <Route path={`${match.path}/roles`} component={RolesContainer} exact/>
+                        <Route path={`${match.path}/roles/:id`} component={RoleEditContainer} exact/>
+                        <Route path={`${match.path}/nests`} component={NestsContainer} exact/>
+                        <Route path={`${match.path}/nests/:nestId`} component={NestEditContainer} exact/>
+                        <Route path={`${match.path}/nests/:nestId/new`} component={NewEggContainer} exact/>
+                        <Route path={`${match.path}/nests/:nestId/eggs/:id`} component={EggRouter}/>
+                        <Route path={`${match.path}/mounts`} component={MountsContainer} exact/>
+                        <Route path={`${match.path}/mounts/new`} component={NewMountContainer} exact/>
+                        <Route path={`${match.path}/mounts/:id`} component={MountEditContainer} exact/>
+                        <Route path={'*'} component={NotFound}/>
+                    </Switch>
+                </div>
             </div>
         </div>
     );