From 1a6b82b583c660e0d9097396fe488bda5005ecab Mon Sep 17 00:00:00 2001
From: Niek Rabelink <niek.rabelink@gmail.com>
Date: Wed, 9 Sep 2026 21:42:34 +0200
Subject: [PATCH] Allow board to always use full screen width and hide header
 on maximize

---
 board.php | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/board.php b/board.php
index 94a702d..878618e 100644
--- a/board.php
+++ b/board.php
@@ -13,24 +13,22 @@ $isAdmin = ($userRole === 'ADMIN');
 ?>
 
 <style>
-/* Soepele overgang tussen standaard en volledige vensterbreedte */
+/* Volledige breedte benutting en soepele schermmaximalisatie */
 #boardMainWrapper {
-    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    width: 100% !important;
+    max-width: 100% !important;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 #boardMainWrapper.is-maximized {
-    max-width: 100% !important;
-    width: 100% !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
 }
-#boardMainWrapper.is-maximized #boardLanesContainer {
+#boardMainWrapper #boardLanesContainer {
     width: 100% !important;
 }
 </style>
 
-<div id="boardMainWrapper" class="space-y-4 max-w-[1600px] mx-auto px-2 sm:px-4 w-full">
+<div id="boardMainWrapper" class="space-y-4 w-full max-w-none">
     
     <!-- Bovenbalk: Bord Titel, Filters & Actieknoppen -->
     <div class="fociz-card p-4 sm:p-5">
@@ -1224,10 +1222,11 @@ function applyMaximizeState(isMax) {
         if (mainContainer) {
             mainContainer.style.maxWidth = '100vw';
             mainContainer.style.width = '100%';
-            mainContainer.style.paddingLeft = '0.75rem';
-            mainContainer.style.paddingRight = '0.75rem';
+            mainContainer.style.paddingLeft = '0.5rem';
+            mainContainer.style.paddingRight = '0.5rem';
         }
-        btn.setAttribute('title', 'Bord verkleinen naar standaard breedte');
+        document.querySelector('header')?.classList.add('hidden');
+        btn.setAttribute('title', 'Bord verkleinen / navigatie tonen (Escape)');
         if (icon) {
             icon.setAttribute('data-lucide', 'minimize-2');
         }
@@ -1239,7 +1238,8 @@ function applyMaximizeState(isMax) {
             mainContainer.style.paddingLeft = '';
             mainContainer.style.paddingRight = '';
         }
-        btn.setAttribute('title', 'Bord maximaliseren naar volledige schermbreedte');
+        document.querySelector('header')?.classList.remove('hidden');
+        btn.setAttribute('title', 'Bord maximaliseren (volledig venster)');
         if (icon) {
             icon.setAttribute('data-lucide', 'maximize-2');
         }