From 220e428f5b51c114667ff09e56d27b9f43fc039e Mon Sep 17 00:00:00 2001
From: Justin Visser <justinfvisser@gmail.com>
Date: Tue, 3 Mar 2026 18:37:35 +0100
Subject: [PATCH] styling fixes

---
 frontend/src/components/layout/AppShell.vue | 8 ++++----
 frontend/src/components/layout/Sidebar.vue  | 2 +-
 frontend/src/style.css                      | 5 +++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/layout/AppShell.vue b/frontend/src/components/layout/AppShell.vue
index d928ed8..ffe5520 100644
--- a/frontend/src/components/layout/AppShell.vue
+++ b/frontend/src/components/layout/AppShell.vue
@@ -84,7 +84,7 @@ onMounted(async () => {
 <template>
   <div class="flex h-screen flex-col overflow-hidden bg-white dark:bg-gray-900">
     <!-- Full-width yellow header -->
-    <header class="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-primary-400 bg-primary-300 px-4">
+    <header class="sticky top-0 z-30 flex h-16 shrink-0 items-center gap-3 border-b border-primary-400 bg-primary-300 px-4">
       <!-- Hamburger (mobile only) -->
       <button
         class="shrink-0 rounded p-1.5 text-gray-700 transition-colors hover:bg-primary-400 md:hidden"
@@ -97,7 +97,7 @@ onMounted(async () => {
       </button>
 
       <!-- Logo -->
-      <img :src="logoUrl" alt="Logo" class="h-8 w-auto shrink-0" />
+      <img :src="logoUrl" alt="Logo" class="h-10 w-auto shrink-0" />
 
       <!-- Site title -->
       <form v-if="editingSiteTitle" @submit.prevent="saveSiteTitle">
@@ -117,7 +117,7 @@ onMounted(async () => {
         :title="isAdmin ? 'Click to rename' : undefined"
         @click="startEditTitle"
       >
-        <span class="truncate text-base font-bold text-gray-900">{{ siteTitle }}</span>
+        <span class="truncate text-lg font-bold text-gray-900">{{ siteTitle }}</span>
         <svg
           v-if="isAdmin"
           class="h-3 w-3 shrink-0 text-gray-600 opacity-0 transition-opacity group-hover:opacity-100"
@@ -156,7 +156,7 @@ onMounted(async () => {
 
       <!-- Scrollable content -->
       <main ref="mainEl" class="flex-1 overflow-y-auto" @scroll="handleScroll">
-        <div class="mx-auto max-w-4xl px-6 py-10">
+        <div class="mx-auto max-w-5xl px-6 py-10">
           <slot />
         </div>
       </main>
diff --git a/frontend/src/components/layout/Sidebar.vue b/frontend/src/components/layout/Sidebar.vue
index 85e3058..6b3f83f 100644
--- a/frontend/src/components/layout/Sidebar.vue
+++ b/frontend/src/components/layout/Sidebar.vue
@@ -107,7 +107,7 @@ async function handleLogin() {
 </script>
 
 <template>
-  <nav class="flex h-full w-60 flex-col border-r border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700">
+  <nav class="flex h-full w-52 flex-col border-r border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700">
     <!-- Pages list (scrollable) -->
     <div class="flex-1 overflow-y-auto py-2">
       <!-- Pinned Home page (always at top, no actions) -->
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4dd8e00..d02f495 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,6 +1,11 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* Fluid base font: 15px on small screens, scales to 18px at ~1800px wide */
+:root {
+  font-size: clamp(15px, 1vw, 18px);
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {