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%; margin-top: 20%;
${breakpoint('md')`margin-top: 10%`}; ${breakpoint('md')`margin-top: 10%`};
`}; `};
margin-bottom: 5%;
& > .close-icon { & > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`}; ${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 Failed
</span> </span>
} }
{backup.name} <div css={tw`break-all`}>
{backup.name}
</div>
{(backup.completedAt && backup.isSuccessful) && {(backup.completedAt && backup.isSuccessful) &&
<span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span> <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}/> <FontAwesomeIcon icon={faFolder}/>
} }
</div> </div>
<div css={tw`flex-1`}> <div css={tw`flex-1 break-all`}>
{file.name} {file.name}
</div> </div>
{file.isFile && {file.isFile &&

View file

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