From 601dabb5344029a0fdb1e5114e8a61c4f444f1a5 Mon Sep 17 00:00:00 2001
From: Justin Visser <justinfvisser@gmail.com>
Date: Thu, 26 Mar 2026 13:20:46 +0100
Subject: [PATCH] sidebar improvements

---
 frontend/src/components/layout/Sidebar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.vue b/frontend/src/components/layout/Sidebar.vue
index a82fa54..8960a07 100644
--- a/frontend/src/components/layout/Sidebar.vue
+++ b/frontend/src/components/layout/Sidebar.vue
@@ -108,7 +108,7 @@ async function handleLogin() {
 </script>
 
 <template>
-  <nav class="flex h-full w-52 flex-col border-r border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700">
+  <nav class="flex h-full w-72 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) -->
@@ -125,7 +125,7 @@ async function handleLogin() {
             @click="$emit('close')"
           >
             <span v-if="isAdmin" class="w-3.5 shrink-0" />
-            <span class="flex-1 truncate">{{ pages.find(p => p.slug === 'home')?.name }}</span>
+            <span class="flex-1 line-clamp-2">{{ pages.find(p => p.slug === 'home')?.name }}</span>
           </router-link>
         </div>
       </template>
@@ -174,7 +174,7 @@ async function handleLogin() {
                   <circle cx="9" cy="18" r="1.5" /><circle cx="15" cy="18" r="1.5" />
                 </svg>
               </span>
-              <span class="flex-1 truncate">{{ page.name }}</span>
+              <span class="flex-1 line-clamp-2">{{ page.name }}</span>
               <span class="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100">
                 <!-- Hide/show toggle -->
                 <button
@@ -231,7 +231,7 @@ async function handleLogin() {
           @click="$emit('close')"
         >
           <span class="w-3.5 shrink-0" />
-          <span class="flex-1 truncate">{{ page.name }}</span>
+          <span class="flex-1 line-clamp-2">{{ page.name }}</span>
           <span class="flex shrink-0 items-center opacity-0 group-hover:opacity-100">
             <button
               class="rounded p-0.5 transition-colors"