From 7ed0f2633c2b0b027aeb975b9f1a473964b8faa4 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 23 Feb 2025 23:21:01 +0200
Subject: [PATCH] web/modal: make edit history modal fullscreen on mobile

---
 web/src/ui/modal/Lightbox.css            | 10 ++++++++++
 web/src/ui/timeline/EventEditHistory.css |  6 ++++++
 web/src/ui/timeline/TimelineEvent.tsx    |  2 +-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/src/ui/modal/Lightbox.css b/web/src/ui/modal/Lightbox.css
index 9d65ab7..b629b60 100644
--- a/web/src/ui/modal/Lightbox.css
+++ b/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;
 		}
diff --git a/web/src/ui/timeline/EventEditHistory.css b/web/src/ui/timeline/EventEditHistory.css
index 171322a..7396cbe 100644
--- a/web/src/ui/timeline/EventEditHistory.css
+++ b/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;
 	}
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 5ee6628..1ade3e5 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/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",
 		})
 	}