Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 13:39:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix error overflow

Browse Source
This commit is contained in:
Jip Fr 2023-12-09 12:58:26 +01:00
parent 953abce297
commit 41aaf29be7
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,10 +37,10 @@ export function ErrorCard(props: {
return (
// 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="flex justify-between items-center pb-2 border-b border-errors-border">
<span className="text-white font-medium">{t("errors.details")}</span>
<div className="flex justify-center items-center gap-3">
<div className="bg-errors-card w-full rounded-lg p-6">
<div className="border-errors-border flex items-center justify-between border-b pb-2">
<span className="font-medium text-white">{t("errors.details")}</span>
<div className="flex items-center justify-center gap-3">
<Button
theme="secondary"
padding="p-2 md:px-4"
@ -48,12 +48,12 @@ export function ErrorCard(props: {
>
{hasCopied ? (
<>
<Icon icon={Icons.CHECKMARK} className="text-xs mr-3" />
<Icon icon={Icons.CHECKMARK} className="mr-3 text-xs" />
{t("actions.copied")}
</>
) : (
<>
<Icon icon={Icons.COPY} className="text-2xl mr-3" />
<Icon icon={Icons.COPY} className="mr-3 text-2xl" />
{t("actions.copy")}
</>
)}
@ -67,7 +67,7 @@ export function ErrorCard(props: {
</Button>
</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}
</div>
</div>
@ -82,8 +82,8 @@ export function ErrorCardInPlainModal(props: {
}) {
if (!props.show || !props.error) return null;
return (
<div className="fixed inset-0 w-full h-full bg-black bg-opacity-30 flex justify-center items-center p-12">
<div className="max-w-2xl">
<div className="fixed inset-0 flex h-full w-full items-center justify-center bg-black bg-opacity-30 p-12">
<div className="w-full max-w-2xl">
<ErrorCard error={props.error} onClose={props.onClose} />
</div>
</div>
@ -99,7 +99,7 @@ export function ErrorCardInModal(props: {
return (
<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} />
</div>
</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")}`;
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">
<ErrorLayout>
<ErrorContainer maxWidth="max-w-2xl">
<ErrorContainer maxWidth="max-w-2xl w-9/10">
<IconPill icon={Icons.EYE_SLASH}>{t("errors.badge")}</IconPill>
<Title>{t("errors.title")}</Title>
@ -38,14 +38,14 @@ export function ErrorPart(props: { error: any; errorInfo: any }) {
<div className="flex gap-3">
<ButtonPlain
theme="secondary"
className="mt-6 md:px-12 p-2.5"
className="mt-6 p-2.5 md:px-12"
onClick={() => window.location.reload()}
>
{t("errors.reloadPage")}
</ButtonPlain>
<ButtonPlain
theme="purple"
className="mt-6 md:px-12 p-2.5"
className="mt-6 p-2.5 md:px-12"
onClick={() => setShowErrorCard(true)}
>
{t("errors.showError")}