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,23 @@
 :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%;
 }
-
+#root {
+	overflow: auto;
+}
+.App {
+	min-height: 100%;
+}
 html,
 body {
-	background-color: #2c2f33;
+	background-color: var(--theme-color);
 	margin: 0;
 	padding: 0;
 	font-size: 14px;
@@ -38,44 +43,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/App.tsx

@@ -11,7 +11,17 @@ import './App.css';
 function App() {
 	// Load locations
 	const [locations, setLocations] = useState([]);
-
+	const [scrollFromTop, setScrolledFromTop] = useState(0);
+	const scrollListener = (event: Event) => {
+		setScrolledFromTop((event.target as HTMLElement).scrollTop);
+	};
+	useEffect(() => {
+		const rootDiv = document.getElementById('root');
+		if (!rootDiv)
+			throw Error('Missing root div! (Why did you rename it lol)');
+		rootDiv.addEventListener('scroll', scrollListener);
+		return () => rootDiv.removeEventListener('scroll', scrollListener);
+	});
 	useEffect(() => {
 		queryLocations().then((parsedLocations: $TSFixMe) => {
 			if (parsedLocations != null) {
@@ -42,7 +52,12 @@ function App() {
 						<Routes>
 							<Route
 								path="/"
-								element={<ListPage locations={locations} />}
+								element={
+									<ListPage
+										locations={locations}
+										scrollFromTop={scrollFromTop}
+									/>
+								}
 							/>
 							<Route
 								path="/map"

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,43 @@
 }
 
 .Locations-header {
-	display: grid;
-	grid-gap: 1rem;
-	padding: 3rem 0;
-}
+	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);
 
-@media screen and (min-width: 900px) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1.5rem;
+	padding: 2.5rem 0 1.5rem;
+	place-content: space-between;
+	align-items: end;
+	box-shadow: 0 8px 5px -5px rgb(0 0 0 / 0.4);
+}
+@media (max-width: 900px) {
+	.Locations-container {
+		margin: 1.3rem;
+	}
 	.Locations-header {
-		grid-template-columns: 1fr 300px;
-		align-items: center;
+		padding: 1rem 0 1.5rem;
+	}
+}
+@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 +79,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

@@ -40,7 +40,7 @@ const StyledAlert = styled(Alert)({
 	color: '#ffffff',
 });
 
-function ListPage({ locations }: $TSFixMe) {
+function ListPage({ locations, scrollFromTop }: $TSFixMe) {
 	const greeting = useMemo(() => getGreeting(), []);
 
 	// Search query processing
@@ -117,7 +117,6 @@ function ListPage({ locations }: $TSFixMe) {
 			window.removeEventListener('offline', handleOnlineStatus);
 		};
 	}, []);
-
 	return (
 		<div className="ListPage">
 			{/*  showAlert &&
@@ -136,9 +135,14 @@ function ListPage({ locations }: $TSFixMe) {
 					offline. We apologize for any inconvenience. 🌐🚫
 				</StyledAlert>
 			)}
-			<div className="Container">
-				<header className="Locations-header">
-					<HeaderText variant="h3">{greeting}</HeaderText>
+			<div className="Locations-container">
+				<header
+					className="Locations-header"
+					style={{ boxShadow: scrollFromTop <= 40 ? 'none' : '' }}
+				>
+					<HeaderText variant="h3" className="Locations-Greeting">
+						{greeting}
+					</HeaderText>
 					<input
 						className="Locations-search"
 						type="search"
@@ -152,7 +156,12 @@ function ListPage({ locations }: $TSFixMe) {
 					<NoResultsError onClear={() => setSearchQuery('')} />
 				)}
 
-				<Grid container spacing={2}>
+				<Grid
+					container
+					spacing={2}
+					columns={{ xs: 1, sm: 2, md: 3, lg: 4 }}
+					marginTop={2}
+				>
 					{openLocations
 						.sort(
 							(location1: Location, location2: Location) =>