Sheraff · Sheraff · Feb 9, 2024 · Feb 9, 2024 · Feb 9, 2024 · Feb 9, 2024
diff --git a/client/index.html b/client/index.html
@@ -6,13 +6,69 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="manifest" href="/site.webmanifest" />
 		<meta name="theme-color" content="#300a38" />
-		<title>Vite + React + TS</title>
+		<title>Vite + React + TS + Vlcn</title>
 	</head>
 	<style>
+		/* CSS reset */
+
+		*,
+		*::before,
+		*::after {
+			box-sizing: border-box;
+		}
+
+		* {
+			margin: 0;
+			min-width: 0;
+		}
+
+		img,
+		picture,
+		video,
+		canvas,
+		svg {
+			display: block;
+			max-width: 100%;
+		}
+
+		p,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			overflow-wrap: break-word;
+		}
+
+		pre {
+			white-space: pre-wrap;
+		}
+
+		input,
+		button,
+		textarea,
+		select {
+			font: inherit;
+		}
+
+		:any-link,
+		button {
+			cursor: pointer;
+		}
+
 		:root {
-			color: rgb(212, 205, 205);
-			background-color: rgb(2, 24, 13);
+			-webkit-tap-highlight-color: transparent;
+			-webkit-font-smoothing: antialiased;
+		}
+
+		#root {
+			isolation: isolate;
+			font-family: system-ui, sans-serif;
 		}
+
+		/* offline fallback */
+
 		#root:not(:empty) + #offline {
 			display: none;
 		}
@@ -24,6 +80,13 @@
 				opacity: 0;
 			}
 		}
+
+		/* global styles */
+
+		body {
+			color: rgb(212, 205, 205);
+			background-color: rgb(2, 24, 13);
+		}
 	</style>
 	<body>
 		<div id="root"></div>

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -5,14 +5,15 @@ import { ApiDemo } from "client/components/ApiDemo"
 import { UserAccountDemo } from "client/components/UserAccountDemo"
 import { WorkerDemo } from "client/components/WorkerDemo"
 import { DbDemo } from "client/components/DbDemo"
