From 3ddcf1d2382dfce36a8328339ba9cdbce272ae1b Mon Sep 17 00:00:00 2001
From: Niek Rabelink <niek.rabelink@gmail.com>
Date: Mon, 2 Nov 2026 12:44:08 +0100
Subject: [PATCH] Add whitespace-nowrap and strict shrink-0 to admin nav items
 to prevent any text wrapping or overlap

---
 resources/views/layouts/admin.blade.php | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 7d2212c..081bf90 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -35,7 +35,7 @@
                 <div class="flex items-center space-x-3 shrink-0">
                     <a href="{{ route('admin.content.index') }}" class="flex items-center space-x-2 shrink-0 group">
                         <img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-6 w-auto shrink-0">
-                        <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 font-semibold text-[10px] tracking-wider uppercase shrink-0">Studio CMS</span>
+                        <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 font-semibold text-[10px] tracking-wider uppercase shrink-0 whitespace-nowrap">Studio CMS</span>
                     </a>
                 </div>
 
@@ -65,17 +65,17 @@
 
                 <nav class="hidden lg:flex items-center space-x-1.5 text-xs font-medium">
                     <!-- 1. Layout & Teksten -->
-                    <a href="{{ route('admin.content.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.content.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
+                    <a href="{{ route('admin.content.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 whitespace-nowrap {{ request()->routeIs('admin.content.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
                         <i data-lucide="palette" class="w-3.5 h-3.5"></i>
                         <span>Layout & Teksten</span>
                     </a>
 
                     <!-- 2. Assortiment (Grouped Dropdown) -->
-                    <div class="relative" @click.outside="catalogOpen = false">
+                    <div class="relative shrink-0" @click.outside="catalogOpen = false">
                         <button 
                             type="button" 
                             @click="catalogOpen = !catalogOpen; relationsOpen = false" 
-                            class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer {{ $isCatalogActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
+                            class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer whitespace-nowrap {{ $isCatalogActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
                         >
                             <i data-lucide="box" class="w-3.5 h-3.5"></i>
                             <span>Assortiment</span>
@@ -145,17 +145,17 @@
                     </div>
 
                     <!-- 3. Bestellingen (Direct Link) -->
-                    <a href="{{ route('admin.orders.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.orders.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
+                    <a href="{{ route('admin.orders.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 whitespace-nowrap {{ request()->routeIs('admin.orders.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
                         <i data-lucide="shopping-cart" class="w-3.5 h-3.5"></i>
                         <span>Bestellingen</span>
                     </a>
 
                     <!-- 4. Klanten & Communicatie (Grouped Dropdown) -->
-                    <div class="relative" @click.outside="relationsOpen = false">
+                    <div class="relative shrink-0" @click.outside="relationsOpen = false">
                         <button 
                             type="button" 
                             @click="relationsOpen = !relationsOpen; catalogOpen = false" 
-                            class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer {{ $isRelationsActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
+                            class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer whitespace-nowrap {{ $isRelationsActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
                         >
                             <i data-lucide="users" class="w-3.5 h-3.5"></i>
                             <span>Klanten & Communicatie</span>