From 10befba10ae15c4837bb0791761dedb0680ce9d1 Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Wed, 14 Jan 2026 20:11:59 +0100
Subject: [PATCH] New layout vars

---
 app/components/Main.module.css                         | 10 +++++-----
 app/features/build-analyzer/routes/analyzer.module.css |  2 +-
 .../sendouq-match/routes/q.match.$id.module.css        |  4 ++--
 app/features/tournament/tournament.module.css          |  2 +-
 app/styles/vars.css                                    |  5 +++++
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/components/Main.module.css b/app/components/Main.module.css
index aff95c722..f0093bfc4 100644
--- a/app/components/Main.module.css
+++ b/app/components/Main.module.css
@@ -10,27 +10,27 @@
 }
 
 .main {
-	padding-block: var(--s-3) var(--s-32);
+	padding: var(--layout-main-padding);
+	margin-bottom: var(--s-32);
 	min-height: calc(100dvh - var(--layout-nav-height));
 }
 
 .normal {
 	width: 100%;
 	max-width: 48rem;
-	margin: 0 auto;
-	padding-inline: var(--s-3);
+	margin-inline: auto;
 }
 
 .narrow {
 	width: 100%;
 	max-width: 24rem;
-	margin: 0 auto;
+	margin-inline: auto;
 }
 
 .wide {
 	width: 100%;
 	max-width: 72rem;
-	margin: 0 auto;
+	margin-inline: auto;
 }
 
 @media screen and (display-mode: standalone) {
diff --git a/app/features/build-analyzer/routes/analyzer.module.css b/app/features/build-analyzer/routes/analyzer.module.css
index 3be143f0d..f774ed7bf 100644
--- a/app/features/build-analyzer/routes/analyzer.module.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -6,7 +6,7 @@
 
 .leftColumn {
 	position: sticky;
-	top: calc(var(--layout-nav-height) + var(--s-3));
+	top: var(--layout-sticky-top);
 	display: flex;
 	height: max-content;
 	flex-direction: column;
diff --git a/app/features/sendouq-match/routes/q.match.$id.module.css b/app/features/sendouq-match/routes/q.match.$id.module.css
index ec682953c..09ac8df6e 100644
--- a/app/features/sendouq-match/routes/q.match.$id.module.css
+++ b/app/features/sendouq-match/routes/q.match.$id.module.css
@@ -78,7 +78,7 @@
 
 .chatContainer {
 	align-self: flex-start;
-	top: calc(var(--layout-nav-height) + var(--s-3));
+	top: var(--layout-sticky-top);
 	position: sticky;
 	width: 100%;
 }
@@ -87,7 +87,7 @@
 	display: flex;
 	flex-direction: column;
 	align-self: flex-start;
-	top: calc(var(--layout-nav-height) + var(--s-3));
+	top: var(--layout-sticky-top);
 	position: sticky;
 }
 
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index 15670ec44..c09f79826 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -5,7 +5,7 @@
 }
 
 .chatContainer {
-	top: calc(var(--layout-nav-height) + var(--s-3));
+	top: var(--layout-sticky-top);
 	position: sticky;
 	width: 100%;
 }
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 8fd7c73ec..cccb48d28 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -145,6 +145,11 @@ html {
 
 	--layout-nav-height: 55px;
 	--layout-sidenav-width: 250px;
+	--layout-main-padding: var(--s-4);
+	--layout-sticky-top: calc(
+		var(--layout-nav-height) +
+		var(--layout-main-padding)
+	);
 }
 
 html {