Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-11-23 22:15:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(InstanceLayout): truncate instance name if too long

Browse Source
This commit is contained in:
cheskoxd 2025-08-20 20:01:43 -05:00
parent 0ac63427c8
commit 8ed40ee71b
1 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
View File

@ -96,33 +96,38 @@
<div class="flex gap-4 flex-col md:flex-row relative"> <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 --> <!-- Name -->
<h2 class="text-lg font-bold text-base-content truncate"> <h2 class="text-lg font-bold text-base-content truncate min-w-0">
{$instance.subdomain} {#if $instance.dev} {$instance.subdomain}
{#if $instance.dev}
<a <a
href={`/instances/${$instance.id}/dev`} href={`/instances/${$instance.id}/dev`}
class="text-warning animate-pulse text-xl ml-1" class="text-warning animate-pulse text-xl ml-1 flex-shrink-0"
title="Dev Mode Active (SLOW)" title="Dev Mode Active (SLOW)"
> >
🚧 🚧
</a> </a>
{/if} {/if}
</h2> </h2>
</div> </div>
<!-- Power Toggle -->
<div class="flex-shrink-0">
<Toggle checked={$instance.power} onChange={handlePowerChange($instance.id)} /> <Toggle checked={$instance.power} onChange={handlePowerChange($instance.id)} />
</div> </div>
</div>
{#if sidebarOpen && window.innerWidth < 768} {#if sidebarOpen && window.innerWidth < 768}
<div <div