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
This commit is contained in:
2026-08-31 10:25:07 +02:00
parent e3af6653cd
commit 7950edb145
@@ -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 { 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-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-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 { 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 > 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-dialog-title h3 { margin: 0; color: var(--color-ink); font-size: 16px; font-weight: 650; }
.clone-url-field { margin-top: 2px; } .clone-url-field { align-self: start; margin-top: 2px; }
.integration-browser { display: grid; gap: 8px; min-height: 0; } .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 { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; }
.repository-toolbar label { position: relative; min-width: 0; } .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 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 input { height: 34px; padding-left: 31px; font-size: 11px; }
.repository-toolbar button { min-height: 32px; padding: 0; } .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-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: 188px; max-height: 284px; padding-right: 8px; overflow: auto; scrollbar-width: none; border-radius: inherit; background: transparent; } .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-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 { 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; } .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 { 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 { 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-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; }
} }
</style> </style>