Fix text overflows through out the front end (#2406)
This commit is contained in:
parent
6893f9bfcd
commit
10eeae0927
4 changed files with 7 additions and 3 deletions
|
@ -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`};
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
|
|
|
@ -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 &&
|
||||
|
|
|
@ -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>
|
||||
/home/container/
|
||||
<span css={tw`text-cyan-200`}>
|
||||
|
|
Loading…
Reference in a new issue