Css improvements 2

public/manifest.json

@@ -30,6 +30,6 @@
   "scope": "/",
   "start_url": "/",
   "display": "standalone",
-  "theme_color": "ffffff",
+  "theme_color": "#ffffff",
   "background_color": "#ffffff"
 }

src/App.css

@@ -1,18 +1,20 @@
 :root {
 	--navbar-height: 70px;
 	--navbar-height: calc(56px + max(env(safe-area-inset-bottom), 14px));
+	--theme-color: #2c2f33;
 }
 
 html,
 body,
-#root,
-.App {
+#root {
 	height: 100%;
 }
-
+.App {
+	min-height: 100%;
+}
 html,
 body {
-	background-color: #2c2f33;
+	background-color: var(--theme-color);
 	margin: 0;
 	padding: 0;
 	font-size: 14px;
@@ -38,44 +40,8 @@ body {
 .App {
 	text-align: left;
 	background-color: #2c2f33;
-	display: flex;
-	flex-direction: column;
-}
-
-.App-logo {
-	height: 40vmin;
-	pointer-events: none;
-}
-
-.MainContent {
-	overflow: auto;
-	flex: 1;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-	.App-logo {
-		animation: App-logo-spin infinite 20s linear;
-	}
-}
-
-.App-header {
-	background-color: #282c34;
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	font-size: calc(10px + 2vmin);
-	color: white;
-}
-
-.App-link {
-	color: #61dafb;
-}
-
-.Container {
-	padding: 1.5rem 3rem 0;
-	flex-grow: 1;
+	display: grid;
+	grid-template-rows: 1fr auto;
 }
 
 .footer {

src/components/EateryCard.tsx

@@ -152,7 +152,7 @@ function EateryCard({ location }: { location: Location }) {
 
 	return (
 		<>
-			<Grid item xs={12} md={4} lg={3} xl={3}>
+			<Grid item xs={1}>
 				<StyledCard>
 					<StyledCardHeader
 						title={

src/components/Navbar.css

@@ -4,6 +4,8 @@
 	padding: 14px;
 	box-sizing: border-box;
 	border-top: 2px solid #31373e;
+	position: sticky;
+	bottom: 0;
 }
 
 .Navbar-links {

src/pages/ListPage.css

@@ -1,8 +1,17 @@
 .ListPage {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-rows: 1fr auto;
 	min-height: 100%; /* So footer (the contact info one) actually stays at the bottom */
 }
+.Locations-container {
+	margin: 2.5rem 5rem 0;
+	max-width: 1600px;
+	justify-self: center;
+	/* Questionable support? Let me know if this is not optimal*/
+	width: -moz-available;
+	width: -webkit-fill-available;
+	width: fill-available;
+}
 
 .badge-accent {
 	color: #105c03;
@@ -12,21 +21,42 @@
 }
 
 .Locations-header {
-	display: grid;
-	grid-gap: 1rem;
+	isolation: isolate; /* Not necessary, but good practice
+	 											 to show that we've created a new stacking context*/
+	z-index: 1;
+	position: sticky;
+	top: 0;
+	background-color: var(--theme-color);
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2rem;
 	padding: 3rem 0;
+	place-content: space-between;
+	align-items: end;
 }
-
-@media screen and (min-width: 900px) {
+@media (max-width: 900px) {
+	.Locations-container {
+		margin: 1.3rem;
+	}
 	.Locations-header {
-		grid-template-columns: 1fr 300px;
-		align-items: center;
+		padding: 1rem 0 2rem;
+	}
+}
+@media (max-width: 800px) {
+	.Locations-container {
+		margin: 1rem;
 	}
 }
+.Locations-Greeting {
+	/* This feels a bit hacky but the flex-grow of 999
+	prevents the search bar from growing too much when the screen gets wide*/
+	flex: 999 1 max-content;
+	overflow-wrap: break-word;
+	min-width: 0; /* So it keeps shrinking when the screen gets narrow */
+}
 
 .Locations-search {
-	display: block;
-	width: 100%;
 	padding: 0.8rem 1rem;
 	padding-left: 3rem;
 	border-radius: 1rem;
@@ -48,6 +78,9 @@
 
 	color: white;
 	font-weight: 500;
+
+	flex: 1 300px;
+	min-width: 0; /* So it keeps shrinking when the screen gets narrow */
 }
 
 .Locations-search::-webkit-search-decoration {

src/pages/ListPage.tsx

@@ -136,9 +136,11 @@ function ListPage({ locations }: $TSFixMe) {
 					offline. We apologize for any inconvenience. 🌐🚫
 				</StyledAlert>
 			)}
-			<div className="Container">
+			<div className="Locations-container">
 				<header className="Locations-header">
-					<HeaderText variant="h3">{greeting}</HeaderText>
+					<HeaderText variant="h3" className="Locations-Greeting">
+						{greeting}
+					</HeaderText>
 					<input
 						className="Locations-search"
 						type="search"
@@ -152,7 +154,11 @@ function ListPage({ locations }: $TSFixMe) {
 					<NoResultsError onClear={() => setSearchQuery('')} />
 				)}
 
-				<Grid container spacing={2}>
+				<Grid
+					container
+					spacing={3}
+					columns={{ xs: 1, sm: 2, md: 3, lg: 4 }}
+				>
 					{openLocations
 						.sort(
 							(location1: Location, location2: Location) =>