sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

admin(ui): fix descriptions overflowing vertically

This commit is contained in:
Matthew Penner 2021-01-10 11:34:14 -07:00
parent 1800800308
commit 52b2463281
28 changed files with 107 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/scripts/components/admin/api/ApiKeysContainer.tsx
View File

@ -7,13 +7,15 @@ export default () => {
return ( return (
<AdminContentBlock title={'API Keys'}> <AdminContentBlock title={'API Keys'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>API Keys</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>API Keys</h2>
<p css={tw`text-base text-neutral-400`}>Control access credentials for managing this Panel via the API.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Control access credentials for managing this Panel via the API.</p>
</div> </div>
<div css={tw`flex ml-auto pl-4`}>
<NewApiKeyButton /> <NewApiKeyButton />
</div> </div>
</div>
</AdminContentBlock> </AdminContentBlock>
); );
}; };

2
resources/scripts/components/admin/api/NewApiKeyButton.tsx
View File

@ -165,7 +165,7 @@ export default () => {
} }
</Formik> </Formik>
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`} onClick={() => setVisible(true)}> <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
New API Key New API Key
</Button> </Button>
</> </>

4
resources/scripts/components/admin/databases/DatabaseEditContainer.tsx
View File

@ -197,9 +197,9 @@ const DatabaseEditContainer = () => {
return ( return (
<AdminContentBlock title={'Database - ' + database.name}> <AdminContentBlock title={'Database - ' + database.name}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{database.name}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{database.name}</h2>
<p css={tw`text-base text-neutral-400`}>{database.getAddress()}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{database.getAddress()}</p>
</div> </div>
</div> </div>

10
resources/scripts/components/admin/databases/DatabasesContainer.tsx
View File

@ -63,17 +63,19 @@ const DatabasesContainer = () => {
return ( return (
<AdminContentBlock title={'Databases'}> <AdminContentBlock title={'Databases'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Database Hosts</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Database Hosts</h2>
<p css={tw`text-base text-neutral-400`}>Database hosts that servers can have databases created on.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Database hosts that servers can have databases created on.</p>
</div> </div>
<NavLink to={`${match.url}/new`} css={tw`ml-auto`}> <div css={tw`flex ml-auto pl-4`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0`}> <NavLink to={`${match.url}/new`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Database Host New Database Host
</Button> </Button>
</NavLink> </NavLink>
</div> </div>
</div>
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/> <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>

6
resources/scripts/components/admin/databases/NewDatabaseContainer.tsx
View File

@ -4,11 +4,11 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => { export default () => {
return ( return (
<AdminContentBlock> <AdminContentBlock title={'New Database'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Database Host</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Database Host</h2>
<p css={tw`text-base text-neutral-400`}>Add a new database host to the panel.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new database host to the panel.</p>
</div> </div>
</div> </div>
</AdminContentBlock> </AdminContentBlock>

4
resources/scripts/components/admin/locations/LocationEditContainer.tsx
View File

@ -157,7 +157,7 @@ const LocationEditContainer = () => {
return ( return (
<AdminContentBlock title={'Location - ' + location.short}> <AdminContentBlock title={'Location - ' + location.short}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{location.short}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{location.short}</h2>
{ {
(location.long || '').length < 1 ? (location.long || '').length < 1 ?
@ -165,7 +165,7 @@ const LocationEditContainer = () => {
<span css={tw`italic`}>No long name</span> <span css={tw`italic`}>No long name</span>
</p> </p>
: :
<p css={tw`text-base text-neutral-400`}>{location.long}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{location.long}</p>
} }
</div> </div>
</div> </div>

6
resources/scripts/components/admin/locations/LocationsContainer.tsx
View File

@ -63,13 +63,15 @@ const LocationsContainer = () => {
return ( return (
<AdminContentBlock title={'Locations'}> <AdminContentBlock title={'Locations'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2>
<p css={tw`text-base text-neutral-400`}>All locations that nodes can be assigned to for easier categorization.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>All locations that nodes can be assigned to for easier categorization.</p>
</div> </div>
<div css={tw`flex ml-auto pl-4`}>
<NewLocationButton/> <NewLocationButton/>
</div> </div>
</div>
<FlashMessageRender byKey={'locations'} css={tw`mb-4`}/> <FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>

2
resources/scripts/components/admin/locations/NewLocationButton.tsx
View File

@ -103,7 +103,7 @@ export default () => {
} }
</Formik> </Formik>
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`} onClick={() => setVisible(true)}> <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
New Location New Location
</Button> </Button>
</> </>

4
resources/scripts/components/admin/mounts/MountEditContainer.tsx
View File

@ -187,7 +187,7 @@ const MountEditContainer = () => {
return ( return (
<AdminContentBlock title={'Mount - ' + mount.name}> <AdminContentBlock title={'Mount - ' + mount.name}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{mount.name}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{mount.name}</h2>
{ {
(mount.description || '').length < 1 ? (mount.description || '').length < 1 ?
@ -195,7 +195,7 @@ const MountEditContainer = () => {
<span css={tw`italic`}>No description</span> <span css={tw`italic`}>No description</span>
</p> </p>
: :
<p css={tw`text-base text-neutral-400`}>{mount.description}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{mount.description}</p>
} }
</div> </div>
</div> </div>

8
resources/scripts/components/admin/mounts/MountsContainer.tsx
View File

@ -63,15 +63,17 @@ const MountsContainer = () => {
return ( return (
<AdminContentBlock title={'Mounts'}> <AdminContentBlock title={'Mounts'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2>
<p css={tw`text-base text-neutral-400`}>Configure and manage additional mount points for servers.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Configure and manage additional mount points for servers.</p>
</div> </div>
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`}> <div css={tw`flex ml-auto pl-4`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Mount New Mount
</Button> </Button>
</div> </div>
</div>
<FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/> <FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/>

4
resources/scripts/components/admin/nests/NestEditContainer.tsx
View File

@ -262,7 +262,7 @@ const NestEditContainer = () => {
return ( return (
<AdminContentBlock title={'Nests - ' + nest.name}> <AdminContentBlock title={'Nests - ' + nest.name}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{nest.name}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{nest.name}</h2>
{ {
(nest.description || '').length < 1 ? (nest.description || '').length < 1 ?
@ -270,7 +270,7 @@ const NestEditContainer = () => {
<span css={tw`italic`}>No description</span> <span css={tw`italic`}>No description</span>
</p> </p>
: :
<p css={tw`text-base text-neutral-400`}>{nest.description}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{nest.description}</p>
} }
</div> </div>
</div> </div>

6
resources/scripts/components/admin/nests/NestsContainer.tsx
View File

@ -63,13 +63,15 @@ const NestsContainer = () => {
return ( return (
<AdminContentBlock title={'Nests'}> <AdminContentBlock title={'Nests'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nests</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nests</h2>
<p css={tw`text-base text-neutral-400`}>All nests currently available on this system.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>All nests currently available on this system.</p>
</div> </div>
<div css={tw`flex ml-auto pl-4`}>
<NewNestButton/> <NewNestButton/>
</div> </div>
</div>
<FlashMessageRender byKey={'nests'} css={tw`mb-4`}/> <FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>

2
resources/scripts/components/admin/nests/NewNestButton.tsx
View File

@ -103,7 +103,7 @@ export default () => {
} }
</Formik> </Formik>
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`} onClick={() => setVisible(true)}> <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
New Nest New Nest
</Button> </Button>
</> </>

4
resources/scripts/components/admin/nests/eggs/EggEditContainer.tsx
View File

@ -57,7 +57,7 @@ const EggEditContainer = () => {
return ( return (
<AdminContentBlock title={'Egg - ' + egg.name}> <AdminContentBlock title={'Egg - ' + egg.name}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{egg.name}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{egg.name}</h2>
{ {
(egg.description || '').length < 1 ? (egg.description || '').length < 1 ?
@ -65,7 +65,7 @@ const EggEditContainer = () => {
<span css={tw`italic`}>No description</span> <span css={tw`italic`}>No description</span>
</p> </p>
: :
<p css={tw`text-base text-neutral-400`}>{egg.description}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{egg.description}</p>
} }
</div> </div>
</div> </div>

6
resources/scripts/components/admin/nodes/NewNodeContainer.tsx
View File

@ -4,11 +4,11 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => { export default () => {
return ( return (
<AdminContentBlock> <AdminContentBlock title={'New Node'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Node</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Node</h2>
<p css={tw`text-base text-neutral-400`}>Add a new node to the panel.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new node to the panel.</p>
</div> </div>
</div> </div>
</AdminContentBlock> </AdminContentBlock>

4
resources/scripts/components/admin/nodes/NodeEditContainer.tsx
View File

@ -58,9 +58,9 @@ const NodeEditContainer = () => {
return ( return (
<AdminContentBlock title={'Node - ' + node.name}> <AdminContentBlock title={'Node - ' + node.name}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{node.name}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{node.name}</h2>
<p css={tw`text-base text-neutral-400`}>{node.uuid}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{node.uuid}</p>
</div> </div>
</div> </div>

10
resources/scripts/components/admin/nodes/NodesContainer.tsx
View File

@ -64,17 +64,19 @@ const NodesContainer = () => {
return ( return (
<AdminContentBlock title={'Nodes'}> <AdminContentBlock title={'Nodes'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2>
<p css={tw`text-base text-neutral-400`}>All nodes available on the system.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>All nodes available on the system.</p>
</div> </div>
<NavLink to={`${match.url}/new`} css={tw`ml-auto`}> <div css={tw`flex ml-auto pl-4`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0`}> <NavLink to={`${match.url}/new`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Node New Node
</Button> </Button>
</NavLink> </NavLink>
</div> </div>
</div>
<FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/> <FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/>

6
resources/scripts/components/admin/overview/OverviewContainer.tsx
View File

@ -33,9 +33,11 @@ export default () => {
return ( return (
<AdminContentBlock title={'Overview'}> <AdminContentBlock title={'Overview'}>
<div css={tw`flex flex-col mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Overview</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Overview</h2>
<p css={tw`text-base text-neutral-400`}>A quick glance at your system.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>A quick glance at your system.</p>
</div>
</div> </div>
<FlashMessageRender byKey={'overview'} css={tw`mb-4`}/> <FlashMessageRender byKey={'overview'} css={tw`mb-4`}/>

2
resources/scripts/components/admin/roles/NewRoleButton.tsx
View File

@ -102,7 +102,7 @@ export default () => {
} }
</Formik> </Formik>
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`} onClick={() => setVisible(true)}> <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
New Role New Role
</Button> </Button>
</> </>

4
resources/scripts/components/admin/roles/RoleEditContainer.tsx
View File

@ -58,7 +58,7 @@ const RoleEditContainer = () => {
return ( return (
<AdminContentBlock title={'Role - ' + role.name}> <AdminContentBlock title={'Role - ' + role.name}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{role.name}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{role.name}</h2>
{ {
(role.description || '').length < 1 ? (role.description || '').length < 1 ?
@ -66,7 +66,7 @@ const RoleEditContainer = () => {
<span css={tw`italic`}>No description</span> <span css={tw`italic`}>No description</span>
</p> </p>
: :
<p css={tw`text-base text-neutral-400`}>{role.description}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{role.description}</p>
} }
</div> </div>
</div> </div>

6
resources/scripts/components/admin/roles/RolesContainer.tsx
View File

@ -64,13 +64,15 @@ export default () => {
return ( return (
<AdminContentBlock title={'Roles'}> <AdminContentBlock title={'Roles'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Roles</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Roles</h2>
<p css={tw`text-base text-neutral-400`}>Soon&trade;</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Soon&trade;</p>
</div> </div>
<div css={tw`flex ml-auto pl-4`}>
<NewRoleButton/> <NewRoleButton/>
</div> </div>
</div>
<FlashMessageRender byKey={'roles'} css={tw`mb-4`}/> <FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>

6
resources/scripts/components/admin/servers/NewServerContainer.tsx
View File

@ -4,11 +4,11 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => { export default () => {
return ( return (
<AdminContentBlock> <AdminContentBlock title={'New Server'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Server</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Server</h2>
<p css={tw`text-base text-neutral-400`}>Add a new server to the panel.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new server to the panel.</p>
</div> </div>
</div> </div>
</AdminContentBlock> </AdminContentBlock>

4
resources/scripts/components/admin/servers/ServerEditContainer.tsx
View File

@ -58,7 +58,7 @@ const ServerEditContainer = () => {
return ( return (
<AdminContentBlock title={'Server - ' + server.name}> <AdminContentBlock title={'Server - ' + server.name}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{server.name}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{server.name}</h2>
{ {
(server.description || '').length < 1 ? (server.description || '').length < 1 ?
@ -66,7 +66,7 @@ const ServerEditContainer = () => {
<span css={tw`italic`}>No description</span> <span css={tw`italic`}>No description</span>
</p> </p>
: :
<p css={tw`text-base text-neutral-400`}>{server.description}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{server.description}</p>
} }
</div> </div>
</div> </div>

10
resources/scripts/components/admin/servers/ServersContainer.tsx
View File

@ -63,17 +63,19 @@ const UsersContainer = () => {
return ( return (
<AdminContentBlock title={'Servers'}> <AdminContentBlock title={'Servers'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Servers</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Servers</h2>
<p css={tw`text-base text-neutral-400`}>All servers available on the system.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>All servers available on the system.</p>
</div> </div>
<NavLink to={`${match.url}/new`} css={tw`ml-auto`}> <div css={tw`flex ml-auto pl-4`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0`}> <NavLink to={`${match.url}/new`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Server New Server
</Button> </Button>
</NavLink> </NavLink>
</div> </div>
</div>
<FlashMessageRender byKey={'servers'} css={tw`mb-4`}/> <FlashMessageRender byKey={'servers'} css={tw`mb-4`}/>

6
resources/scripts/components/admin/settings/SettingsContainer.tsx
View File

@ -5,9 +5,11 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => { export default () => {
return ( return (
<AdminContentBlock title={'Settings'}> <AdminContentBlock title={'Settings'}>
<div> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Settings</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Settings</h2>
<p css={tw`text-base text-neutral-400`}>Configure and manage settings for Pterodactyl.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Configure and manage settings for Pterodactyl.</p>
</div>
</div> </div>
</AdminContentBlock> </AdminContentBlock>
); );

6
resources/scripts/components/admin/users/NewUserContainer.tsx
View File

@ -4,11 +4,11 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => { export default () => {
return ( return (
<AdminContentBlock> <AdminContentBlock title={'New User'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create User</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create User</h2>
<p css={tw`text-base text-neutral-400`}>Add a new user to the panel.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new user to the panel.</p>
</div> </div>
</div> </div>
</AdminContentBlock> </AdminContentBlock>

4
resources/scripts/components/admin/users/UserEditContainer.tsx
View File

@ -58,9 +58,9 @@ const UserEditContainer = () => {
return ( return (
<AdminContentBlock title={'User - ' + user.id}> <AdminContentBlock title={'User - ' + user.id}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{user.firstName} {user.lastName}</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{user.firstName} {user.lastName}</h2>
<p css={tw`text-base text-neutral-400`}>{user.email}</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{user.email}</p>
</div> </div>
</div> </div>

10
resources/scripts/components/admin/users/UsersContainer.tsx
View File

@ -63,17 +63,19 @@ const UsersContainer = () => {
return ( return (
<AdminContentBlock title={'Users'}> <AdminContentBlock title={'Users'}>
<div css={tw`w-full flex flex-row items-center mb-8`}> <div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col`}> <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Users</h2> <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Users</h2>
<p css={tw`text-base text-neutral-400`}>All registered users on the system.</p> <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>All registered users on the system.</p>
</div> </div>
<NavLink to={`${match.url}/new`} css={tw`ml-auto`}> <div css={tw`flex ml-auto pl-4`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0`}> <NavLink to={`${match.url}/new`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New User New User
</Button> </Button>
</NavLink> </NavLink>
</div> </div>
</div>
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/> <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>