Merge pull request 'fix: 🐛 nav bar items overlap with search bar' (#40) from v1.9.6 into main

Reviewed-on: #40

.dockerignore

@@ -4,7 +4,8 @@ CHANGELOG.md
 *.md
 
 # Deployment files
-deployment.yml
+deployment-dev.yml
+deployment-prod.yml
 run.sh
 Dockerfile
 .dockerignore

routes.py

@@ -2615,7 +2615,7 @@ def register_routes(app, limiter=None):
         
         try:
             # Get current version from environment
-            current_version = os.environ.get('VERSION', 'unknown')
+            current_version = os.environ.get('VERSION', 'unknown').lstrip('v')
             
             # Fetch latest release from Gitea
             response = requests.get('https://git.jdbnet.co.uk/api/v1/repos/jamie/ipam/releases/latest', timeout=5)

static/js/update_toast.js

@@ -16,9 +16,9 @@ document.addEventListener('DOMContentLoaded', function() {
                 const compareLink = document.getElementById('toast-compare-link');
                 const closeBtn = document.getElementById('toast-close');
                 
-                // Set versions
-                currentVersionEl.textContent = 'v' + data.current_version;
-                latestVersionEl.textContent = 'v' + data.latest_version;
+                // Set versions (don't add 'v' prefix for dev versions)
+                currentVersionEl.textContent = (data.current_version === 'dev' ? '' : 'v') + data.current_version;
+                latestVersionEl.textContent = (data.latest_version === 'dev' ? '' : 'v') + data.latest_version;
                 
                 // Set compare link (current version to latest version)
                 compareLink.href = `https://git.jdbnet.co.uk/jamie/ipam/compare/v${data.current_version}...v${data.latest_version}`;

static/js/update_toast.min.js

@@ -1 +1 @@
-document.addEventListener("DOMContentLoaded",function(){let t=sessionStorage.getItem("update-toast-dismissed");!t&&fetch("/check_update").then(t=>t.json()).then(t=>{if(t.update_available){let e=document.getElementById("update-toast"),n=document.getElementById("toast-current-version"),s=document.getElementById("toast-latest-version"),a=document.getElementById("toast-compare-link"),d=document.getElementById("toast-close");n.textContent="v"+t.current_version,s.textContent="v"+t.latest_version,a.href=`https://git.jdbnet.co.uk/jamie/ipam/compare/v${t.current_version}...v${t.latest_version}`,e.classList.remove("hidden"),d.addEventListener("click",function(){e.classList.add("hidden"),sessionStorage.setItem("update-toast-dismissed","true")})}}).catch(t=>{console.error("Error checking for updates:",t)})});
+document.addEventListener("DOMContentLoaded",function(){let e=sessionStorage.getItem("update-toast-dismissed");!e&&fetch("/check_update").then(e=>e.json()).then(e=>{if(e.update_available){let t=document.getElementById("update-toast"),n=document.getElementById("toast-current-version"),s=document.getElementById("toast-latest-version"),a=document.getElementById("toast-compare-link"),d=document.getElementById("toast-close");n.textContent=("dev"===e.current_version?"":"v")+e.current_version,s.textContent=("dev"===e.latest_version?"":"v")+e.latest_version,a.href=`https://git.jdbnet.co.uk/jamie/ipam/compare/v${e.current_version}...v${e.latest_version}`,t.classList.remove("hidden"),d.addEventListener("click",function(){t.classList.add("hidden"),sessionStorage.setItem("update-toast-dismissed","true")})}}).catch(e=>{console.error("Error checking for updates:",e)})});

templates/header.html

@@ -1,22 +1,24 @@
-<header class="bg-zinc-800 shadow-md py-3 px-6 flex items-center justify-between relative">
+<header class="bg-zinc-800 shadow-md py-3 px-6 relative flex items-center justify-between lg:grid lg:grid-cols-[auto_minmax(18rem,1fr)_auto] lg:gap-6">
     <div class="flex items-center space-x-3 flex-shrink-0">
         <a href="/" class="flex items-center space-x-3">
             <img src="{{ LOGO_PNG }}" alt="Logo" class="h-8 rounded">
             <span class="text-2xl font-bold text-white whitespace-nowrap">{{ NAME }} IPAM</span>
         </a>
-        <a href="https://git.jdbnet.co.uk/jamie/ipam/releases" target="_blank" rel="noopener noreferrer" class="text-sm font-normal text-gray-300 hover:text-gray-100 -ml-1 mt-3">v{{ VERSION }}</a>
+        <a href="https://git.jdbnet.co.uk/jamie/ipam/releases" target="_blank" rel="noopener noreferrer" class="text-sm font-normal text-gray-300 hover:text-gray-100 -ml-1 mt-3">{{ VERSION }}</a>
     </div>
-    <div class="hidden lg:flex items-center justify-center absolute left-1/2" style="transform: translateX(calc(-50% + 1.5rem));">
-        <form action="/search" method="GET" class="flex items-center space-x-2">
+
+    <div class="hidden lg:flex items-center min-w-0">
+        <form action="/search" method="GET" class="flex items-center space-x-2 w-full max-w-2xl mx-auto">
             <input type="text" name="q" id="search-input" placeholder="Search..."
-                   class="bg-zinc-700 text-white placeholder-gray-400 px-4 py-2 rounded-md text-base focus:outline-none focus:ring-2 focus:ring-gray-500 w-100"
+                   class="bg-zinc-700 text-white placeholder-gray-400 px-4 py-2 rounded-md text-base focus:outline-none focus:ring-2 focus:ring-gray-500 w-full min-w-0"
                    value="{{ request.args.get('q', '') }}">
             <button type="submit" class="text-gray-200 hover:text-gray-400 hover:cursor-pointer flex-shrink-0">
                 <i class="fas fa-search"></i>
             </button>
         </form>
     </div>
-    <nav class="hidden lg:flex items-center space-x-6 flex-shrink-0" id="main-nav">
+
+    <nav class="hidden lg:flex items-center space-x-6 flex-shrink-0 whitespace-nowrap justify-self-end" id="main-nav">
         {% if has_permission('view_index') %}
         <a href="/" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
             <i class="fas fa-home"></i>