diff --git a/src/lib/components/tree/ConfigTree.svelte b/src/lib/components/tree/ConfigTree.svelte index 8a73471..de76a1c 100644 --- a/src/lib/components/tree/ConfigTree.svelte +++ b/src/lib/components/tree/ConfigTree.svelte @@ -582,12 +582,14 @@ )} /> - e.preventDefault()} - onClick={cancelRenameFolder} - iconPath="close" - tooltipText="Cancel" - /> +
+ e.preventDefault()} + onClick={cancelRenameFolder} + iconPath="close" + tooltipText="Cancel" + /> +
{#if renameFolderError}

{renameFolderError}

@@ -652,12 +654,14 @@ )} /> - e.preventDefault()} - onClick={cancelRename} - iconPath="close" - tooltipText="Cancel" - /> +
+ e.preventDefault()} + onClick={cancelRename} + iconPath="close" + tooltipText="Cancel" + /> +
{#if isRenaming && renameError} @@ -680,6 +684,20 @@ min-width: 0; } + /* MoltenInput's doesn't set box-sizing, so width:100% adds its own + padding/border on top of that. Profile Cloud's standalone pages hide this + via a global box-sizing reset, but that reset isn't present when this app + is embedded as the profile-cloud-web-component (shadow:none, no app.css), + so without this the input overflows its flex row and pushes the cancel + button onto its own line in narrow/deeply-nested rows. */ + .rename-input :global(input) { + box-sizing: border-box; + } + + .rename-cancel { + flex-shrink: 0; + } + .rename-error { color: var(--error); font-size: 0.75rem; diff --git a/src/lib/components/tree/ProfileCloudTreeItem.svelte b/src/lib/components/tree/ProfileCloudTreeItem.svelte index ab5fb61..0cea2d8 100644 --- a/src/lib/components/tree/ProfileCloudTreeItem.svelte +++ b/src/lib/components/tree/ProfileCloudTreeItem.svelte @@ -129,7 +129,7 @@ align-items: center; width: 100%; border-width: 1px; - height: 33px; + min-height: 2em; padding: 0; background-color: transparent; } @@ -204,6 +204,7 @@ .edit-content { grid-column: 1 / span 3; display: flex; + flex-wrap: nowrap; align-items: center; gap: 0.5rem; min-width: 0;