Fix text overflows through out the front end (#2406)

This commit is contained in:
Oreo Oreoniv 2020-10-03 21:22:37 +03:00 committed by GitHub
parent 6893f9bfcd
commit 10eeae0927
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 3 deletions

View file

@ -35,6 +35,8 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
margin-top: 20%;
${breakpoint('md')`margin-top: 10%`};
`};
margin-bottom: 5%;
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};

View file

@ -55,7 +55,9 @@ export default ({ backup, className }: Props) => {
Failed
</span>
}
{backup.name}
<div css={tw`break-all`}>
{backup.name}
</div>
{(backup.completedAt && backup.isSuccessful) &&
<span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
}

View file

@ -69,7 +69,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
<FontAwesomeIcon icon={faFolder}/>
}
</div>
<div css={tw`flex-1`}>
<div css={tw`flex-1 break-all`}>
{file.name}
</div>
{file.isFile &&

View file

@ -88,7 +88,7 @@ export default ({ className }: WithClassname) => {
name={'directoryName'}
label={'Directory Name'}
/>
<p css={tw`text-xs mt-2 text-neutral-400`}>
<p css={tw`text-xs mt-2 text-neutral-400 break-all`}>
<span css={tw`text-neutral-200`}>This directory will be created as</span>
&nbsp;/home/container/
<span css={tw`text-cyan-200`}>