From 6d84bf462c5f93b1dc1006b817528afbd9b65364 Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Sat, 14 Mar 2026 16:02:47 +0100
Subject: [PATCH 1/2] A bunch of changes

---
 app/components/Chart.tsx                      |  4 +-
 app/components/MobileNav.module.css           | 29 +++++-----
 app/components/MobileNav.tsx                  | 24 +++++----
 app/components/elements/Dialog.module.css     |  1 +
 app/components/layout/ChatSidebar.module.css  |  9 ++--
 app/components/layout/GlobalSearch.module.css |  3 +-
 .../layout/NotificationPopover.module.css     |  4 +-
 .../layout/TopRightButtons.module.css         |  2 +-
 app/components/layout/TopRightButtons.tsx     |  1 +
 .../badges/routes/badges.$id.edit.tsx         |  4 +-
 .../build-analyzer/routes/analyzer.tsx        |  4 +-
 .../routes/plus.voting.results.tsx            |  4 +-
 app/features/scrims/components/ScrimCard.tsx  |  8 +--
 .../sendouq-match/routes/q.match.$id.tsx      |  2 +-
 app/features/sendouq/routes/q.info.tsx        | 54 +++++++++----------
 .../components/BracketMapListDialog.tsx       |  2 +-
 .../OrganizerMatchMapListDialog.tsx           |  2 +-
 .../tournament/routes/to.$id.register.tsx     | 22 ++++----
 18 files changed, 93 insertions(+), 86 deletions(-)

