Fix overflows through out the front end (#2382)

* Fix overflows through out the front end

Fixed Server row overflow for servers name and description
Fixed Sub-user overflow for users with oddly long emails....
Fixed Server new overflow on console view.

See Attached images.

* Remove conflicting server name limits
This commit is contained in:
Charles Morgan 2020-09-22 22:37:41 -04:00 committed by GitHub
parent c75ed20b26
commit c928214a83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 6 additions and 6 deletions

View file

@ -59,9 +59,9 @@ export default ({ server, className }: { server: Server; className?: string }) =
<FontAwesomeIcon icon={faServer}/>
</div>
<div css={tw`flex-1 md:ml-4`}>
<p css={tw`text-lg`}>{server.name}</p>
<p css={tw`text-lg break-all`}>{server.name}</p>
{!!server.description &&
<p css={tw`text-sm text-neutral-300`}>{server.description}</p>
<p css={tw`text-sm text-neutral-300 break-all`}>{server.description}</p>
}
</div>
<div css={tw`w-48 overflow-hidden self-start hidden lg:block`}>

View file

@ -65,7 +65,7 @@ export default () => {
return (
<ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
<div css={tw`w-full md:w-1/4`}>
<TitledGreyBox title={name} icon={faServer}>
<TitledGreyBox css={tw`break-all`} title={name} icon={faServer}>
<p css={tw`text-xs uppercase`}>
<FontAwesomeIcon
icon={faCircle}

View file

@ -31,7 +31,7 @@ export default ({ subuser }: Props) => {
<img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
</div>
<div css={tw`ml-4 flex-1`}>
<p css={tw`text-sm truncate`}>{subuser.email}</p>
<p css={tw`text-sm break-all`}>{subuser.email}</p>
</div>
<div css={tw`ml-4`}>
<p css={tw`font-medium text-center`}>

View file

@ -32,7 +32,7 @@
<div class="form-group">
<label for="pName">Server Name</label>
<input type="text" class="form-control" id="pName" name="name" value="{{ old('name') }}" placeholder="Server Name">
<p class="small text-muted no-margin">Character limits: <code>a-z A-Z 0-9 _ - .</code> and <code>[Space]</code> (max 200 characters).</p>
<p class="small text-muted no-margin">Character limits: <code>a-z A-Z 0-9 _ - .</code> and <code>[Space]</code>.</p>
</div>
<div class="form-group">

View file

@ -32,7 +32,7 @@
<div class="form-group">
<label for="name" class="control-label">Server Name <span class="field-required"></span></label>
<input type="text" name="name" value="{{ old('name', $server->name) }}" class="form-control" />
<p class="text-muted small">Character limits: <code>a-zA-Z0-9_-</code> and <code>[Space]</code> (max 35 characters).</p>
<p class="text-muted small">Character limits: <code>a-zA-Z0-9_-</code> and <code>[Space]</code>.</p>
</div>
<div class="form-group">
<label for="external_id" class="control-label">External Identifier</label>