fix fallback

client/src/components/design-elements/BulletPointCheck.tsx

@@ -19,12 +19,7 @@ export const BulletPointCheck = ({
   };
 
   return (
-    <Stack
-      direction="row"
-      className="check"
-      gap={theme.spacing(6)}
-      alignItems="center"
-    >
+    <Stack direction="row" gap={theme.spacing(6)} alignItems="center">
       <Check
         size={16}
         strokeWidth={1.5}
@@ -42,7 +37,6 @@ export const BulletPointCheck = ({
         fontWeight={450}
         sx={{
           opacity: 0.9,
-          whiteSpace: 'nowrap',
         }}
       >
         {text}

client/src/components/design-elements/Fallback.tsx

@@ -8,8 +8,9 @@ import { Button } from "@/components/inputs";
 import { useNavigate } from "react-router";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
-import type { BoxProps } from "@mui/material";
-interface BaseFallbackProps extends BoxProps {
+import type { StackProps } from "@mui/material/Stack";
+
+interface BaseFallbackProps extends StackProps {
   children: React.ReactNode;
 }
 
@@ -21,7 +22,8 @@ export const BaseFallback: React.FC<BaseFallbackProps> = ({
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 
   return (
-    <Box
+    <Stack
+      alignItems={"center"}
       margin={isSmall ? "inherit" : "auto"}
       marginTop={isSmall ? "33%" : "10%"}
       width={{
@@ -30,51 +32,26 @@ export const BaseFallback: React.FC<BaseFallbackProps> = ({
         lg: "50%",
         xl: "40%",
       }}
-      padding={theme.spacing(16)}
+      padding={{ xs: theme.spacing(4), md: theme.spacing(16) }}
       bgcolor={theme.palette.primary.main}
-      position="relative"
       border={1}
       borderColor={theme.palette.primary.lowContrast}
       borderRadius={theme.shape.borderRadius}
-      overflow="hidden"
       sx={{
         borderStyle: "dashed",
       }}
       {...props}
     >
-      <Box sx={{ marginTop: "100px" }}>
-        <Stack
-          alignItems="center"
-          gap={theme.spacing(20)}
-          sx={{
-            width: "fit-content",
-            margin: "auto",
-            marginTop: 0,
-          }}
-        >
-          <Box
-            sx={{
-              zIndex: 1,
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              width: "100%",
-            }}
-          >
-            <SkeletonCard showHalo={true} />
-          </Box>
-
-          <Stack
-            gap={theme.spacing(4)}
-            alignItems="center"
-            maxWidth={"300px"}
-            zIndex={1}
-          >
-            {children}
-          </Stack>
-        </Stack>
+      <Box
+        mt={theme.spacing(32)}
+        mb={theme.spacing(8)}
+        width={"80%"}
+        maxWidth={216}
+      >
+        <SkeletonCard showHalo={true} />
       </Box>
-    </Box>
+      {children}
+    </Stack>
   );
 };
 

client/src/components/design-elements/SkeletonCard.tsx

@@ -12,7 +12,7 @@ interface SkeletonCardProps {
  * Default size is 60% of original design
  */
 const SkeletonCard: React.FC<SkeletonCardProps> = ({
-  width = 216,
+  width = "100%",
   showHalo = true,
 }) => {
   const theme = useTheme();

client/src/locales/en.json

@@ -789,7 +789,7 @@
   "packetsSent": "Packets Sent",
   "pageSpeedMonitor": {
     "fallback": {
-      "actionButton": "Let's create your first PageSpeed monitor!",
+      "actionButton": "Create a PageSpeed monitor!",
       "checks": [
         "Report on the user experience of a page",
         "Help analyze webpage speed",

client/src/pages/pagespeed/PageSpeedMonitors.tsx

@@ -77,7 +77,7 @@ const PageSpeedMonitorsPage = () => {
   return (
     <MonitorBasePageWithStates
       loading={isValidating}
-      error={error}
+      error={true}
       items={monitors}
       page="pageSpeed"
       actionLink="/pagespeed/create"