diff --git a/src/app.css b/src/app.css index d606852..d47b861 100644 --- a/src/app.css +++ b/src/app.css @@ -97,6 +97,7 @@ align-items: center; gap: 0.4rem; position: relative; + min-height: 8rem; } .highlighted-value { diff --git a/src/components/ConversionResult.svelte b/src/components/ConversionResult.svelte index d45afeb..5ff341e 100644 --- a/src/components/ConversionResult.svelte +++ b/src/components/ConversionResult.svelte @@ -14,7 +14,8 @@ highlighted, isInputUnit = false, onclick, - onshiftclick + onshiftclick, + onctrlclick }: { value: Big; unit: Unit; @@ -22,14 +23,18 @@ isInputUnit?: boolean; onclick: () => void; onshiftclick: () => void; + onctrlclick: () => void; } = $props(); // Compute once per reactive update; shared between aria-label and display span. let formattedValue = $derived(formatBig(value)); function handleClick(e: MouseEvent) { - if (e.shiftKey) { - // Shift+click promotes this tile to the from-unit. + if (e.ctrlKey) { + // Ctrl+click adopts this tile's value as the new input value and promotes it to from-unit. + onctrlclick(); + } else if (e.shiftKey) { + // Shift+click promotes this tile to the from-unit (inputValue unchanged). // Guard: if it already IS the from-unit, the action would be a no-op. if (!isInputUnit) onshiftclick(); } else { diff --git a/src/components/ConverterCard.svelte b/src/components/ConverterCard.svelte index 93ddfbb..5e0a255 100644 --- a/src/components/ConverterCard.svelte +++ b/src/components/ConverterCard.svelte @@ -1,5 +1,6 @@