Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin(ui): fix descriptions overflowing vertically

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -102,7 +102,7 @@ export default () => {
}
</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
</Button>
</>

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

@ -58,7 +58,7 @@ const RoleEditContainer = () => {
return (
<AdminContentBlock title={'Role - ' + role.name}>
<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>
{
(role.description || '').length < 1 ?
@ -66,7 +66,7 @@ const RoleEditContainer = () => {
<span css={tw`italic`}>No description</span>
</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>

8
resources/scripts/components/admin/roles/RolesContainer.tsx
View file

@ -64,12 +64,14 @@ export default () => {
return (
<AdminContentBlock title={'Roles'}>
<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>
<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>
<NewRoleButton/>
<div css={tw`flex ml-auto pl-4`}>
<NewRoleButton/>
</div>
</div>
<FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>