diff --git a/app/components/Chart.tsx b/app/components/Chart.tsx
index 940723ad3..582ca84af 100644
--- a/app/components/Chart.tsx
+++ b/app/components/Chart.tsx
@@ -126,10 +126,10 @@ function ChartTooltip({
 
 	return (
 		<div className={styles.tooltip}>
-			<h3 className="text-center text-md">
+			<h2 className="text-center text-md">
 				{header()}
 				{headerSuffix}
-			</h3>
+			</h2>
 			{dataPoints.map((dataPoint, index) => {
 				const color = dataPoint.style?.fill ?? "var(--color-accent)";
 
diff --git a/app/components/MobileNav.module.css b/app/components/MobileNav.module.css
index e70f1efd7..10b185e2e 100644
--- a/app/components/MobileNav.module.css
+++ b/app/components/MobileNav.module.css
@@ -106,7 +106,7 @@
 	height: 85%;
 	background-color: var(--color-bg);
 	border-radius: var(--radius-box) var(--radius-box) 0 0;
-	overflow-y: auto;
+	overflow: hidden;
 	display: flex;
 	flex-direction: column;
 }
@@ -130,7 +130,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	padding-inline: var(--s-2);
+	padding-inline: var(--s-4);
 	background-color: var(--color-bg-high);
 	border-bottom: 1.5px solid var(--color-border);
 	z-index: 1;
@@ -175,19 +175,17 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	padding-inline: var(--s-2);
+	padding-inline: var(--s-4);
 	background-color: var(--color-bg-high);
 	border-bottom: 1.5px solid var(--color-border);
+	border-top: 1.5px solid var(--color-border);
 	flex-shrink: 0;
 	color: var(--color-text-high);
 	min-height: var(--layout-nav-height);
-}
 
-.streamsSection {
-	padding: var(--s-1-5);
-	border-top: 1.5px solid var(--color-border);
-	background-color: var(--color-bg-high);
-	flex: 1;
+	&:has(+ nav) {
+		border-top: none;
+	}
 }
 
 .panelCloseButton {
@@ -197,7 +195,9 @@
 	border: none;
 	cursor: pointer;
 	color: var(--color-error);
-	padding: var(--s-1);
+	padding: 0;
+	height: var(--field-size);
+	aspect-ratio: 1 / 1;
 	border-radius: var(--radius-field);
 	margin-inline-start: auto;
 }
@@ -207,7 +207,6 @@
 
 .panelIconContainer {
 	border-radius: var(--radius-field);
-	padding: var(--s-1-5);
 }
 
 .streamsList {
@@ -312,8 +311,8 @@
 }
 
 .youPanelSettingsButton svg {
-	width: 20px;
-	height: 20px;
+	width: 18px;
+	height: 18px;
 }
 
 .panelSectionLink {
@@ -326,7 +325,7 @@
 	color: var(--color-text-high);
 	text-decoration: none;
 	padding: var(--s-1) var(--s-3);
-	background-color: var(--color-bg-higher);
+	background-color: var(--color-bg-high);
 	border-radius: var(--radius-field);
 
 	& svg {
@@ -336,7 +335,7 @@
 
 .panelSectionLink:hover {
 	color: var(--color-text);
-	background-color: var(--color-bg-high);
+	background-color: var(--color-bg-higher);
 }
 
 .tabBadge {
diff --git a/app/components/MobileNav.tsx b/app/components/MobileNav.tsx
index 027f8ff98..cba06a610 100644
--- a/app/components/MobileNav.tsx
+++ b/app/components/MobileNav.tsx
@@ -281,11 +281,7 @@ function MobilePanel({
 			isDismissable={false}
 		>
 			<Modal
-				className={clsx(
-					styles.panel,
-					"scrollbar",
-					skipAnimation && styles.noAnimation,
-				)}
+				className={clsx(styles.panel, skipAnimation && styles.noAnimation)}
 			>
 				<Dialog className={styles.panelDialog}>
 					<header className={styles.panelHeader}>
@@ -299,7 +295,9 @@ function MobilePanel({
 							<X size={18} />
 						</button>
 					</header>
-					<div className={styles.panelContent}>{children}</div>
+					<div className={clsx(styles.panelContent, "scrollbar")}>
+						{children}
+					</div>
 					<GhostTabBar onTabPress={onTabPress} isLoggedIn={isLoggedIn} />
 				</Dialog>
 			</Modal>
@@ -377,10 +375,14 @@ function MenuOverlay({
 						</ul>
 					</nav>
 
-					<section className={styles.streamsSection}>
-						<header className={styles.streamsSectionHeader}>
-							<Tv />
-							<h3>{t("front:sideNav.streams")}</h3>
+					<section>
+						<header className={styles.menuHeader}>
+							<div className={styles.panelIconContainer}>
+								<Tv size={18} />
+							</div>
+							<h2 className={styles.panelTitle}>
+								{t("front:sideNav.streams")}
+							</h2>
 						</header>
 						{streams.length === 0 ? (
 							<div className={styles.sideNavEmpty}>
@@ -531,7 +533,7 @@ function YouPanel({
 					onClick={onClose}
 					aria-label={t("common:pages.settings")}
 				>
-					<Settings />
+					<Settings size={18} />
 				</Link>
 			</div>
 
diff --git a/app/components/elements/Dialog.module.css b/app/components/elements/Dialog.module.css
index 4eb109f93..534e9aaed 100644
--- a/app/components/elements/Dialog.module.css
+++ b/app/components/elements/Dialog.module.css
@@ -38,6 +38,7 @@
 	overflow-x: hidden;
 	overflow-y: auto;
 	border-radius: 1rem;
+	border: 1px solid var(--color-border);
 	background-color: var(--color-bg);
 	padding: var(--s-6);
 	text-align: left;
diff --git a/app/components/layout/ChatSidebar.module.css b/app/components/layout/ChatSidebar.module.css
index 8dc60e7f6..4daa2cafd 100644
--- a/app/components/layout/ChatSidebar.module.css
+++ b/app/components/layout/ChatSidebar.module.css
@@ -9,7 +9,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	padding-inline: var(--s-2);
+	padding-inline: var(--s-4);
 	background-color: var(--color-bg-high);
 	border-bottom: 1.5px solid var(--color-border);
 	flex-shrink: 0;
@@ -29,7 +29,9 @@
 	border: none;
 	cursor: pointer;
 	color: var(--color-error);
-	padding: var(--s-1);
+	height: var(--field-size);
+	aspect-ratio: 1 / 1;
+	padding: 0;
 	border-radius: var(--radius-field);
 	margin-inline-start: auto;
 }
@@ -95,7 +97,8 @@
 	border: none;
 	cursor: pointer;
 	color: var(--color-text);
-	padding: var(--s-1);
+	height: var(--field-size-sm);
+	aspect-ratio: 1 / 1;
 	border-radius: var(--radius-field);
 }
 
diff --git a/app/components/layout/GlobalSearch.module.css b/app/components/layout/GlobalSearch.module.css
index 45568d66e..343af1d87 100644
--- a/app/components/layout/GlobalSearch.module.css
+++ b/app/components/layout/GlobalSearch.module.css
@@ -70,6 +70,7 @@
 .modal {
 	width: 100%;
 	max-width: 32rem;
+	border: 1px solid var(--color-border);
 	background-color: var(--color-bg);
 	border-radius: var(--radius-box);
 	box-shadow:
@@ -181,7 +182,7 @@
 }
 
 .searchTypeRadioSelected {
-	background-color: var(--color-accent-high);
+	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
 	border-color: transparent;
 }
diff --git a/app/components/layout/NotificationPopover.module.css b/app/components/layout/NotificationPopover.module.css
index 7a5bb8c4b..b959da66b 100644
--- a/app/components/layout/NotificationPopover.module.css
+++ b/app/components/layout/NotificationPopover.module.css
@@ -55,7 +55,7 @@
 	color: var(--color-text-high);
 	text-decoration: none;
 	padding: var(--s-1) var(--s-3);
-	background-color: var(--color-bg-higher);
+	background-color: var(--color-bg-high);
 	border-radius: var(--radius-field);
 
 	& svg {
@@ -71,5 +71,5 @@
 
 .viewAllLink:hover {
 	color: var(--color-text);
-	background-color: var(--color-bg-high);
+	background-color: var(--color-bg-higher);
 }
diff --git a/app/components/layout/TopRightButtons.module.css b/app/components/layout/TopRightButtons.module.css
index 2eaf7bea7..d148109d1 100644
--- a/app/components/layout/TopRightButtons.module.css
+++ b/app/components/layout/TopRightButtons.module.css
@@ -1,6 +1,6 @@
 .container {
 	display: flex;
-	gap: var(--s-3);
+	gap: var(--s-4);
 	margin-left: auto;
 }
 
diff --git a/app/components/layout/TopRightButtons.tsx b/app/components/layout/TopRightButtons.tsx
index 2eefa4872..4c8de5cdf 100644
--- a/app/components/layout/TopRightButtons.tsx
+++ b/app/components/layout/TopRightButtons.tsx
@@ -90,6 +90,7 @@ function ChatButton({
 	return (
 		<>
 			<SendouButton
+				shape="square"
 				size="small"
 				icon={<MessageSquare />}
 				variant={variant}
diff --git a/app/features/badges/routes/badges.$id.edit.tsx b/app/features/badges/routes/badges.$id.edit.tsx
index c7aea85de..702b2f207 100644
--- a/app/features/badges/routes/badges.$id.edit.tsx
+++ b/app/features/badges/routes/badges.$id.edit.tsx
@@ -54,7 +54,7 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) {
 	return (
 		<div className="stack md">
 			<div className="stack sm">
-				<h3 className={styles.editSmallHeader}>Managers</h3>
+				<h2 className={styles.editSmallHeader}>Managers</h2>
 				<UserSearch
 					key={managers.map((m) => m.id).join("-")}
 					label="Add new manager"
@@ -135,7 +135,7 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
 	return (
 		<div className="stack md">
 			<div className="stack sm">
-				<h3 className={styles.editSmallHeader}>Owners</h3>
+				<h2 className={styles.editSmallHeader}>Owners</h2>
 				<UserSearch
 					label="Add new owner"
 					className="text-center"
diff --git a/app/features/build-analyzer/routes/analyzer.tsx b/app/features/build-analyzer/routes/analyzer.tsx
index eddd8a17b..f9254aeaa 100644
--- a/app/features/build-analyzer/routes/analyzer.tsx
+++ b/app/features/build-analyzer/routes/analyzer.tsx
@@ -1458,7 +1458,7 @@ function StatCard({
 			data-testid={testId}
 		>
 			<div className={styles.statCardTitleAndValueContainer}>
-				<h3 className={styles.statCardTitle}>
+				<h2 className={styles.statCardTitle}>
 					{title}{" "}
 					{popoverInfo && (
 						<SendouPopover
@@ -1471,7 +1471,7 @@ function StatCard({
 							{popoverInfo}
 						</SendouPopover>
 					)}
-				</h3>
+				</h2>
 				<div className={styles.statCardValues}>
 					<div className={styles.statCardValue}>
 						<h4 className={styles.statCardValueTitle}>
diff --git a/app/features/plus-voting/routes/plus.voting.results.tsx b/app/features/plus-voting/routes/plus.voting.results.tsx
index 6796ed17f..08ccdbe5d 100644
--- a/app/features/plus-voting/routes/plus.voting.results.tsx
+++ b/app/features/plus-voting/routes/plus.voting.results.tsx
@@ -80,9 +80,9 @@ function Results({
 			<div className="stack lg">
 				{results.map((tiersResults) => (
 					<div className="stack md" key={tiersResults.tier}>
-						<h3 className={styles.tierHeader}>
+						<h2 className={styles.tierHeader}>
 							<span>+{tiersResults.tier}</span>
-						</h3>
+						</h2>
 						{(["passed", "failed"] as const).map((status) => (
 							<div key={status} className={styles.passedInfoContainer}>
 								<h4 className={styles.passedHeader}>
diff --git a/app/features/scrims/components/ScrimCard.tsx b/app/features/scrims/components/ScrimCard.tsx
index 94d04da44..b1f4a3141 100644
--- a/app/features/scrims/components/ScrimCard.tsx
+++ b/app/features/scrims/components/ScrimCard.tsx
@@ -61,7 +61,7 @@ export function ScrimPostCard({
 						owner={owner}
 					/>
 				</div>
-				<h3 className={styles.teamName}>
+				<h2 className={styles.teamName}>
 					{isPickup ? (
 						<>
 							<span className={styles.pickupLabel}>{t("scrims:pickupBy")}</span>
@@ -70,7 +70,7 @@ export function ScrimPostCard({
 					) : (
 						teamName
 					)}
-				</h3>
+				</h2>
 				<div className={styles.rightIconsContainer}>
 					{post.isPrivate ? <ScrimVisibilityPopover /> : null}
 					<ScrimTeamMembersPopover users={post.users} />
@@ -496,7 +496,7 @@ export function ScrimRequestCard({
 						owner={owner}
 					/>
 				</div>
-				<h3 className={styles.teamName}>
+				<h2 className={styles.teamName}>
 					{isPickup ? (
 						<>
 							<span className={styles.pickupLabel}>{t("scrims:pickupBy")}</span>
@@ -505,7 +505,7 @@ export function ScrimRequestCard({
 					) : (
 						teamName
 					)}
-				</h3>
+				</h2>
 				<div className={styles.rightIconsContainer}>
 					<ScrimTeamMembersPopover users={request.users} />
 				</div>
diff --git a/app/features/sendouq-match/routes/q.match.$id.tsx b/app/features/sendouq-match/routes/q.match.$id.tsx
index e7c9b2cf5..474e2c5ac 100644
--- a/app/features/sendouq-match/routes/q.match.$id.tsx
+++ b/app/features/sendouq-match/routes/q.match.$id.tsx
@@ -492,7 +492,7 @@ function ReportWeaponsForm() {
 				value={JSON.stringify(weaponsUsage)}
 			/>
 			<div className="stack horizontal md justify-between w-max mx-auto">
-				<h3 className="text-md">{t("q:match.report.whoToReport")}</h3>
+				<h2 className="text-md">{t("q:match.report.whoToReport")}</h2>
 				<label className="stack horizontal xs items-center mb-0">
 					{t("q:match.report.whoToReport.me")}
 					<input
diff --git a/app/features/sendouq/routes/q.info.tsx b/app/features/sendouq/routes/q.info.tsx
index 0d5861755..46a89340f 100644
--- a/app/features/sendouq/routes/q.info.tsx
+++ b/app/features/sendouq/routes/q.info.tsx
@@ -170,13 +170,13 @@ function BeforeJoining() {
 	return (
 		<section>
 			<h2 id="before-joining">Before joining</h2>
-			<h3>Make a sendou.ink account</h3>
+			<h2>Make a sendou.ink account</h2>
 			<p>
 				Click “log in” on the front page (mobile) or top right (desktop). Agree
 				to connecting your Discord account, you will be redirected and the
 				account is made.
 			</p>
-			<h3>Select your map pool</h3>
+			<h2>Select your map pool</h2>
 			<p>
 				Optional - if you don&apos;t have a preference then skip this step and
 				other players in the lobby get to choose. On the{" "}
@@ -200,19 +200,19 @@ function BeforeJoining() {
 				Finally hit save to save your preference (also do this for each step
 				below).
 			</p>
-			<h3>Weapon pool</h3>
+			<h2>Weapon pool</h2>
 			<p>
 				Choose up to 4 weapons that you will be playing. Don&apos;t skip this
 				step as it&apos;s important for team building reasons.
 			</p>
-			<h3>Voice chat</h3>
+			<h2>Voice chat</h2>
 			<p>
 				Select whether you can voice chat, listen only or neither. Also select
 				the languages you speak. Again this is an important step so don&apos;t
 				skip this one. Note if you select that you can voice chat it&apos;s
 				expected that you will join the voice chat when asked.
 			</p>
-			<h3>Avoiding Splattercolor Screen</h3>
+			<h2>Avoiding Splattercolor Screen</h2>
 			<p>
 				You can select to avoid Splattercolor Screen. This option exists for
 				accessibility reasons. Toggling this option means screen will be banned
@@ -220,13 +220,13 @@ function BeforeJoining() {
 				will see that screen would be banned in your set so it&apos;s not
 				advised to select this option unnecessarily.
 			</p>
-			<h3>Bio</h3>
+			<h2>Bio</h2>
 			<p>
 				On your user profile page put a short description to your bio about your
 				previous competitive experience etc. information you think would be
 				useful for team building purposes.
 			</p>
-			<h3>Friend code</h3>
+			<h2>Friend code</h2>
 			<p>
 				On the SendouQ front page enter your friend code. It&apos;s your
 				responsibility to make sure it matches the account you will be playing
@@ -234,7 +234,7 @@ function BeforeJoining() {
 				the rules. If you need to change friend code after setting it use the
 				helpdesk on our Discord server.
 			</p>
-			<h3>Reading rules</h3>
+			<h2>Reading rules</h2>
 			<p>
 				Read the <Link to={SENDOUQ_RULES_PAGE}>rules</Link>. You agree to follow
 				them when you play SendouQ.
@@ -247,8 +247,8 @@ function JoiningTheQueue() {
 	return (
 		<section>
 			<h2 id="joining-the-queue">Joining the queue</h2>
-			<h3>Joining solo</h3> <p>Click “Join solo” on the SendouQ front page.</p>
-			<h3>Joining with 1-3 mates</h3>
+			<h2>Joining solo</h2> <p>Click “Join solo” on the SendouQ front page.</p>
+			<h2>Joining with 1-3 mates</h2>
 			<p>
 				Click “Join with mates” on the SendouQ front page. On the following page
 				share the invite link with your mates. You can also “Quick add” mates if
@@ -283,7 +283,7 @@ function FindingAGroup() {
 				</p>
 				<p>Repeat this grouping up process till you have a full group of 4.</p>
 			</p>
-			<h3>Plus Server icons</h3>
+			<h2>Plus Server icons</h2>
 			<p>
 				<Image alt="" path={navIconUrl("plus")} size={24} />
 				<p>
@@ -291,20 +291,20 @@ function FindingAGroup() {
 					<Link to={FAQ_PAGE}>FAQ</Link> for more info.
 				</p>
 			</p>
-			<h3>Adding a note</h3>
+			<h2>Adding a note</h2>
 			<p>
 				You can add a public note if you want to communicate something to other
 				groups that might influence grouping up somehow. E.g. message that you
 				will be streaming the set with VC so people who don&apos;t want to
 				appear on stream can avoid your group.
 			</p>
-			<h3>Inactivity</h3>
+			<h2>Inactivity</h2>
 			<p>
 				If you don&apos;t do any actions for 30 minutes your group will be
 				marked inactive and hidden. Click the prompt that you are still looking
 				to be visible again.
 			</p>
-			<h3>Group managers</h3>
+			<h2>Group managers</h2>
 			<p>
 				Only the group owner or manager can send invites. When groups merge then
 				the previous owner and manager will have it in the new group as well.
@@ -326,7 +326,7 @@ function FindingAnOpponent() {
 				level (and they are free to not accept). You will also see the modes the
 				set would have before deciding on challenging/accepting.
 			</p>
-			<h3>Rechallenging</h3>
+			<h2>Rechallenging</h2>
 			<p>
 				Sometimes it can take a while for a group to accept your challenge. If
 				you don&apos;t have a strong preference about modes you might consider
@@ -355,19 +355,19 @@ function PlayingTheMatch() {
 				Then just play matches till either team has reached 4 wins and report
 				the score. Your SP will be adjusted after both teams report the score.
 			</p>
-			<h3>Canceling the match</h3>
+			<h2>Canceling the match</h2>
 			<p>
 				Match can be canceled if both teams agree to (read the rules). Click the
 				cancel button to request canceling the match. If the other team agrees
 				then they can also click it to confirm and lock the match.
 			</p>
-			<h3>Enemy not reporting</h3>
+			<h2>Enemy not reporting</h2>
 			<p>
 				As the first measure contact the opponent and politely remind them to.
 				If that is not working then come to the helpdesk channel on our Discord
 				to get help from admin.
 			</p>
-			<h3>Private note</h3>
+			<h2>Private note</h2>
 			<p>
 				After the set you can leave private notes about your teammates. If you
 				had good experience with someone why not leave a positive reminder so
@@ -377,14 +377,14 @@ function PlayingTheMatch() {
 				phase. Clicking their avatar in the group up phase will show what you
 				wrote about them.
 			</p>
-			<h3>Joining again with the same group</h3>
+			<h2>Joining again with the same group</h2>
 			<p>
 				As a group owner you can use the &quot;Look again with same group&quot;
 				to instantly join the queue with the same roster. Note that this button
 				should only be used if you checked with all your mates that they can
 				still play another set.
 			</p>
-			<h3>Stats</h3>
+			<h2>Stats</h2>
 			<p>
 				While reporting the score you can also report weapons. You can view
 				statistics on your user profile. You can for example see your win rate
@@ -400,7 +400,7 @@ function OtherTopics() {
 	return (
 		<section>
 			<h2 id="other-topics">Other topics</h2>
-			<h3>Ranking algorithm</h3>
+			<h2>Ranking algorithm</h2>
 			<p>
 				The ranking algorithm used is called OpenSkill. Most common question
 				people have is how is it possible that their higher ranked mate loses
@@ -413,7 +413,7 @@ function OtherTopics() {
 				Only the whole set&apos;s result matters so points gained/lost are the
 				same whether the set ends 4-3 or 4-0.
 			</p>
-			<h3>Ranking tiers</h3>
+			<h2>Ranking tiers</h2>
 			<p>
 				<Link to={TIERS_PAGE}>
 					View full list of tiers and current SP criteria
@@ -437,14 +437,14 @@ function OtherTopics() {
 				that threshold tiers switch being calculated based on players on the
 				leaderboard only.
 			</p>
-			<h3>Rank history</h3>
+			<h2>Rank history</h2>
 			<p>
 				You can see your ranking history graph on your user profile&apos;s
 				“Seasons” page. Note that to to view your rank history, two conditions
 				must be met: 1. You have completed a minimum of 7 sets. 2. These sets
 				were played across 3 separate days, according to server time.
 			</p>
-			<h3>Team ranking</h3>
+			<h2>Team ranking</h2>
 			<p>
 				Team ranking is just ranking of unique rosters of 4. This means that If
 				your team has 5 members (A, B, C, D, E) then you would potentially have
@@ -458,7 +458,7 @@ function OtherTopics() {
 				ranking per player so you might not show up at all if the mates of your
 				rankings have higher rankings with other players.
 			</p>
-			<h3>Ranked tournaments</h3>
+			<h2>Ranked tournaments</h2>
 			<p>
 				In addition to SendouQ, tournaments can also affect your ranking. Check
 				the <Link to={CALENDAR_PAGE}>calendar</Link> to find tournaments hosted
@@ -472,13 +472,13 @@ function OtherTopics() {
 				have their ranking changed. If you sub in the middle of a set then
 				it&apos;s counted based on people who played the majority of the set.
 			</p>
-			<h3>SendouQ Season Finale</h3>
+			<h2>SendouQ Season Finale</h2>
 			<p>
 				Top 12 teams are invited to a SendouQ Season Finale event that typically
 				happens 1 week after season ending. It has a price pot of $500 and is
 				Splat Zones only.
 			</p>
-			<h3>Off-season</h3>
+			<h2>Off-season</h2>
 			<p>
 				For off-season (usually around 2 weeks between seasons) SendouQ is not
 				available.
diff --git a/app/features/tournament-bracket/components/BracketMapListDialog.tsx b/app/features/tournament-bracket/components/BracketMapListDialog.tsx
index c31239e83..aac3b3d86 100644
--- a/app/features/tournament-bracket/components/BracketMapListDialog.tsx
+++ b/app/features/tournament-bracket/components/BracketMapListDialog.tsx
@@ -895,7 +895,7 @@ function RoundMapList({
 
 	return (
 		<div>
-			<h3>{name}</h3>
+			<h2>{name}</h2>
 			<div className={styles.roundControls}>
 				<button
 					type="button"
diff --git a/app/features/tournament-bracket/components/OrganizerMatchMapListDialog.tsx b/app/features/tournament-bracket/components/OrganizerMatchMapListDialog.tsx
index c9de36a1a..414b2d4b8 100644
--- a/app/features/tournament-bracket/components/OrganizerMatchMapListDialog.tsx
+++ b/app/features/tournament-bracket/components/OrganizerMatchMapListDialog.tsx
@@ -81,7 +81,7 @@ export function OrganizerMatchMapListDialog({
 				</div>
 				{bannedMaps && bannedMaps?.length > 0 ? (
 					<div className="mt-2">
-						<h3 className="text-sm">Banned maps</h3>
+						<h2 className="text-sm">Banned maps</h2>
 						<div className="text-xs">
 							{bannedMaps.map((map, i) => {
 								const bannedByTeam = tournament.teamById(
diff --git a/app/features/tournament/routes/to.$id.register.tsx b/app/features/tournament/routes/to.$id.register.tsx
index f223e7c2e..76338fff9 100644
--- a/app/features/tournament/routes/to.$id.register.tsx
+++ b/app/features/tournament/routes/to.$id.register.tsx
@@ -446,9 +446,9 @@ function RegistrationProgress({
 
 	return (
 		<div>
-			<h3 className={clsx(styles.sectionHeader, "text-center")}>
+			<h2 className={clsx(styles.sectionHeader, "text-center")}>
 				{t("tournament:pre.steps.header")}
-			</h3>
+			</h2>
 			<section className={clsx(styles.section, "stack md")}>
 				<div className="stack horizontal lg justify-center text-sm font-semi-bold">
 					{steps.map((step, i) => {
@@ -675,9 +675,9 @@ function TeamInfo({
 	return (
 		<div>
 			<div className="stack horizontal justify-between">
-				<h3 className={styles.sectionHeader}>
+				<h2 className={styles.sectionHeader}>
 					2. {t("tournament:pre.info.header")}
-				</h3>
+				</h2>
 				{canUnregister &&
 				tournament.isLeagueSignup &&
 				!tournament.registrationOpen ? (
@@ -875,7 +875,7 @@ function FriendCode() {
 
 	return (
 		<div>
-			<h3 className={styles.sectionHeader}>1. Friend code</h3>
+			<h2 className={styles.sectionHeader}>1. Friend code</h2>
 			<section className={styles.section}>
 				<div className={clsx(styles.sectionInputContainer, "mx-auto")}>
 					<FriendCodeInput friendCode={user?.friendCode} />
@@ -901,9 +901,9 @@ function FriendCode() {
 function GoogleFormsLink() {
 	return (
 		<div>
-			<h3 className={styles.sectionHeader}>
+			<h2 className={styles.sectionHeader}>
 				Additional Requirement: Google Form
-			</h3>
+			</h2>
 			<section className={clsx(styles.section, "stack lg items-center")}>
 				<a
 					href={import.meta.env.VITE_LEAGUE_GOOGLE_FORM_URL}
@@ -975,9 +975,9 @@ function FillRoster({
 
 	return (
 		<div>
-			<h3 className={styles.sectionHeader}>
+			<h2 className={styles.sectionHeader}>
 				3. {t("tournament:pre.roster.header")}
-			</h3>
+			</h2>
 			<section className={clsx(styles.section, "stack lg items-center")}>
 				{playersAvailableToDirectlyAdd.length > 0 && canAddMembers ? (
 					<>
@@ -1199,9 +1199,9 @@ function CounterPickMapPoolPicker() {
 
 	return (
 		<div>
-			<h3 className={styles.sectionHeader}>
+			<h2 className={styles.sectionHeader}>
 				4. {t("tournament:pre.pool.header")}
-			</h3>
+			</h2>
 			<section className={styles.section}>
 				<fetcher.Form method="post" className="stack lg">
 					<input

From 97c65a89136c65fd5cc5600af6a2603f5dcfa837 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 14 Mar 2026 17:09:07 +0200
Subject: [PATCH 2/2] Better subtitle for scrims, allow date inject

---
 app/components/layout/ChatSidebar.tsx        | 22 +++++++++-
 app/features/chat/chat-utils.test.ts         | 44 ++++++++++++++++++++
 app/features/chat/chat-utils.ts              | 15 +++++++
 app/features/scrims/actions/scrims.server.ts |  8 ++--
 4 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 app/features/chat/chat-utils.test.ts

diff --git a/app/components/layout/ChatSidebar.tsx b/app/components/layout/ChatSidebar.tsx
index 16f1ba711..4087b93fc 100644
--- a/app/components/layout/ChatSidebar.tsx
+++ b/app/components/layout/ChatSidebar.tsx
@@ -3,12 +3,15 @@ import { ArrowLeft, MessageSquare, X } from "lucide-react";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+import { resolveDatePlaceholders } from "~/features/chat/chat-utils";
 import { Chat } from "~/features/chat/components/Chat";
 import { useChatContext } from "~/features/chat/useChatContext";
 import { useTimeFormat } from "~/hooks/useTimeFormat";
 import sideNavStyles from "../SideNav.module.css";
 import styles from "./ChatSidebar.module.css";
 
+// xxx: add navIcon/url per room
+
 export function ChatSidebar({ onClose }: { onClose?: () => void }) {
 	const chatContext = useChatContext();
 
@@ -94,7 +97,14 @@ function RoomList({ onClose }: { onClose?: () => void }) {
 											styles.roomName,
 										)}
 									>
-										{room.header}
+										{resolveDatePlaceholders(room.header, (d) =>
+											formatDateTime(d, {
+												month: "short",
+												day: "numeric",
+												hour: "numeric",
+												minute: "numeric",
+											}),
+										)}
 									</span>
 									<span className={sideNavStyles.listLinkSubtitle}>
 										{room.subtitle}
@@ -122,6 +132,7 @@ function RoomList({ onClose }: { onClose?: () => void }) {
 function ChatView({ onClose }: { onClose?: () => void }) {
 	const chatContext = useChatContext()!;
 	const activeRoom = chatContext.activeRoom!;
+	const { formatDateTime } = useTimeFormat();
 
 	const otherRoomsUnreadCount = Object.entries(chatContext.unreadCounts)
 		.filter(([code]) => code !== activeRoom)
@@ -147,7 +158,14 @@ function ChatView({ onClose }: { onClose?: () => void }) {
 	const headerContent = (
 		<>
 			<span className={styles.chatHeaderTitle}>
-				{room?.header ?? activeRoom}
+				{resolveDatePlaceholders(room?.header ?? activeRoom, (d) =>
+					formatDateTime(d, {
+						month: "short",
+						day: "numeric",
+						hour: "numeric",
+						minute: "numeric",
+					}),
+				)}
 			</span>
 			{room?.subtitle ? (
 				<span className={styles.chatHeaderSubtitle}>{room.subtitle}</span>
diff --git a/app/features/chat/chat-utils.test.ts b/app/features/chat/chat-utils.test.ts
new file mode 100644
index 000000000..f6c8349c5
--- /dev/null
+++ b/app/features/chat/chat-utils.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, test } from "vitest";
+import { datePlaceholder, resolveDatePlaceholders } from "./chat-utils";
+
+describe("datePlaceholder", () => {
+	test("returns correctly formatted placeholder string", () => {
+		const date = new Date(1700000000000);
+
+		expect(datePlaceholder(date)).toBe("{{date:1700000000000}}");
+	});
+});
+
+describe("resolveDatePlaceholders", () => {
+	const mockFormat = (d: Date) => `FORMATTED:${d.getTime()}`;
+
+	test("replaces a single placeholder with formatted date", () => {
+		const text = "Starts at {{date:1700000000000}}";
+
+		expect(resolveDatePlaceholders(text, mockFormat)).toBe(
+			"Starts at FORMATTED:1700000000000",
+		);
+	});
+
+	test("replaces multiple placeholders in one string", () => {
+		const text = "From {{date:1700000000000}} to {{date:1700003600000}}";
+
+		expect(resolveDatePlaceholders(text, mockFormat)).toBe(
+			"From FORMATTED:1700000000000 to FORMATTED:1700003600000",
+		);
+	});
+
+	test("returns text unchanged when no placeholders present", () => {
+		const text = "Just a normal string";
+
+		expect(resolveDatePlaceholders(text, mockFormat)).toBe(text);
+	});
+
+	test("handles text that is only a placeholder", () => {
+		const text = "{{date:1700000000000}}";
+
+		expect(resolveDatePlaceholders(text, mockFormat)).toBe(
+			"FORMATTED:1700000000000",
+		);
+	});
+});
diff --git a/app/features/chat/chat-utils.ts b/app/features/chat/chat-utils.ts
index d23594587..56de7d0e1 100644
--- a/app/features/chat/chat-utils.ts
+++ b/app/features/chat/chat-utils.ts
@@ -1,5 +1,20 @@
 import type { ChatMessage } from "./chat-types";
 
+const DATE_PLACEHOLDER_PATTERN = /\{\{date:(\d+)\}\}/g;
+
+export function datePlaceholder(date: Date): string {
+	return `{{date:${date.getTime()}}}`;
+}
+
+export function resolveDatePlaceholders(
+	text: string,
+	formatDateTime: (date: Date) => string,
+): string {
+	return text.replace(DATE_PLACEHOLDER_PATTERN, (_match, ts) =>
+		formatDateTime(new Date(Number(ts))),
+	);
+}
+
 export function messageTypeToSound(type: ChatMessage["type"]) {
 	if (type === "LIKE_RECEIVED") return "sq_like";
 	if (type === "MATCH_STARTED") return "sq_match";
diff --git a/app/features/scrims/actions/scrims.server.ts b/app/features/scrims/actions/scrims.server.ts
index 96cd5cb5a..a894b975b 100644
--- a/app/features/scrims/actions/scrims.server.ts
+++ b/app/features/scrims/actions/scrims.server.ts
@@ -3,6 +3,7 @@ import type { ActionFunctionArgs } from "react-router";
 import { redirect } from "react-router";
 import { requireUser } from "~/features/auth/core/user.server";
 import * as ChatSystemMessage from "~/features/chat/ChatSystemMessage.server";
+import { datePlaceholder } from "~/features/chat/chat-utils";
 import { notify } from "~/features/notifications/core/notify.server";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 import { requirePermission } from "~/modules/permissions/guards.server";
@@ -113,9 +114,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 			if (fullPost?.chatCode) {
 				ChatSystemMessage.setMetadata({
 					chatCode: fullPost.chatCode,
-					header: "Scrim",
-					// xxx: better subtitle?
-					subtitle: `Scrim #${post.id}`,
+					header: datePlaceholder(
+						databaseTimestampToDate(request.at ?? post.at),
+					),
+					subtitle: "Scrim",
 					url: scrimPage(post.id),
 					participantUserIds: Scrim.participantIdsListFromAccepted(fullPost),
 					expiresAt: add(databaseTimestampToDate(request.at ?? post.at), {