[E] Update style of contained FatalError

Author: dananjohnson

client/src/global/components/FatalError/index.js

@@ -29,8 +29,8 @@ export default function FatalError(props) {
   return (
     <HelmetProvider>
       <Helmet title={`${error.status} Error: ${error.heading}`} />
-      <GlobalStyles styles={styles} />
-      <Styled.Body className="browse">
+      {!contained && <GlobalStyles styles={styles} />}
+      <Styled.Body className={!contained ? "browse" : undefined}>
         <Styled.Wrapper $contained={contained}>
           <Styled.Inner>
             <Styled.Container>

client/src/global/components/FatalError/styles.js

@@ -34,7 +34,16 @@ export const Wrapper = styled.section`
   padding-block-end: var(--container-padding-block-end);
   background-color: var(--color-base-red20);
 
-  ${({ $contained }) => $contained && `min-height: auto; flex-grow: 1;`}
+  ${({ $contained }) =>
+    $contained &&
+    `
+    --_Inner-box-shadow: none;
+    --_Inner-border-thickness: 3px;
+
+    min-height: auto;
+    flex-grow: 1;
+    background-color: transparent;
+  `}
 `;
 
 export const Inner = styled.div`
@@ -48,7 +57,11 @@ export const Inner = styled.div`
   padding-block-end: calc(0.75 * var(--container-padding-block-end));
   background-color: var(--background-color);
   border-radius: var(--box-border-radius);
-  box-shadow: 0px 12px 32px 3px var(--color-base-red45);
+  border: var(--_Inner-border-thickness) solid var(--color-base-red45);
+  box-shadow: var(
+    --_Inner-box-shadow,
+    0px 12px 32px 3px var(--color-base-red45)
+  );
 `;
 
 export const Container = styled.div`