From 9cdcf14197e5cf47b457357a7c98c89ce79b2d66 Mon Sep 17 00:00:00 2001
From: cheskoxd <franchesko77lacayo@gmail.com>
Date: Wed, 20 Aug 2025 19:33:22 -0500
Subject: [PATCH 1/5] fix(InstanceList): add auto-rows-min class for better
 layout consistency

---
 .../dashboard/src/routes/(app)/dashboard/InstanceList.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte b/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte
index 19c23272..37182f3e 100644
--- a/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte
+++ b/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte
@@ -85,7 +85,7 @@
 </div>
 
 <div
-  class="min-h-[50vh] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 pt-1 md:pt-3 gap-2 md:gap-4 items-start justify-start relative z-0"
+  class="min-h-[50vh] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 auto-rows-min pt-1 md:pt-3 gap-2 md:gap-4 items-start justify-start relative z-0"
 >
   {#each filteredInstances as instance (instance.id)}
     <InstanceCard {instance} />

From 75919bf8bec005f2a394fcd5504cb477543b2023 Mon Sep 17 00:00:00 2001
From: cheskoxd <franchesko77lacayo@gmail.com>
Date: Wed, 20 Aug 2025 19:42:03 -0500
Subject: [PATCH 2/5] fix(InstanceCard): update instance name to take full
 width and truncate if needed

---
 .../src/routes/(app)/dashboard/InstanceCard.svelte          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte b/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte
index 9694f6cc..b96d4dbc 100644
--- a/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte
+++ b/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte
@@ -27,8 +27,8 @@
     on:click={openInstance}
   >
     <div class="card-body w-full flex flex-row items-center justify-between gap-6">
-      <div class="flex flex-col items-start gap-2">
-        <span class="text-xl font-semibold truncate max-w-[200px]">
+      <div class="flex flex-col items-start gap-2 flex-1 min-w-0 relative">
+        <span class="text-xl text-start font-semibold truncate w-full">
           {instance.cname  ? instance.cname : instance.subdomain} 
         </span>
 
@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <div class="flex flex-col items-center gap-3">
+      <div class="flex flex-col items-center gap-3 flex-shrink-0">
         <input
           type="checkbox"
           class={`toggle ${instance.power ? 'toggle-success' : 'bg-red-500 hover:bg-red-500'}`}

From 0ac63427c8b51a8aaa7fe856f7c2233d08d4259c Mon Sep 17 00:00:00 2001
From: cheskoxd <franchesko77lacayo@gmail.com>
Date: Wed, 20 Aug 2025 19:57:36 -0500
Subject: [PATCH 3/5] fix(InstanceCard): update admin link for better
 visibility

---
 .../dashboard/src/routes/(app)/dashboard/InstanceCard.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte b/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte
index b96d4dbc..8d08f401 100644
--- a/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte
+++ b/packages/dashboard/src/routes/(app)/dashboard/InstanceCard.svelte
@@ -37,7 +37,7 @@
             href={INSTANCE_ADMIN_URL(instance)}
             target="_blank"
             on:click={openAdmin}
-            class="pr-2 py-0.5 rounded-full text-xs font-medium flex gap-2"
+            class="pr-2 py-0.5 rounded-full text-xs hover:underline font-medium flex gap-2"
             title="Open Admin"
           >
             <img src="/images/pocketbase-logo.svg" alt="PocketBase Logo" class="w-4 h-4" /> Admin

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 4/5] 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

From aa3361401f5ea126be97a6e835dbec5a56b9fb86 Mon Sep 17 00:00:00 2001
From: cheskoxd <franchesko77lacayo@gmail.com>
Date: Wed, 20 Aug 2025 20:09:49 -0500
Subject: [PATCH 5/5] fix(List): truncate secret value to avoid horizontal
 overflow

---
 .../instances/[instanceId]/secrets/List.svelte  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/List.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/List.svelte
index 36471bad..82bd0911 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/List.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/List.svelte
@@ -29,11 +29,11 @@
   }
 </script>
 
-<table class="table mb-8 w-full">
+<table class="table mb-8 w-full table-auto">
   <thead>
     <tr>
-      <th class="w-2/5 border-b-2 border-neutral">Key</th>
-      <th class="w-2/5 border-b-2 border-neutral">Value</th>
+      <th class="w-2/5 border-b-2 border-neutral text-left">Key</th>
+      <th class="w-2/5 border-b-2 border-neutral text-left">Value</th>
       <th class="w-1/5 border-b-2 border-neutral text-right">Actions</th>
     </tr>
   </thead>
@@ -41,17 +41,22 @@
   <tbody>
     {#each $items as item}
       <tr transition:fade>
-        <th>{item.name}</th>
-        <td>{item.value.slice(0, 2) + item.value.slice(2).replaceAll(/./g, '*')}</td>
+        <th class="truncate max-w-[150px]">{item.name}</th>
+        <td class="truncate max-w-[150px]">
+          {item.value.slice(0, 2) + item.value.slice(2).replaceAll(/./g, '*')}
+        </td>
         <td class="text-right">
           <button
             aria-label="Delete"
             on:click={handleDelete(item.name)}
             type="button"
-            class="btn btn-sm btn-square btn-outline btn-warning"><Fa icon={faTrash} /></button
+            class="btn btn-sm btn-square btn-outline btn-warning"
           >
+            <Fa icon={faTrash} />
+          </button>
         </td>
       </tr>
     {/each}
   </tbody>
 </table>
+