From 8ed40ee71b5b81b9414d20ca2d3719d4b311ebd2 Mon Sep 17 00:00:00 2001
From: cheskoxd <franchesko77lacayo@gmail.com>
Date: Wed, 20 Aug 2025 20:01:43 -0500
Subject: [PATCH] fix(InstanceLayout): truncate instance name if too long

---
 .../instances/[instanceId]/+layout.svelte     | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
index 0caa71c8..e866e7fe 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
@@ -96,33 +96,38 @@
 
   <div class="flex gap-4 flex-col md:flex-row relative">
 
-  <div class="flex md:hidden items-center sticky top-0 from-[#111111] to-[#111111]/40 bg-gradient-to-b shadow-md justify-between py-3 mb-0 border-b border-white/10 z-50">
-    <div class="flex items-center gap-3">
-      <!-- Burger -->
-      <button on:click={() => sidebarOpen = !sidebarOpen}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-          viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
-      </button>
-      <!-- Name -->
-      <h2 class="text-lg font-bold text-base-content truncate">
-        {$instance.subdomain}  {#if $instance.dev}
-          <a
-            href={`/instances/${$instance.id}/dev`}
-            class="text-warning animate-pulse text-xl ml-1"
-            title="Dev Mode Active (SLOW)"
-          >
-            🚧
-          </a>
-        {/if}
-      </h2>
+  <div class="flex md:hidden items-center sticky top-0 gap-2 from-[#111111] to-[#111111]/40 bg-gradient-to-b shadow-md justify-between py-3 mb-0 border-b border-white/10 z-50">
+  <div class="flex items-center gap-3 min-w-0">
+    <!-- Burger -->
+    <button on:click={() => sidebarOpen = !sidebarOpen} class="flex-shrink-0">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
+        viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
 
-      
-    </div>
+    <!-- Name -->
+    <h2 class="text-lg font-bold text-base-content truncate min-w-0">
+      {$instance.subdomain}
+      {#if $instance.dev}
+        <a
+          href={`/instances/${$instance.id}/dev`}
+          class="text-warning animate-pulse text-xl ml-1 flex-shrink-0"
+          title="Dev Mode Active (SLOW)"
+        >
+          🚧
+        </a>
+      {/if}
+    </h2>
+  </div>
+
+  <!-- Power Toggle -->
+  <div class="flex-shrink-0">
     <Toggle checked={$instance.power} onChange={handlePowerChange($instance.id)} />
   </div>
+</div>
+
 
   {#if sidebarOpen && window.innerWidth < 768}
   <div