Archive messages and messaging tabs redo

CLAUDE.md

@@ -64,6 +64,7 @@ make mypy
 - Import aliases: use `components/` not `../../../components/`
 - No `any` types
 - Use StyledLink or next/link for routing
+- Type definitions should always go at the top of the file below the imports.
 - **IMPORTANT**: When using Material-UI components (Button, Chip, MenuItem, etc.) with the `href` prop for internal navigation, ALWAYS use `component={Link}` instead of `component="a"` to preserve locale prefixes. Import Link from `next/link`
 
 ### Proto Files

app/web/components/EllipsisMenu.tsx

@@ -90,6 +90,8 @@ const EllipsisMenu = ({
             <MenuItem
               key={index}
               onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
                 if (item.shouldCloseMenu !== false) {
                   onMenuClose(e);
                 }

app/web/components/ErrorFallback/ErrorFallback.tsx

@@ -23,7 +23,7 @@ export default function ErrorFallback({ isFatal }: { isFatal?: boolean }) {
   return (
     <>
       <PageTitle>{t("error.fallback.title")}</PageTitle>
-      <Typography variant="body1">
+      <Typography variant="body1" sx={{ marginBottom: theme.spacing(2) }}>
         {isFatal ? t("error.fatal_message") : t("error.fallback.subtitle")}
       </Typography>
       {!isFatal && <StyledReportButton isResponsive={false} />}
@@ -34,13 +34,7 @@ export default function ErrorFallback({ isFatal }: { isFatal?: boolean }) {
             component={Link}
             href={baseRoute}
             sx={{
-              color: theme.palette.common.black,
-              borderColor: theme.palette.grey[300],
-
-              "&:hover": {
-                borderColor: theme.palette.grey[300],
-                backgroundColor: "#3135390A",
-              },
+              marginRight: theme.spacing(2),
             }}
           >
             {t("error.fallback.home_page_link_label")}