From c38d9cb57e407bccb9314382d58d923a4a9ebfd0 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Sat, 27 Jun 2026 18:36:43 +0000
Subject: [PATCH] Improve styling

---
 client/src/Navigation.tsx        | 2 +-
 client/src/TopAppBar.tsx         | 2 +-
 client/src/index.css             | 5 ++++-
 client/src/routes/_app/route.tsx | 4 ++--
 client/src/routes/sign-in.tsx    | 2 +-
 client/src/routes/sign-up.tsx    | 4 ++--
 6 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/client/src/Navigation.tsx b/client/src/Navigation.tsx
index fbc820d..c703200 100644
--- a/client/src/Navigation.tsx
+++ b/client/src/Navigation.tsx
@@ -6,7 +6,7 @@ import Icon from "./Icon";
 export default function Navigation(properties: VoidProps<JSX.HTMLAttributes<HTMLElement>>) {
   return (
     <nav {...properties}>
-      <menu class="bg-surface-container text-on-surface-variant grid grid-cols-3 text-xs leading-4 font-medium">
+      <menu class="bg-surface-container text-on-surface-variant grid grid-cols-3 pt-36 text-xs leading-4 font-medium lg:flex lg:h-full lg:min-w-24 lg:flex-col">
         <li>
           <Link to="/times" class="group block cursor-default py-1.5 text-center">
             <div class="group-[.active]:bg-secondary-container group-[.active]:fill-on-secondary-container fill-on-surface-variant group-[.active]:text-secondary hover:bg-on-secondary-container/8 mx-auto max-w-min rounded-2xl px-4 py-1">
diff --git a/client/src/TopAppBar.tsx b/client/src/TopAppBar.tsx
index 2aa75e4..882e831 100644
--- a/client/src/TopAppBar.tsx
+++ b/client/src/TopAppBar.tsx
@@ -39,7 +39,7 @@ export type TopAppBarProperties = {
 
 export function TopAppBar(properties: VoidProps<TopAppBarProperties>) {
   return (
-    <header class="grid grid-cols-[3rem_1fr_3rem] gap-1 px-1 py-2">
+    <header class="grid grid-cols-[3rem_1fr_3rem] gap-1 px-1 py-2 lg:col-start-2">
       {properties.leadingAction}
       <h1 class="text-title-lg text-on-surface col-start-2 content-center text-center">
         {properties.title}
diff --git a/client/src/index.css b/client/src/index.css
index 5afdf0c..ed5ed49 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -9,7 +9,10 @@
   color-scheme: light dark;
 }
 
-/* Not using TSX components as these are supposed to be simple headless components and class merging requires JS to run while this can be done off-thread in CSS */
+/*
+Not using TSX components as these are supposed to be simple headless components and class merging requires JS to run
+when we have perfectly fine CSS solutions to deal with the same problem.
+*/
 @layer components {
   /* @apply in components is afaik not best practice but the only way to get color variables from plugins as Tailwind CSS v4 does not create variables for those and has the same behavior as in v3 */
   .text-field {
diff --git a/client/src/routes/_app/route.tsx b/client/src/routes/_app/route.tsx
index 0d1f2d8..6f42eed 100644
--- a/client/src/routes/_app/route.tsx
+++ b/client/src/routes/_app/route.tsx
@@ -33,8 +33,8 @@ function RouteComponent() {
   const title = useTitle();
 
   return (
-    <Body class="relative grid h-dvh grid-rows-[auto_1fr_auto]">
-      <Navigation class="row-start-3" />
+    <Body class="relative grid h-dvh grid-cols-1 grid-rows-[auto_1fr_auto] lg:grid-cols-[auto_1fr] lg:grid-rows-[auto_1fr]">
+      <Navigation class="row-start-3 lg:row-span-full" />
       <TopAppBar
         title={title()}
         trailingAction={
diff --git a/client/src/routes/sign-in.tsx b/client/src/routes/sign-in.tsx
index c8e956f..5dbd116 100644
--- a/client/src/routes/sign-in.tsx
+++ b/client/src/routes/sign-in.tsx
@@ -83,7 +83,7 @@ function SignIn() {
   }
 
   return (
-    <Body class="h-dvh p-6">
+    <Body class="mx-auto h-dvh max-w-2xl p-6">
       <main class="grid h-full items-end">
         <h1 class="text-primary text-display-lg text-center font-serif">Welcome</h1>
         <form onSubmit={handleSubmit} class="rounded-3xl text-base leading-6">
diff --git a/client/src/routes/sign-up.tsx b/client/src/routes/sign-up.tsx
index 885b418..7f9090f 100644
--- a/client/src/routes/sign-up.tsx
+++ b/client/src/routes/sign-up.tsx
@@ -3,7 +3,7 @@ import { createFileRoute, Link, redirect, useNavigate } from "@tanstack/solid-ro
 import { createSignal } from "solid-js";
 
 import Body from "../Body";
-import { idQuery, UnauthenticatedError, UserId } from "../user";
+import { idQuery, UnauthenticatedError, type UserId } from "../user";
 
 export const Route = createFileRoute("/sign-up")({
   component: RouteComponent,
@@ -77,7 +77,7 @@ function RouteComponent() {
   }
 
   return (
-    <Body class="h-dvh p-6">
+    <Body class="mx-auto h-dvh max-w-2xl p-6">
       <main class="grid h-full items-end">
         <h1 class="text-primary text-display-lg text-center font-serif">Create an account</h1>
         <form onSubmit={handleSubmit} class="rounded-3xl text-base leading-6">
-- 
2.51.2

