ui(admin): fix max width container

This commit is contained in:
Matthew Penner 2021-10-03 17:08:13 -06:00
parent fcfca0730e
commit b5b65e3d81
No known key found for this signature in database
GPG key ID: BAB67850901908A8
2 changed files with 41 additions and 35 deletions

View file

@ -60,8 +60,12 @@ const Sidebar = styled.div<{ $collapsed?: boolean }>`
${tw`invisible`}; ${tw`invisible`};
} }
${Wrapper} > a { ${Wrapper} {
${tw`justify-center px-0`}; ${tw`px-5`};
& > a {
${tw`justify-center px-0`};
}
} }
& > a { & > a {

View file

@ -33,7 +33,7 @@ import { AdminContext } from '@/state/admin';
import { import {
CogIcon, CogIcon,
DatabaseIcon, DatabaseIcon,
FolderAddIcon, FolderIcon,
GlobeIcon, GlobeIcon,
OfficeBuildingIcon, OfficeBuildingIcon,
ReplyIcon, ReplyIcon,
@ -100,7 +100,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
<ViewGridIcon/><span>Nests</span> <ViewGridIcon/><span>Nests</span>
</NavLink> </NavLink>
<NavLink to={`${match.url}/mounts`}> <NavLink to={`${match.url}/mounts`}>
<FolderAddIcon/><span>Mounts</span> <FolderIcon/><span>Mounts</span>
</NavLink> </NavLink>
</Sidebar.Wrapper> </Sidebar.Wrapper>
<NavLink to={'/'} css={tw`mt-auto mb-3`}> <NavLink to={'/'} css={tw`mt-auto mb-3`}>
@ -117,34 +117,36 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
</Sidebar.User> </Sidebar.User>
</Sidebar> </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`}> <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}> <div css={tw`w-full flex flex-col mx-auto`} style={{ maxWidth: '86rem' }}>
<Route path={`${match.path}`} component={OverviewContainer} exact/> <Switch location={location}>
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/> <Route path={`${match.path}`} component={OverviewContainer} exact/>
<Route path={`${match.path}/databases`} component={DatabasesContainer} exact/> <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
<Route path={`${match.path}/databases/new`} component={NewDatabaseContainer} exact/> <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
<Route path={`${match.path}/databases/:id`} component={DatabaseEditContainer} exact/> <Route path={`${match.path}/databases/new`} component={NewDatabaseContainer} exact/>
<Route path={`${match.path}/locations`} component={LocationsContainer} exact/> <Route path={`${match.path}/databases/:id`} component={DatabaseEditContainer} exact/>
<Route path={`${match.path}/locations/:id`} component={LocationEditContainer} exact/> <Route path={`${match.path}/locations`} component={LocationsContainer} exact/>
<Route path={`${match.path}/nodes`} component={NodesContainer} exact/> <Route path={`${match.path}/locations/:id`} component={LocationEditContainer} exact/>
<Route path={`${match.path}/nodes/new`} component={NewNodeContainer} exact/> <Route path={`${match.path}/nodes`} component={NodesContainer} exact/>
<Route path={`${match.path}/nodes/:id`} component={NodeRouter}/> <Route path={`${match.path}/nodes/new`} component={NewNodeContainer} exact/>
<Route path={`${match.path}/servers`} component={ServersContainer} exact/> <Route path={`${match.path}/nodes/:id`} component={NodeRouter}/>
<Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/> <Route path={`${match.path}/servers`} component={ServersContainer} exact/>
<Route path={`${match.path}/servers/:id`} component={ServerRouter}/> <Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/>
<Route path={`${match.path}/users`} component={UsersContainer} exact/> <Route path={`${match.path}/servers/:id`} component={ServerRouter}/>
<Route path={`${match.path}/users/new`} component={NewUserContainer} exact/> <Route path={`${match.path}/users`} component={UsersContainer} exact/>
<Route path={`${match.path}/users/:id`} component={UserRouter}/> <Route path={`${match.path}/users/new`} component={NewUserContainer} exact/>
<Route path={`${match.path}/roles`} component={RolesContainer} exact/> <Route path={`${match.path}/users/:id`} component={UserRouter}/>
<Route path={`${match.path}/roles/:id`} component={RoleEditContainer} exact/> <Route path={`${match.path}/roles`} component={RolesContainer} exact/>
<Route path={`${match.path}/nests`} component={NestsContainer} exact/> <Route path={`${match.path}/roles/:id`} component={RoleEditContainer} exact/>
<Route path={`${match.path}/nests/:nestId`} component={NestEditContainer} exact/> <Route path={`${match.path}/nests`} component={NestsContainer} exact/>
<Route path={`${match.path}/nests/:nestId/new`} component={NewEggContainer} exact/> <Route path={`${match.path}/nests/:nestId`} component={NestEditContainer} exact/>
<Route path={`${match.path}/nests/:nestId/eggs/:id`} component={EggRouter}/> <Route path={`${match.path}/nests/:nestId/new`} component={NewEggContainer} exact/>
<Route path={`${match.path}/mounts`} component={MountsContainer} exact/> <Route path={`${match.path}/nests/:nestId/eggs/:id`} component={EggRouter}/>
<Route path={`${match.path}/mounts/new`} component={NewMountContainer} exact/> <Route path={`${match.path}/mounts`} component={MountsContainer} exact/>
<Route path={`${match.path}/mounts/:id`} component={MountEditContainer} exact/> <Route path={`${match.path}/mounts/new`} component={NewMountContainer} exact/>
<Route path={'*'} component={NotFound}/> <Route path={`${match.path}/mounts/:id`} component={MountEditContainer} exact/>
</Switch> <Route path={'*'} component={NotFound}/>
</Switch>
</div>
</div> </div>
</div> </div>
); );