bug fixes

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite dev --host 0.0.0.0",
     "build": "vite build && tsc --noEmit",
-    "start": "vite start --host 0.0.0.0"
+    "start": "node .output/server/index.mjs"
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",

src/app/routes/api/events.$.ts

@@ -35,7 +35,6 @@ export const Route = createFileRoute("/api/events/$")({
                 controller.enqueue(new TextEncoder().encode(pingMessage));
               } catch (e) {
                 clearInterval(pingInterval);
-                controller.close();
               }
             }, 30000);
 

src/components/sheet/drawer.tsx

@@ -62,6 +62,22 @@ const Drawer: React.FC<DrawerProps> = ({
   useEffect(() => {
     if (!opened || !contentRef.current) return;
 
+    const updateDrawerHeight = () => {
+      if (contentRef.current) {
+        const drawerContent = contentRef.current;
+        const visualViewport = window.visualViewport;
+
+        if (visualViewport) {
+          const availableHeight = visualViewport.height;
+          const maxDrawerHeight = Math.min(availableHeight * 0.75, window.innerHeight * 0.75);
+
+          drawerContent.style.maxHeight = `${maxDrawerHeight}px`;
+        } else {
+          drawerContent.style.maxHeight = '75vh';
+        }
+      }
+    };
+
     const resizeObserver = new ResizeObserver(() => {
       if (contentRef.current) {
         const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
@@ -72,15 +88,24 @@ const Drawer: React.FC<DrawerProps> = ({
       }
     });
 
+    updateDrawerHeight();
+
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', updateDrawerHeight);
+    }
+
     resizeObserver.observe(contentRef.current);
 
     return () => {
       resizeObserver.disconnect();
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', updateDrawerHeight);
+      }
     };
   }, [opened, children]);
 
   return (
-    <VaulDrawer.Root open={opened} onOpenChange={onChange}>
+    <VaulDrawer.Root repositionInputs={false} open={opened} onOpenChange={onChange}>
       <VaulDrawer.Portal>
         <VaulDrawer.Overlay className={styles.drawerOverlay} />
         <VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>

src/components/sheet/sheet.tsx

@@ -23,14 +23,14 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
       onChange={onChange}
       onClose={handleClose}
     >
-      <ScrollArea
+      <ScrollArea.Autosize
-        style={{ flex: 1 }}
+        style={{ flex: 1, maxHeight: '75dvh' }}
         scrollbarSize={8}
         scrollbars="y"
         type="scroll"
       >
         {children}
-      </ScrollArea>
+      </ScrollArea.Autosize>
     </SheetComponent>
   );
 };

src/components/sheet/styles.module.css

@@ -13,11 +13,10 @@
     margin-top: 24px;
     height: auto !important;
     min-height: fit-content;
-    max-height: 100dvh;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     outline: none;
-    transition: height 0.2s ease-out;
+    transition: height 0.2s ease-out, max-height 0.2s ease-out;
 }

src/features/admin/components/admin-page.tsx

@@ -9,7 +9,7 @@ import ListButton from "@/components/list-button";
 
 const AdminPage = () => {
   return (
-    <List>
+    <List p="0">
       <ListLink
         label="Manage Tournaments"
         Icon={TrophyIcon}

src/features/admin/components/manage-tournaments.tsx

@@ -5,7 +5,7 @@ import ListLink from "@/components/list-link";
 const ManageTournaments = () => {
   const { data: tournaments } = useTournaments();
   return (
-    <List>
+    <List p="0">
       {tournaments.map((t) => (
         <ListLink label={t.name} to={`/admin/tournaments/${t.id}`} />
       ))}

src/features/core/components/layout.tsx

@@ -31,11 +31,7 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
       pos='relative'
       h='100dvh'
       mah='100dvh'
-      style={{
+      // style={{ top: viewport.top }} //, transition: 'top 0.1s ease-in-out' }}
-        top: 0,
-        minHeight: '100dvh',
-        maxHeight: '100dvh'
-      }}
     >
       <Header {...header} />
       <AppShell.Main

src/features/players/components/player-list.tsx

@@ -25,7 +25,7 @@ const PlayerList = ({ players, loading = false }: PlayerListProps) => {
     ))}
   </List>
 
-  return <List>
+  return <List p="0">
     {players?.map((player) => (
       <ListItem key={player.id}
         py='xs'

src/features/teams/components/team-list.tsx

@@ -58,7 +58,7 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
 
   if (loading)
     return (
-      <List>
+      <List p="0">
         {Array.from({ length: 10 }).map((_, i) => (
           <ListItem
             key={`skeleton-${i}`}
@@ -72,7 +72,7 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
     );
 
   return (
-    <List>
+    <List p="0">
       {teams?.map((team) => (
         <div key={team.id}>
           <ListItem

src/features/tournaments/components/manage-tournament.tsx

@@ -45,7 +45,7 @@ const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
 
   return (
     <>
-      <List>
+      <List p="0">
         <ListButton
           label="Edit Tournament"
           Icon={HardDrivesIcon}

src/features/tournaments/components/tournament-list.tsx

@@ -63,7 +63,7 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
 
   if (loading) {
     return (
-      <List>
+      <List p="0">
         {Array.from({ length: 5 }).map((_, i) => (
           <ListItem
             key={`skeleton-${i}`}
@@ -97,7 +97,7 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
   }
 
   return (
-    <List>
+    <List p="0">
       {tournaments.map((tournament) => (
         <>
           <ListItem

src/features/tournaments/components/upcoming-tournament/enroll-team/index.tsx

@@ -27,7 +27,7 @@ const EnrollTeam = ({ tournamentId, onSubmit }: EnrollTeamProps) => {
   const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
 
   const { data: teamData } = useServerQuery({
-    ...teamQueries.details(selectedTeamId!),
+    ...teamQueries.details(selectedTeamId || ''),
     options: { enabled: !!selectedTeamId }
   });
 

src/features/tournaments/components/upcoming-tournament/update-team.tsx

@@ -18,7 +18,6 @@ interface UpdateTeamProps {
 
 const UpdateTeam = ({ tournamentId, teamId }: UpdateTeamProps) => {
   const { open, isOpen, toggle } = useSheet();
-
   const { data: team } = useTeam(teamId);
 
   const initialValues = useMemo(() => {

src/hooks/use-server-events.ts

@@ -112,5 +112,5 @@ export function useServerEvents() {
         eventSource.close();
       }
     };
-  }, [user?.id, queryClient]);
+  }, [user?.id]);
 }