+import { Divider } from "client/components/Divider/Divider"
 
 fooBar()
 
 export default function App() {
 	return (
 		<div>
 			<h1>Welcome to our Fullstack TypeScript Project!</h1>
-			<hr />
+			<Divider />
 			<Grid>
 				<Cell>
 					<ServiceWorkerDemo />
@@ -26,7 +27,7 @@ export default function App() {
 				<Cell>
 					<WorkerDemo />
 				</Cell>
-				<Cell y={2} x={2}>
+				<Cell row>
 					<DbDemo />
 				</Cell>
 			</Grid>

diff --git a/client/src/components/Bento/GridCell.module.css b/client/src/components/Bento/GridCell.module.css
@@ -1,8 +1,9 @@
 .grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
 	grid-gap: 20px;
 	grid-auto-flow: dense;
+	min-width: 50dvw;
 	max-width: 750px;
 	margin: auto;
 }
@@ -16,4 +17,11 @@
 	overflow: hidden;
 	border: 1px solid #ad0489;
 	padding: 10px;
+	& > * {
+		max-width: 100%;
+	}
+}
+
+.row {
+	grid-column: 1 / -1;
 }
diff --git a/client/src/components/Bento/GridCell.tsx b/client/src/components/Bento/GridCell.tsx
@@ -1,14 +1,25 @@
 import type { CSSProperties, ReactNode } from "react"
 import classes from "./GridCell.module.css"
+import clsx from "clsx"
 
 export function Grid({ children }: { children: ReactNode }) {
 	return <div className={classes.grid}>{children}</div>
 }
 
-export function Cell({ children, x = 1, y = 1 }: { children: ReactNode; x?: number; y?: number }) {
+export function Cell({
+	children,
+	x = 1,
+	y = 1,
+	row,
+}: {
+	children: ReactNode
+	x?: number
+	y?: number
+	row?: boolean
+}) {
 	return (
 		<div
-			className={classes.cell}
+			className={clsx(classes.cell, row && classes.row)}
 			style={
 				{
 					"--x": x,

diff --git a/client/src/components/Divider/Divider.module.css b/client/src/components/Divider/Divider.module.css
@@ -0,0 +1,6 @@
+.divider {
+	border: none;
+	height: 1px;
+	background-color: currentColor;
+	margin: 1em 0;
+}
diff --git a/client/src/components/Divider/Divider.tsx b/client/src/components/Divider/Divider.tsx
@@ -0,0 +1,5 @@
+import classes from "./Divider.module.css"
+
+export function Divider() {
+	return <hr className={classes.divider} />
+}
diff --git a/client/src/components/UserAccountDemo.tsx b/client/src/components/UserAccountDemo.tsx
@@ -1,6 +1,7 @@
 import type { Provider } from "client/auth/providers"
 import { useAuthContext } from "client/auth/useAuthContext"
 import { Button } from "client/components/Button/Button"
+import { Divider } from "client/components/Divider/Divider"
 
 export function UserAccountDemo() {
 	const auth = useAuthContext()
@@ -58,7 +59,7 @@ function CreateAccount({
 					{provider.name}
 				</Button>
 			))}
-			<hr />
+			<Divider />
 			<Button onClick={cancelCreateAccount}>Cancel</Button>
 		</>
 	)
@@ -76,7 +77,7 @@ function NotLoggedIn({
 	return (
 		<>
 			<div>Not logged in</div>
-			<hr />
+			<Divider />
 			<div>Sign up with invite code</div>
 			<form
 				onSubmit={(event) => {
@@ -88,7 +89,7 @@ function NotLoggedIn({
 				<input type="text" name="code" required minLength={17} maxLength={17} />
 				<Button type="submit">Submit</Button>
 			</form>
-			<hr />
+			<Divider />
 			<div>Sign in</div>
 			{providers.map((provider) => (
 				<Button
@@ -118,9 +119,9 @@ function LoggedIn({
 	return (
 		<>
 			<div>Logged in as {userId}</div>
-			<hr />
+			<Divider />
 			<Button onClick={() => void signOut()}>Logout</Button>
-			<hr />
+			<Divider />
 			<div>
 				<p>Link accounts</p>
 				{providers.map((provider) => (

diff --git a/client/src/components/WorkerDemo.tsx b/client/src/components/WorkerDemo.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
 import type { Incoming, Outgoing } from "client/worker/sum.worker"
 import Worker from "client/worker/sum.worker?worker"
+import { Divider } from "client/components/Divider/Divider"
 
 export function WorkerDemo() {
 	const [a, setA] = useState(0)
@@ -58,7 +59,7 @@ export function WorkerDemo() {
 				pattern="[0-9]*"
 				step="1"
 			/>
-			<hr />
+			<Divider />
 			<output>{result}</output>
 		</>
 	)

diff --git a/client/src/db/DbTest.tsx b/client/src/db/DbTest.tsx
@@ -6,6 +6,7 @@ import { useDbQuery } from "client/db/useDbQuery"
 import { useDbMutation } from "client/db/useDbMutation"
 import { Button } from "client/components/Button/Button"
 import { useDb } from "client/db/DbProvider"
+import { Divider } from "client/components/Divider/Divider"
 
 function Test({ name }: { name: string }) {
 	const other = useDbQuery<{ id: string; content: string; position: number }>({
@@ -109,7 +110,7 @@ export function Content({ name }: { name: string }) {
 				Toggle 2 {String(!toggle2)}
 			</Button>
 			{toggle2 && <Test2 name={name} />}
-			<hr />
+			<Divider />
 			<form
 				onSubmit={(event) => {
 					event.preventDefault()
@@ -126,7 +127,7 @@ export function Content({ name }: { name: string }) {
 					<Button>Add to list</Button>
 				</div>
 			</form>
-			<hr />
+			<Divider />
 			{sync && (
 				<>
 					<Button onClick={() => void sync.roundTrip()}>Sync</Button>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "repo",
-	"version": "0.0.0-alpha.4",
+	"version": "0.0.0-alpha.5",
 	"license": "MIT",
 	"private": true,
 	"scripts": {