diff --git a/app/components/Editor.tsx b/app/components/Editor.tsx
index 94ba811d4..bd3072c5d 100644
--- a/app/components/Editor.tsx
+++ b/app/components/Editor.tsx
@@ -325,7 +325,7 @@ function Editor(props: Props, ref: React.RefObject | null) {
);
return (
-
+
<>
{
};
handleReportBug = () => {
- window.open(githubIssuesUrl());
+ window.open(isCloudHosted ? feedbackUrl() : githubIssuesUrl());
};
render() {
- const { t } = this.props;
+ const { t, component: Component = CenteredContent, showTitle } = this.props;
if (this.error) {
const error = this.error;
const isReported = !!env.SENTRY_DSN && isCloudHosted;
- const isChunkError = this.error.message.match(
- /dynamically imported module/
- );
+ const isChunkError = [
+ "module script failed",
+ "dynamically imported module",
+ ].some((msg) => this.error?.message?.includes(msg));
if (isChunkError) {
return (
-
-
-
- Loading Failed
-
+
+ {showTitle && (
+ <>
+
+
+ Loading Failed
+
+ >
+ )}
Sorry, part of the application failed to load. This may be
@@ -81,16 +91,20 @@ class ErrorBoundary extends React.Component {
-
+
);
}
return (
-
-
-
- Something Unexpected Happened
-
+
+ {showTitle && (
+ <>
+
+
+ Something Unexpected Happened
+
+ >
+ )}
{
)}
-
+
);
}
diff --git a/app/components/Flex.tsx b/app/components/Flex.tsx
index 788606591..05e289ca0 100644
--- a/app/components/Flex.tsx
+++ b/app/components/Flex.tsx
@@ -10,6 +10,7 @@ const Flex = styled.div<{
column?: boolean;
align?: AlignValues;
justify?: JustifyValues;
+ wrap?: boolean;
shrink?: boolean;
reverse?: boolean;
gap?: number;
@@ -26,6 +27,7 @@ const Flex = styled.div<{
: "row"};
align-items: ${({ align }) => align};
justify-content: ${({ justify }) => justify};
+ flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "initial")};
flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
min-height: 0;
diff --git a/app/components/List/Error.tsx b/app/components/List/Error.tsx
index ca0fb58eb..b4bc6d720 100644
--- a/app/components/List/Error.tsx
+++ b/app/components/List/Error.tsx
@@ -30,7 +30,7 @@ export default function LoadingError({ error, retry, ...rest }: Props) {
return (
-
+
{message}{" "}
retry()}>{t("Click to retry")}…
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index 40e2d0732..43c0f7a8a 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -16,6 +16,7 @@ import usePrevious from "~/hooks/usePrevious";
import useUnmount from "~/hooks/useUnmount";
import { fadeAndScaleIn } from "~/styles/animations";
import Desktop from "~/utils/Desktop";
+import ErrorBoundary from "./ErrorBoundary";
let openModals = 0;
type Props = {
@@ -82,7 +83,9 @@ const Modal: React.FC = ({
column
reverse
>
- {children}
+
+ {children}
+
{title && (
@@ -112,7 +115,7 @@ const Modal: React.FC = ({
ev.stopPropagation()} column>
{title && {title}
}
- {children}
+ {children}
diff --git a/app/components/Sidebar/Right.tsx b/app/components/Sidebar/Right.tsx
index 7c9f397c4..df5225349 100644
--- a/app/components/Sidebar/Right.tsx
+++ b/app/components/Sidebar/Right.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
import styled, { useTheme } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { depths } from "@shared/styles";
+import ErrorBoundary from "~/components/ErrorBoundary";
import Flex from "~/components/Flex";
import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
import useMobile from "~/hooks/useMobile";
@@ -94,7 +95,7 @@ function Right({ children, border, className }: Props) {
className={className}
>
- {children}
+ {children}
{!isMobile && (
-
+
diff --git a/app/scenes/Document/components/Document.tsx b/app/scenes/Document/components/Document.tsx
index 7f39fd903..7f8b011bf 100644
--- a/app/scenes/Document/components/Document.tsx
+++ b/app/scenes/Document/components/Document.tsx
@@ -400,7 +400,7 @@ class DocumentScene extends React.Component {
: updateDocumentUrl(this.props.match.url, document);
return (
-
+
{this.props.location.pathname !== canonicalUrl && (