From b31a458a51ad0955eca15e9b8580528f5c35178a Mon Sep 17 00:00:00 2001 From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com> Date: Wed, 14 Oct 2026 11:29:35 +0200 Subject: [PATCH] style(ui): align floating navigation and canvas radii to 8px --- resources/css/app.css | 3 ++- resources/js/canvas/deploy/state.svelte.js | 2 +- resources/js/canvas/deploy/styles.js | 4 ++-- resources/js/canvas/environment/EnvironmentCanvas.svelte | 4 ++-- resources/js/canvas/environment/Panel.svelte | 2 +- 5 files changed, 8 insertions(+), 7 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 3b87dcdb46..bdd2d9e8cc 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -5438,7 +5438,8 @@ html.dark .canvas-zoom-max { @media (min-width: 1024px) { html[data-nav-style="floating"] { --floating-gap: 0.5rem; - --floating-radius: 12px; + /* Same radius as the content cards (.application-settings-section). */ + --floating-radius: 8px; --floating-line: oklch(0% 0 0 / 0.09); /* Bottom edge of the top bar panel plus one gap. */ --floating-top: calc(3rem + var(--floating-gap) * 2); diff --git a/resources/js/canvas/deploy/state.svelte.js b/resources/js/canvas/deploy/state.svelte.js index 666955915a..8d76b5a62d 100644 --- a/resources/js/canvas/deploy/state.svelte.js +++ b/resources/js/canvas/deploy/state.svelte.js @@ -103,7 +103,7 @@ export function dock(top) { const topbar = document.querySelector('.app-topbar'); top.removeAttribute('style'); if (desktop && topbar && document.documentElement.dataset.navStyle === 'floating') { - top.className = 'fixed z-40 flex items-center gap-3 rounded-xl border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel'; + top.className = 'fixed z-40 flex items-center gap-3 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel'; root.append(top); const gap = 8; const head = topbar.getBoundingClientRect(); diff --git a/resources/js/canvas/deploy/styles.js b/resources/js/canvas/deploy/styles.js index e04d9951cd..a66713dc2f 100644 --- a/resources/js/canvas/deploy/styles.js +++ b/resources/js/canvas/deploy/styles.js @@ -28,7 +28,7 @@ const CSS = ` .cv-root.cv-dark { color-scheme: dark; } .cv-root *, .cv-root *::before, .cv-root *::after { box-sizing: border-box; } /* Rounded boxes on the backdrop: the top bar and the step list. */ - .cv-island { border: 1px solid var(--cv-line); border-radius: 12px; background: var(--cv-island); } + .cv-island { border: 1px solid var(--cv-line); border-radius: 8px; background: var(--cv-island); } .cv-root svg { width: 1rem; height: 1rem; flex: none; } .cv-root button:not(.button) { font: inherit; } @@ -260,7 +260,7 @@ const CSS = ` @media (prefers-reduced-motion: reduce) { .cv-node.blank .cv-port.out::after, .cv-hint::before, .cv-hint span { animation: none; } } /* Run panel: an island with the steps as status lights, then the logs. */ - .cv-run { position: absolute; top: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 10; display: flex; flex-direction: column; width: min(26rem, 45%); overflow: hidden; border: 1px solid var(--cv-line); border-radius: 12px; background: var(--cv-island); box-shadow: 0 20px 48px -20px rgb(0 0 0 / 0.4); } + .cv-run { position: absolute; top: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 10; display: flex; flex-direction: column; width: min(26rem, 45%); overflow: hidden; border: 1px solid var(--cv-line); border-radius: 8px; background: var(--cv-island); box-shadow: 0 20px 48px -20px rgb(0 0 0 / 0.4); } .cv-run[hidden] { display: none; } .cv-run header { display: flex; align-items: flex-start; gap: 0.5rem; padding: 1rem 0.75rem 0.875rem 1.25rem; border-bottom: 1px solid var(--cv-line); } .cv-run header div { display: grid; gap: 0.0625rem; margin-right: auto; } diff --git a/resources/js/canvas/environment/EnvironmentCanvas.svelte b/resources/js/canvas/environment/EnvironmentCanvas.svelte index acac35d255..7b2105f9e0 100644 --- a/resources/js/canvas/environment/EnvironmentCanvas.svelte +++ b/resources/js/canvas/environment/EnvironmentCanvas.svelte @@ -236,14 +236,14 @@ const slot = desktop.matches && !floatingBar() && !('toolbarInline' in ds) && document.getElementById('page-toolbar-slot'); bar.removeAttribute('style'); if (floatingBar()) { - bar.className = 'fixed z-40 flex flex-wrap items-center justify-center gap-3 rounded-xl border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel'; + bar.className = 'fixed z-40 flex flex-wrap items-center justify-center gap-3 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel'; bodyEl.append(bar); alignFloatingBar(); } else if (slot) { bar.className = 'flex items-center gap-3 pl-3'; slot.append(bar); } else { - bar.className = 'flex shrink-0 flex-wrap items-center gap-3 rounded-xl border border-neutral-200 bg-white px-3 py-2.5 dark:border-white/[0.08] dark:bg-panel'; + bar.className = 'flex shrink-0 flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 dark:border-white/[0.08] dark:bg-panel'; barSlot.append(bar); panelTop = ''; } diff --git a/resources/js/canvas/environment/Panel.svelte b/resources/js/canvas/environment/Panel.svelte index 8086ac4bcd..12bc001300 100644 --- a/resources/js/canvas/environment/Panel.svelte +++ b/resources/js/canvas/environment/Panel.svelte @@ -72,7 +72,7 @@ {/snippet} {#snippet shell(title, iconSource, body, footer)} -