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%;
|
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`};
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 &&
|
||||||
|
|
|
@ -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>
|
||||||
/home/container/
|
/home/container/
|
||||||
<span css={tw`text-cyan-200`}>
|
<span css={tw`text-cyan-200`}>
|
||||||
|
|
Loading…
Reference in a new issue