Merge pull request #1488 from gitroomhq/fix/ui-modal-max-width
ui: update the modal such that for long text won't cause overflow
This commit is contained in:
commit
060c77a68c
3 changed files with 6 additions and 3 deletions
|
|
@ -147,7 +147,7 @@ export const ImportDebugPostModal: FC<{ close: () => void }> = ({ close }) => {
|
|||
<div className="text-[13px] font-[600] text-textColor">
|
||||
{t('debug_info', 'Debug Info')}
|
||||
</div>
|
||||
<div className="text-[12px] text-textColor/70 flex flex-col gap-[4px]">
|
||||
<div className="text-[12px] text-textColor/70 flex flex-col gap-[4px] min-w-0 break-all">
|
||||
<div>
|
||||
<span className="font-[500]">
|
||||
{t('provider', 'Provider')}:
|
||||
|
|
@ -175,7 +175,7 @@ export const ImportDebugPostModal: FC<{ close: () => void }> = ({ close }) => {
|
|||
<span className="font-[500]">
|
||||
{t('error_details', 'Error Details')}:
|
||||
</span>
|
||||
<div className="mt-[4px] max-h-[100px] overflow-y-auto bg-newBgColor p-[8px] rounded-[4px] text-[11px] font-mono">
|
||||
<div className="mt-[4px] max-h-[100px] overflow-y-auto bg-newBgColor p-[8px] rounded-[4px] text-[11px] font-mono break-all whitespace-pre-wrap">
|
||||
{parsed._debug.errors.map((err, i) => (
|
||||
<div key={i} className="mb-[4px]">
|
||||
[{err.platform}] {err.message}
|
||||
|
|
|
|||
|
|
@ -433,6 +433,7 @@ const ImportDebugPost = () => {
|
|||
const handleClick = useCallback(() => {
|
||||
openModal({
|
||||
title: t('import_debug_post', 'Import Debug Post'),
|
||||
maxSize: 800,
|
||||
children: (close) => <ImportDebugPostModal close={close} />,
|
||||
});
|
||||
}, []);
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ interface OpenModalInterface {
|
|||
modal?: string;
|
||||
};
|
||||
size?: string | number;
|
||||
maxSize?: string | number;
|
||||
height?: string | number;
|
||||
id?: string;
|
||||
}
|
||||
|
|
@ -200,10 +201,11 @@ export const Component: FC<{
|
|||
modal.size ? '' : 'min-w-[600px]',
|
||||
modal.fullScreen && 'h-full'
|
||||
)}
|
||||
{...((!!modal.size || !!modal.height) && {
|
||||
{...((!!modal.size || !!modal.height || !!modal.maxSize) && {
|
||||
style: {
|
||||
...(modal.size ? { width: modal.size } : {}),
|
||||
...(modal.height ? { height: modal.height } : {}),
|
||||
...(modal.maxSize ? { maxWidth: modal.maxSize } : {}),
|
||||
},
|
||||
})}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue