diff --git a/web/src/App.tsx b/web/src/App.tsx
index a5980e1..b5abe43 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -21,7 +21,6 @@ import ClientContext from "./ui/ClientContext.ts"
 import MainScreen from "./ui/MainScreen.tsx"
 import { LoginScreen, VerificationScreen } from "./ui/login"
 import { LightboxWrapper } from "./ui/modal/Lightbox.tsx"
-import { ModalWrapper } from "./ui/modal/Modal.tsx"
 import { useEventAsState } from "./util/eventdispatcher.ts"
 
 function App() {
@@ -49,9 +48,7 @@ function App() {
 	} else {
 		return <ClientContext value={client}>
 			<LightboxWrapper>
-				<ModalWrapper>
-					<MainScreen/>
-				</ModalWrapper>
+				<MainScreen/>
 			</LightboxWrapper>
 		</ClientContext>
 	}
diff --git a/web/src/ui/MainScreen.tsx b/web/src/ui/MainScreen.tsx
index 05758fc..3d71af3 100644
--- a/web/src/ui/MainScreen.tsx
+++ b/web/src/ui/MainScreen.tsx
@@ -20,6 +20,7 @@ import type { RoomID } from "@/api/types"
 import ClientContext from "./ClientContext.ts"
 import MainScreenContext, { MainScreenContextFields } from "./MainScreenContext.ts"
 import Keybindings from "./keybindings.ts"
+import { ModalWrapper } from "./modal/Modal.tsx"
 import RightPanel, { RightPanelProps } from "./rightpanel/RightPanel.tsx"
 import RoomList from "./roomlist/RoomList.tsx"
 import RoomView from "./roomview/RoomView.tsx"
@@ -139,23 +140,25 @@ const MainScreen = () => {
 	if (rightPanel) {
 		classNames.push("right-panel-open")
 	}
-	return <main className={classNames.join(" ")} style={extraStyle}>
-		<MainScreenContext value={context}>
-			<RoomList activeRoomID={activeRoom?.roomID ?? null}/>
-			{resizeHandle1}
-			{activeRoom
-				? <RoomView
-					key={activeRoom.roomID}
-					room={activeRoom}
-					rightPanel={rightPanel}
-					rightPanelResizeHandle={resizeHandle2}
-				/>
-				: rightPanel && <>
-					{resizeHandle2}
-					{rightPanel && <RightPanel {...rightPanel}/>}
-				</>}
-		</MainScreenContext>
-	</main>
+	return <MainScreenContext value={context}>
+		<ModalWrapper>
+			<main className={classNames.join(" ")} style={extraStyle}>
+				<RoomList activeRoomID={activeRoom?.roomID ?? null}/>
+				{resizeHandle1}
+				{activeRoom
+					? <RoomView
+						key={activeRoom.roomID}
+						room={activeRoom}
+						rightPanel={rightPanel}
+						rightPanelResizeHandle={resizeHandle2}
+					/>
+					: rightPanel && <>
+						{resizeHandle2}
+						{rightPanel && <RightPanel {...rightPanel}/>}
+					</>}
+			</main>
+		</ModalWrapper>
+	</MainScreenContext>
 }
 
 export default MainScreen
diff --git a/web/src/ui/modal/Modal.tsx b/web/src/ui/modal/Modal.tsx
index 4b99de4..24d5745 100644
--- a/web/src/ui/modal/Modal.tsx
+++ b/web/src/ui/modal/Modal.tsx
@@ -45,18 +45,16 @@ export const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
 			setState(null)
 		}
 	}, [])
-	return <>
-		<ModalContext value={setState}>
-			{children}
-			{state && <div
-				className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`}
-				onClick={onClickWrapper}
-				onKeyDown={onKeyWrapper}
-			>
-				<ModalCloseContext value={onClickWrapper}>
-					{state.content}
-				</ModalCloseContext>
-			</div>}
-		</ModalContext>
-	</>
+	return <ModalContext value={setState}>
+		{children}
+		{state && <div
+			className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`}
+			onClick={onClickWrapper}
+			onKeyDown={onKeyWrapper}
+		>
+			<ModalCloseContext value={onClickWrapper}>
+				{state.content}
+			</ModalCloseContext>
+		</div>}
+	</ModalContext>
 }