Migrate to container queries

2026-10-26 20:43:36 -05:00 · 2026-03-15 18:24:21 +01:00
parent 668c537ecb
commit 49cdcd3bcc
26 changed files with 46 additions and 49 deletions
--- a/app/components/Main.module.css
+++ b/app/components/Main.module.css
@@ -1,4 +1,5 @@
 .main {
+	container-type: inline-size;
 	padding: var(--layout-main-padding);
 	margin-bottom: var(--s-32);
 	min-height: calc(100dvh - var(--layout-nav-height));
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -20,7 +20,7 @@
 	padding-inline: var(--s-3);
 }

-@media screen and (min-width: 640px) {
+@container (width >= 560px) {
 	.stageNameRow {
 		flex-direction: row;
 	}
--- a/app/components/Pagination.module.css
+++ b/app/components/Pagination.module.css
@@ -104,13 +104,13 @@
 	outline: none;
 }

-@media (width < 640px) {
+@container (width < 580px) {
 	.desktopOnly {
 		display: none;
 	}
 }

-@media (width >= 640px) {
+@container (width >= 580px) {
 	.mobileOnly {
 		display: none;
 	}
--- a/app/features/build-analyzer/routes/analyzer.module.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -14,6 +14,16 @@
 	gap: var(--s-4);
 }

+@container (width < 640px) {
+	.container {
+		grid-template-columns: 1fr;
+	}
+
+	.leftColumn {
+		position: initial;
+	}
+}
+
 .apCompare {
 	display: grid;
 	grid-template-columns: 1fr max-content max-content max-content 1fr;
@@ -114,7 +124,7 @@
 	white-space: nowrap;
 }

-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.weaponInfoBadgeText {
 		max-width: initial;
 	}
@@ -245,16 +255,6 @@
 	align-items: center;
 }

-@media screen and (max-width: 640px) {
-	.container {
-		grid-template-columns: 1fr;
-	}
-
-	.leftColumn {
-		position: initial;
-	}
-}
-
 .statPopover {
 	min-width: 360px;

--- a/app/features/builds/components/FilterSection.module.css
+++ b/app/features/builds/components/FilterSection.module.css
@@ -9,6 +9,7 @@

 .filterMode {
 	gap: var(--s-6);
+	flex-wrap: wrap;
 }

 .filterDate {
@@ -16,7 +17,7 @@
 	align-items: center;
 }

-@media screen and (min-width: 750px) {
+@container (width >= 560px) {
 	.filter {
 		flex-direction: row;
 	}
--- a/app/features/builds/routes/builds.$slug.module.css
+++ b/app/features/builds/routes/builds.$slug.module.css
@@ -17,7 +17,7 @@
 	gap: var(--s-2);
 }

-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.buildsButtonsLink {
 		flex-direction: row;
 	}
--- a/app/features/calendar/routes/calendar.module.css
+++ b/app/features/calendar/routes/calendar.module.css
@@ -30,7 +30,7 @@
 	outline: var(--focus-ring);
 }

-@media screen and (min-width: 600px) {
+@container (width >= 640px) {
 	.navigateButton {
 		flex: initial;
 	}
--- a/app/features/comp-analyzer/components/DamageComboBar.module.css
+++ b/app/features/comp-analyzer/components/DamageComboBar.module.css
@@ -232,7 +232,7 @@
 	margin-bottom: var(--s-1);
 }

-@media (max-width: 640px) {
+@container (width < 640px) {
 	.slidersContainer {
 		grid-template-columns: auto 1fr auto;
 	}
--- a/app/features/comp-analyzer/components/WeaponGrid.module.css
+++ b/app/features/comp-analyzer/components/WeaponGrid.module.css
@@ -35,13 +35,13 @@
 	gap: var(--s-4);
 }

-@media (max-width: 900px) {
+@container (width < 640px) {
 	.weaponGrid {
 		grid-template-columns: repeat(2, 1fr);
 	}
 }

-@media (max-width: 600px) {
+@container (width < 560px) {
 	.weaponGrid {
 		grid-template-columns: 1fr;
 	}
--- a/app/features/lfg/components/LFGPost.module.css
+++ b/app/features/lfg/components/LFGPost.module.css
@@ -12,7 +12,7 @@
 	flex-direction: column;
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.wideLayout {
 		grid-template-columns: 1fr 2fr;
 		row-gap: 0;
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
@@ -29,12 +29,6 @@
 	width: 100%;
 }

-@media screen and (min-width: 431px) {
-	.grid {
-		max-height: 70vh;
-	}
-}
-
 .hp {
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
--- a/app/features/scrims/routes/scrims.$id.module.css
+++ b/app/features/scrims/routes/scrims.$id.module.css
@@ -4,7 +4,7 @@
 	gap: var(--s-8);
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.groupsContainer {
 		grid-template-columns: 1fr 1fr;
 	}
--- a/app/features/sendouq-match/routes/q.match.$id.module.css
+++ b/app/features/sendouq-match/routes/q.match.$id.module.css
@@ -109,7 +109,7 @@
 	outline: none !important;
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.teamsContainer {
 		grid-template-columns: 1fr 1fr;
 	}
--- a/app/features/team/team.module.css
+++ b/app/features/team/team.module.css
@@ -262,7 +262,7 @@
 	margin-block: var(--s-6);
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.bannerFlags {
 		display: flex;
 	}
--- a/app/features/tournament-bracket/components/MatchTimer.module.css
+++ b/app/features/tournament-bracket/components/MatchTimer.module.css
@@ -2,7 +2,7 @@
 	position: relative;
 	width: 100%;
 	height: 18px;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg);
 }

 .progressBar {
@@ -10,7 +10,7 @@
 	left: 0;
 	top: 0;
 	height: 100%;
-	background-color: var(--color-accent);
+	background-color: var(--color-text-accent);
 	transition:
 		width 0.5s ease-in-out,
 		background-color 0.3s ease;
@@ -55,6 +55,7 @@
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-semi);
 	white-space: nowrap;
+	text-shadow: 0 0 3px black;
 }

 .gameMarkerHidden .gameMarkerText {
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -146,7 +146,7 @@
 	display: none;
 }

-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.stageBannerTopBar {
 		font-size: initial;
 	}
@@ -167,11 +167,11 @@

 .noScreen > svg {
 	width: 24px;
-	fill: var(--color-success);
+	color: var(--color-success);
 }

 .noScreenBanned > svg {
-	fill: var(--color-error);
+	color: var(--color-error);
 }

 .duringMatchActions {
@@ -363,7 +363,7 @@
 	text-decoration: line-through;
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.rosters {
 		justify-content: space-evenly;
 		flex-direction: row;
@@ -447,7 +447,7 @@
 	font-size: var(--font-sm);
 }

-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.infos {
 		flex-direction: row;
 	}
--- a/app/features/tournament-organization/tournament-organization.module.css
+++ b/app/features/tournament-organization/tournament-organization.module.css
@@ -109,7 +109,7 @@
 	align-items: center;
 }

-@media screen and (min-width: 768px) {
+@container (width >= 720px) {
 	.eventsContainer {
 		flex-direction: row;
 		gap: var(--s-8);
--- a/app/features/tournament-subs/routes/to.$id.subs.module.css
+++ b/app/features/tournament-subs/routes/to.$id.subs.module.css
@@ -94,7 +94,7 @@
 	height: 18px;
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.section {
 		grid-template-columns: max-content 1fr max-content max-content;
 		grid-template-areas:
--- a/app/features/tournament/routes/to.$id.seeds.module.css
+++ b/app/features/tournament/routes/to.$id.seeds.module.css
@@ -60,7 +60,7 @@
 	grid-area: players;
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.headerRow {
 		display: grid;
 	}
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -316,7 +316,7 @@
 	font-size: var(--font-sm);
 }

-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.section {
 		margin: 0;
 		border-radius: var(--radius-box);
@@ -353,7 +353,7 @@
 	text-align: center;
 }

-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.teamSetTopContainer {
 		flex-direction: row;
 		align-items: flex-end;
@@ -381,7 +381,7 @@
 }

 .teamSetModeLoss {
-	border-color: var(--color-bg-higher);
+	border-color: var(--color-error);
 }

 .teamSetStageContainer {
--- a/app/features/user-page/components/UserPageIconNav.module.css
+++ b/app/features/user-page/components/UserPageIconNav.module.css
@@ -38,7 +38,7 @@
 	background-color: var(--color-bg-higher);
 }

-@media screen and (min-width: 768px) {
+@container (width >= 720px) {
 	.iconNav {
 		display: grid;
 		grid-template-columns: repeat(4, 42px);
--- a/app/features/user-page/components/Widget.tsx
+++ b/app/features/user-page/components/Widget.tsx
@@ -595,7 +595,7 @@ function Builds({
 	builds: Extract<LoadedWidget, { id: "builds" }>["data"];
 }) {
 	return (
-		<div className={styles.builds}>
+		<div className={clsx(styles.builds, "scrollbar")}>
 			{builds.map((build) => (
 				<BuildCard key={build.id} build={build} canEdit={false} />
 			))}
--- a/app/features/user-page/routes/u.$identifier.edit.tsx
+++ b/app/features/user-page/routes/u.$identifier.edit.tsx
@@ -71,6 +71,7 @@ export default function UserEditPage() {
 				{({ FormField }) => (
 					<>
 						<SendouDialog
+							isDismissable
 							heading={t("common:fc.title")}
 							trigger={
 								<SendouButton variant="outlined">
--- a/app/features/user-page/routes/u.$identifier.index.tsx
+++ b/app/features/user-page/routes/u.$identifier.index.tsx
@@ -138,7 +138,7 @@ function NewUserInfoPage() {
 				<UserPageIconNav items={navItems} />
 			</div>

-			<div className={newStyles.sideCarousel}>
+			<div className={clsx(newStyles.sideCarousel, "scrollbar")}>
 				{sideWidgets.map((widget) => (
 					<Widget key={widget.id} widget={widget} user={layoutData.user} />
 				))}
--- a/app/features/user-page/routes/u.$identifier.module.css
+++ b/app/features/user-page/routes/u.$identifier.module.css
@@ -61,7 +61,6 @@
 	overflow-x: auto;
 	gap: var(--s-4);
 	padding-block: var(--s-2);
-	scrollbar-width: thin;
 	scroll-snap-type: x mandatory;
 }

@@ -80,7 +79,7 @@
 	display: none;
 }

-@media screen and (min-width: 768px) {
+@container (width >= 720px) {
 	.header {
 		flex-direction: row;
 		flex-wrap: wrap;
--- a/app/features/user-page/user-page.module.css
+++ b/app/features/user-page/user-page.module.css
@@ -177,7 +177,7 @@
 	gap: var(--s-1-5);
 }

-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.placements {
 		gap: var(--s-10);
 	}