Merge pull request #1488 from gitroomhq/fix/ui-modal-max-width
Some checks failed
Build / build (22.12.0) (push) Has been cancelled
Code Quality Analysis / Analyze (javascript-typescript) (push) Has been cancelled

ui: update the modal such that for long text won't cause overflow
This commit is contained in:
Nevo David 2026-05-07 10:40:39 +07:00 committed by GitHub
commit 060c77a68c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 6 additions and 3 deletions

View file

@ -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}

View file

@ -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} />,
});
}, []);

View file

@ -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()}