dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #514 from movie-web/fix-modal-overflow 

Fix error overflow
This commit is contained in:
William Oldham 2023-12-09 12:47:19 +00:00 committed by GitHub
parent 953abce297 3b329bcf14
commit 1bed315464
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/parts/errors/ErrorCard.tsx
View File

@ -37,24 +37,28 @@ export function ErrorCard(props: {
return ( return (
// I didn't put a <Transition> here because it'd fade out, then jump height weirdly // I didn't put a <Transition> here because it'd fade out, then jump height weirdly
<div className="w-full bg-errors-card p-6 rounded-lg"> <div className="bg-errors-card w-full rounded-lg p-6 text-left">
<div className="flex justify-between items-center pb-2 border-b border-errors-border"> <div className="border-errors-border flex items-center justify-between border-b pb-2">
<span className="text-white font-medium">{t("errors.details")}</span> <span className="font-medium text-white">{t("errors.details")}</span>
<div className="flex justify-center items-center gap-3"> <div className="flex items-center justify-center gap-3">
<Button <Button
theme="secondary" theme="secondary"
padding="p-2 md:px-4" padding="p-2 h-10 min-w-[40px] md:px-4"
onClick={() => copyError()} onClick={() => copyError()}
> >
{hasCopied ? ( {hasCopied ? (
<> <>
<Icon icon={Icons.CHECKMARK} className="text-xs mr-3" /> <Icon icon={Icons.CHECKMARK} className="text-xs" />
{t("actions.copied")} <span className="hidden min-[400px]:inline-block ml-3">
{t("actions.copied")}
</span>
</> </>
) : ( ) : (
<> <>
<Icon icon={Icons.COPY} className="text-2xl mr-3" /> <Icon icon={Icons.COPY} className="text-2xl" />
{t("actions.copy")} <span className="hidden min-[400px]:inline-block ml-3">
{t("actions.copy")}
</span>
</> </>
)} )}
</Button> </Button>
@ -67,7 +71,7 @@ export function ErrorCard(props: {
</Button> </Button>
</div> </div>
</div> </div>
<div className="mt-4 h-60 overflow-y-auto text-left whitespace-pre pointer-events-auto select-text"> <div className="pointer-events-auto mt-4 h-60 select-text overflow-y-auto whitespace-pre text-left">
{errorMessage} {errorMessage}
</div> </div>
</div> </div>
@ -82,8 +86,8 @@ export function ErrorCardInPlainModal(props: {
}) { }) {
if (!props.show || !props.error) return null; if (!props.show || !props.error) return null;
return ( return (
<div className="fixed inset-0 w-full h-full bg-black bg-opacity-30 flex justify-center items-center p-12"> <div className="fixed inset-0 flex h-full w-full items-center justify-center bg-black bg-opacity-30 p-12">
<div className="max-w-2xl"> <div className="w-full max-w-2xl">
<ErrorCard error={props.error} onClose={props.onClose} /> <ErrorCard error={props.error} onClose={props.onClose} />
</div> </div>
</div> </div>
@ -99,7 +103,7 @@ export function ErrorCardInModal(props: {
return ( return (
<Modal id={props.id}> <Modal id={props.id}>
<div className="max-w-2xl pointer-events-auto"> <div className="pointer-events-auto w-11/12 max-w-2xl">
<ErrorCard error={props.error} onClose={props.onClose} /> <ErrorCard error={props.error} onClose={props.onClose} />
</div> </div>
</Modal> </Modal>

8
src/pages/parts/errors/ErrorPart.tsx
View File

@ -21,10 +21,10 @@ export function ErrorPart(props: { error: any; errorInfo: any }) {
const error = `${props.error.toString()}\n${errorLines.join("\n")}`; const error = `${props.error.toString()}\n${errorLines.join("\n")}`;
return ( return (
<div className="relative flex flex-1 flex-col min-h-screen"> <div className="relative flex min-h-screen flex-1 flex-col">
<div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center"> <div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center">
<ErrorLayout> <ErrorLayout>
<ErrorContainer maxWidth="max-w-2xl"> <ErrorContainer maxWidth="max-w-2xl w-9/10">
<IconPill icon={Icons.EYE_SLASH}>{t("errors.badge")}</IconPill> <IconPill icon={Icons.EYE_SLASH}>{t("errors.badge")}</IconPill>
<Title>{t("errors.title")}</Title> <Title>{t("errors.title")}</Title>
@ -38,14 +38,14 @@ export function ErrorPart(props: { error: any; errorInfo: any }) {
<div className="flex gap-3"> <div className="flex gap-3">
<ButtonPlain <ButtonPlain
theme="secondary" theme="secondary"
className="mt-6 md:px-12 p-2.5" className="mt-6 p-2.5 md:px-12"
onClick={() => window.location.reload()} onClick={() => window.location.reload()}
> >
{t("errors.reloadPage")} {t("errors.reloadPage")}
</ButtonPlain> </ButtonPlain>
<ButtonPlain <ButtonPlain
theme="purple" theme="purple"
className="mt-6 md:px-12 p-2.5" className="mt-6 p-2.5 md:px-12"
onClick={() => setShowErrorCard(true)} onClick={() => setShowErrorCard(true)}
> >
{t("errors.showError")} {t("errors.showError")}