diff --git a/web/src/index.css b/web/src/index.css
index 6adcd44..b095ed8 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -81,6 +81,11 @@
 	--timeline-message-gap-small-event: 0;
 	--timeline-sender-name-timestamp-gap: .25rem;
 	--timeline-sender-name-content-gap: 0;
+	--timeline-horizontal-padding: 1.5rem;
+
+	@media screen and (max-width: 45rem) {
+		--timeline-horizontal-padding: .5rem;
+	}
 
 	@media (prefers-color-scheme: dark) {
 		color-scheme: dark;
diff --git a/web/src/ui/MainScreen.css b/web/src/ui/MainScreen.css
index 769c6f0..9539e76 100644
--- a/web/src/ui/MainScreen.css
+++ b/web/src/ui/MainScreen.css
@@ -16,7 +16,7 @@ main.matrix-main {
 			/ var(--room-list-width) 0   1fr      0   var(--right-panel-width);
 	}
 
-	@media screen and (max-width: 750px) {
+	@media screen and (max-width: 45rem) {
 		&.right-panel-open {
 			grid-template: "rightpanel" 1fr / 1fr;
 			> div.room-list-wrapper {
diff --git a/web/src/ui/composer/Autocompleter.css b/web/src/ui/composer/Autocompleter.css
index f437174..fb8b4bd 100644
--- a/web/src/ui/composer/Autocompleter.css
+++ b/web/src/ui/composer/Autocompleter.css
@@ -5,8 +5,8 @@ div.autocompletions-wrapper {
 
 div.autocompletions {
 	position: absolute;
-	bottom: 1.2rem;
-	left: 1.6rem;
+	bottom: 1.25rem;
+	left: var(--timeline-horizontal-padding);
 	border: 1px solid var(--border-color);
 	border-radius: 0.5rem;
 	box-shadow: 0 0 1rem var(--modal-box-shadow-color);
diff --git a/web/src/ui/composer/MessageComposer.css b/web/src/ui/composer/MessageComposer.css
index b15258e..7805c21 100644
--- a/web/src/ui/composer/MessageComposer.css
+++ b/web/src/ui/composer/MessageComposer.css
@@ -1,5 +1,5 @@
 div.message-composer {
-	margin: -1rem 1.6rem 0 1.6rem;
+	margin: -1rem var(--timeline-horizontal-padding) 0;
 	background-color: var(--composer-background-color);
 	border: 1px solid var(--border-color);
 	border-radius: 0.5rem;
diff --git a/web/src/ui/composer/TypingNotifications.css b/web/src/ui/composer/TypingNotifications.css
index fdac12b..c8af016 100644
--- a/web/src/ui/composer/TypingNotifications.css
+++ b/web/src/ui/composer/TypingNotifications.css
@@ -1,7 +1,7 @@
 div.typing-notifications {
 	grid-area: typing;
 	height: 1.6rem;
-	margin: 0 1.6rem;
+	margin: 0 var(--timeline-horizontal-padding);
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;
diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index 12aad1b..f97c2c7 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -1,7 +1,7 @@
 div.timeline-event {
-	width: calc(100% - 2 * 1.6rem);
-	max-width: calc(100% - 2 * 1.6rem);
-	padding: 0 1.6rem;
+	width: calc(100% - 2 * var(--timeline-horizontal-padding));
+	max-width: calc(100% - 2 * var(--timeline-horizontal-padding));
+	padding: 0 var(--timeline-horizontal-padding);
 	display: grid;
 	grid-template:
 		"cmc                          cmc                        cmc      cmc"    0