fix(web): remove nested AppShell causing vertical text layout bug

EntityDetailLayout was wrapping content in AppShell, but MainLayout
already provides an AppShell wrapper. Mantine does not support nested
AppShell components, causing the inner content area to collapse to 0
width and text to render character-by-character vertically.

Replace AppShell with Box to fix entity detail pages (authors, works,
institutions, etc.) that were rendering with 120,000+ pixel height.

Author: Mearman

apps/web/src/components/entity-detail/EntityDetailLayout.tsx

@@ -1,6 +1,6 @@
 import type { EntityType } from "@bibgraph/types";
 import { logger } from "@bibgraph/utils";
-import { ActionIcon, AppShell, Badge, Code, Group, Modal, Paper, SegmentedControl, Stack, Text, Title, Tooltip } from "@mantine/core";
+import { ActionIcon, Badge, Box, Code, Group, Modal, Paper, SegmentedControl, Stack, Text, Title, Tooltip } from "@mantine/core";
 import { IconBookmark, IconBookmarkFilled, IconBookmarkOff, IconCode, IconListCheck, IconMenu2, IconX } from "@tabler/icons-react";
 import React, { ReactNode, useState } from "react";
 
@@ -91,14 +91,13 @@ export const EntityDetailLayout = ({
     }
   };
   return (
-    <AppShell
-      padding={isMobile() ? "sm" : "xl"}
+    <Box
+      p={isMobile() ? "sm" : "xl"}
       bg="var(--mantine-color-body)"
-      style={{ minHeight: '100vh' }}
+      style={{ minHeight: '100%' }}
       data-testid="entity-detail-layout"
     >
-      <AppShell.Main>
-        <Stack gap={isMobile() ? "lg" : "xl"}>
+      <Stack gap={isMobile() ? "lg" : "xl"}>
           {/* Header Section */}
           <Paper p={isMobile() ? "lg" : "xl"} radius="xl">
             <Stack gap="lg">
@@ -388,7 +387,6 @@ export const EntityDetailLayout = ({
             }}
           />
         </Modal>
-      </AppShell.Main>
-    </AppShell>
+    </Box>
   );
 };