web/modal: make edit history modal fullscreen on mobile

web/src/ui/modal/Lightbox.css

@@ -19,6 +19,16 @@ div.overlay {
 		overflow: hidden;
 		display: flex;
 
+		&.full-screen-mobile {
+			@media screen and (max-width: 30rem) {
+				max-width: 100%;
+				max-height: 100%;
+				width: 100%;
+				height: 100%;
+				border-radius: 0;
+			}
+		}
+
 		> div.modal-box-inner {
 			overflow: scroll;
 		}

web/src/ui/timeline/EventEditHistory.css

@@ -6,8 +6,14 @@ div.event-edit-history-modal {
 	--timeline-status-size: 0;
 	--timeline-horizontal-padding: 0;
 	min-width: 20rem;
+	box-sizing: border-box;
 	padding: 1rem;
 
+	@media screen and (max-width: 30rem) {
+		min-width: 100%;
+		padding: .5rem;
+	}
+
 	> p {
 		margin: 0;
 	}

web/src/ui/timeline/TimelineEvent.tsx

@@ -125,7 +125,7 @@ const TimelineEvent = ({
 			content: <EventEditHistory evt={evt} roomCtx={roomCtx}/>,
 			dimmed: true,
 			boxed: true,
-			boxClass: "event-edit-history-wrapper",
+			boxClass: "full-screen-mobile event-edit-history-wrapper",
 			innerBoxClass: "event-edit-history-modal",
 		})
 	}