From 7950edb145b61b072e4c2493996ea8fca5adcb6f Mon Sep 17 00:00:00 2001 From: Christoph Brandau Date: Mon, 31 Aug 2026 10:25:07 +0200 Subject: [PATCH] fix(clone-dialog): improve layout and scrolling Adjust grid templates and overflow rules to improve layout. Replace fixed heights with flexible rows so content fills space. Hide overflow and tweak alignment to avoid double scrollbars. - Use grid-template-rows to allocate header, controls, and list area - Make repository list shell and list use height: 100% and overflow:auto - Align URL field to the top to prevent unexpected scrolling --- src/lib/components/CloneRepositoryDialog.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/components/CloneRepositoryDialog.svelte b/src/lib/components/CloneRepositoryDialog.svelte index f1ad4e0..6051ca6 100644 --- a/src/lib/components/CloneRepositoryDialog.svelte +++ b/src/lib/components/CloneRepositoryDialog.svelte @@ -400,19 +400,19 @@ .clone-source-list button.active { color: var(--color-ink); background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface-hover)); box-shadow: inset 3px 0 0 var(--color-accent); } .clone-source-list button.active :global(svg) { color: var(--color-accent); } .clone-source-nav > p { margin: 12px 14px 0; color: var(--color-ink-faint); font-size: 9px; line-height: 1.45; } - .clone-dialog-content { display: grid; align-content: start; gap: 14px; min-width: 0; min-height: 0; padding: 16px 18px; overflow: auto; } + .clone-dialog-content { display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-auto-rows: auto; align-content: stretch; gap: 14px; min-width: 0; min-height: 0; padding: 16px 18px; overflow: hidden; } .clone-dialog-title { display: grid; gap: 3px; } .clone-dialog-title > span { color: var(--color-accent); font-size: 8.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; } .clone-dialog-title h3 { margin: 0; color: var(--color-ink); font-size: 16px; font-weight: 650; } - .clone-url-field { margin-top: 2px; } - .integration-browser { display: grid; gap: 8px; min-height: 0; } + .clone-url-field { align-self: start; margin-top: 2px; } + .integration-browser { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; gap: 8px; min-height: 0; } .repository-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; } .repository-toolbar label { position: relative; min-width: 0; } .repository-toolbar label > :global(svg) { position: absolute; z-index: 1; top: 10px; left: 10px; color: var(--color-ink-faint); } .repository-toolbar input { height: 34px; padding-left: 31px; font-size: 11px; } .repository-toolbar button { min-height: 32px; padding: 0; } - .repository-list-shell { position: relative; min-height: 190px; max-height: 286px; overflow: hidden; border: 1px solid var(--color-border-input); border-radius: 7px; background: var(--color-surface-raised); box-shadow: 0 8px 18px rgba(0,0,0,.13); } - .repository-list { min-height: 188px; max-height: 284px; padding-right: 8px; overflow: auto; scrollbar-width: none; border-radius: inherit; background: transparent; } + .repository-list-shell { position: relative; min-height: 0; height: 100%; overflow: hidden; border: 1px solid var(--color-border-input); border-radius: 7px; background: var(--color-surface-raised); box-shadow: 0 8px 18px rgba(0,0,0,.13); } + .repository-list { min-height: 0; height: 100%; padding-right: 8px; overflow: auto; scrollbar-width: none; border-radius: inherit; background: transparent; } .repository-list::-webkit-scrollbar { display: none; width: 0; height: 0; } .repository-scrollbar { position: absolute; z-index: 2; top: 3px; right: 1px; bottom: 3px; width: 7px; border-radius: 4px; opacity: 0; pointer-events: none; touch-action: none; transition: opacity 120ms ease; } .repository-scrollbar.visible { opacity: 1; pointer-events: auto; } @@ -470,6 +470,6 @@ .clone-source-list { display: flex; width: max-content; min-width: 100%; padding: 0 6px; } .clone-source-list button { width: auto; min-height: 34px; padding-inline: 9px; border-radius: 5px; } .clone-source-list button.active { box-shadow: inset 0 -2px 0 var(--color-accent); } - .clone-dialog-content { padding: 13px 12px; } + .clone-dialog-content { padding: 13px 12px; overflow: hidden; } }