Merge pull request #462 from pockethost/fix/ui

Fix/Small UI bugs

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">
+      <div class="flex flex-col items-start gap-2 flex-1 min-w-0 relative">
-        <span class="text-xl font-semibold truncate max-w-[200px]">
+        <span class="text-xl text-start font-semibold truncate w-full">
           {instance.cname  ? instance.cname : instance.subdomain} 
         </span>
 
@@ -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
@@ -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'}`}

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} />

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 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">
+  <div class="flex items-center gap-3 min-w-0">
-      <!-- Burger -->
+    <!-- Burger -->
-      <button on:click={() => sidebarOpen = !sidebarOpen}>
+    <button on:click={() => sidebarOpen = !sidebarOpen} class="flex-shrink-0">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-          viewBox="0 0 24 24" stroke="currentColor">
+        viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h16" />
+          d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
+      </svg>
-      </button>
+    </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>
 
+    <!-- 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>
 
-    </div>
+  <!-- Power Toggle -->
+  <div class="flex-shrink-0">
     <Toggle checked={$instance.power} onChange={handlePowerChange($instance.id)} />
   </div>
+</div>
+
 
   {#if sidebarOpen && window.innerWidth < 768}
   <div

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 text-left">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">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>
+        <th class="truncate max-w-[150px]">{item.name}</th>
-        <td>{item.value.slice(0, 2) + item.value.slice(2).replaceAll(/./g, '*')}</td>
+        <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>
+