From 3dfcd7fd8ae7f3e78ce70af7b54623376dfedbba Mon Sep 17 00:00:00 2001
From: Valeri Karpov <val@karpov.io>
Date: Wed, 7 Jan 2026 17:21:16 -0500
Subject: [PATCH 1/3] make node_env indicator less "badge-y" and fix mobile
 menu showing up behind document-details controls

---
 frontend/src/navbar/navbar.html | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/navbar/navbar.html b/frontend/src/navbar/navbar.html
index dd6f29e..24ee4fd 100644
--- a/frontend/src/navbar/navbar.html
+++ b/frontend/src/navbar/navbar.html
@@ -1,10 +1,20 @@
 <div class="navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]">
-  <div class="flex items-center gap-4 h-full pl-4">
+  <div class="flex items-center gap-4 md:gap-6 h-full pl-4">
     <router-link :to="{ name: defaultRoute }">
-      <img src="images/logo.svg" class="h-[32px] mr-1" alt="Mongoose Studio Logo" />
+      <img src="images/logo.svg" class="h-10 mr-1" alt="Mongoose Studio Logo" />
     </router-link>
-    <div v-if="!!state.nodeEnv" title="NODE_ENV" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
-      {{state.nodeEnv}}
+    <div
+      v-if="!!state.nodeEnv"
+      title="NODE_ENV"
+      class="inline-flex items-center rounded px-2 py-1 text-xs text-gray-500 bg-white border border-gray-200"
+      style="gap: 0.5em;"
+    >
+      <span
+        :class="warnEnv ? 'bg-red-400' : 'bg-yellow-400'"
+        class="inline-block rounded-full"
+        style="width: 0.5em; height: 0.5em;"
+      ></span>
+      <span class="ml-1">{{state.nodeEnv}}</span>
     </div>
   </div>
   <div class="h-full pr-4 hidden md:block">
@@ -93,7 +103,7 @@
   <!-- Mobile menu mask -->
   <div id="mobile-menu-mask" class="fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
   <!-- Mobile menu drawer -->
-  <div id="mobile-menu" class="fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
+  <div id="mobile-menu" style="z-index: 1000" class="fixed inset-0 bg-white shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
     <div class="flex items-center justify-between px-4 !h-[55px] border-b border-gray-200">
       <router-link :to="{ name: defaultRoute }">
         <img src="images/logo.svg" class="h-[32px]" alt="Mongoose Studio Logo" />

From 85a702f5db313422cdbc5fed175ecfabc70d6a44 Mon Sep 17 00:00:00 2001
From: Valeri Karpov <val@karpov.io>
Date: Thu, 8 Jan 2026 09:34:13 -0500
Subject: [PATCH 2/3] Update frontend/src/navbar/navbar.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/navbar/navbar.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/navbar/navbar.html b/frontend/src/navbar/navbar.html
index 24ee4fd..36c89a9 100644
--- a/frontend/src/navbar/navbar.html
+++ b/frontend/src/navbar/navbar.html
@@ -6,8 +6,7 @@
     <div
       v-if="!!state.nodeEnv"
       title="NODE_ENV"
-      class="inline-flex items-center rounded px-2 py-1 text-xs text-gray-500 bg-white border border-gray-200"
-      style="gap: 0.5em;"
+      class="inline-flex items-center rounded px-2 py-1 text-xs text-gray-500 bg-white border border-gray-200 gap-2"
     >
       <span
         :class="warnEnv ? 'bg-red-400' : 'bg-yellow-400'"

From 272748ad911649ee9f63d206833cda39586b8427 Mon Sep 17 00:00:00 2001
From: Valeri Karpov <val@karpov.io>
Date: Thu, 8 Jan 2026 09:34:37 -0500
Subject: [PATCH 3/3] Update frontend/src/navbar/navbar.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/navbar/navbar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/navbar/navbar.html b/frontend/src/navbar/navbar.html
index 36c89a9..9fd15d1 100644
--- a/frontend/src/navbar/navbar.html
+++ b/frontend/src/navbar/navbar.html
@@ -13,7 +13,7 @@
         class="inline-block rounded-full"
         style="width: 0.5em; height: 0.5em;"
       ></span>
-      <span class="ml-1">{{state.nodeEnv}}</span>
+      <span>{{state.nodeEnv}}</span>
     </div>
   </div>
   <div class="h-full pr-4 hidden md:block">