From cb55476175a77bb3e23422e678d67142777654de Mon Sep 17 00:00:00 2001 From: Oscar Beaumont Date: Thu, 23 Oct 2025 21:57:20 +0800 Subject: [PATCH 1/4] fix pofix --- .../src/routes/target-select-overlay.tsx | 67 ++++++++++++++++--- 1 file changed, 57 insertions(+), 10 deletions(-) diff --git a/apps/desktop/src/routes/target-select-overlay.tsx b/apps/desktop/src/routes/target-select-overlay.tsx index cecab14f97..8dd161cd09 100644 --- a/apps/desktop/src/routes/target-select-overlay.tsx +++ b/apps/desktop/src/routes/target-select-overlay.tsx @@ -270,22 +270,54 @@ function Inner() { const [controlsHeight, setControlsHeight] = createSignal< number | undefined >(undefined); - // Recompute placement when bounds change or window resizes - const placeControlsAbove = createMemo(() => { + const [controlsWidth, setControlsWidth] = createSignal< + number | undefined + >(undefined); + + // Determine the best placement for controls + const controlsPlacement = createMemo(() => { const top = bounds.position.y; + const left = bounds.position.x; + const width = bounds.size.width; const height = bounds.size.height; - // Measure controls height (fallback to 64px if not yet mounted) + // Measure controls dimensions (fallback if not yet mounted) const ctrlH = controlsHeight() ?? 64; + const ctrlW = controlsWidth() ?? 300; const margin = 16; + // Check if selection spans full height (or nearly full height) + const isFullHeight = height >= window.innerHeight * 0.9; + + if (isFullHeight) { + // Try to place on the right side + const rightSpace = window.innerWidth - (left + width); + if (rightSpace >= ctrlW + margin) { + return { position: "right" as const }; + } + + // Try to place on the left side + if (left >= ctrlW + margin) { + return { position: "left" as const }; + } + + // Fall back to inside at the bottom + return { position: "inside-bottom" as const }; + } + + // For non-full-height selections, use original logic const wouldOverflow = top + height + margin + ctrlH > window.innerHeight; - return wouldOverflow; + return { position: wouldOverflow ? "above" : "below" } as const; + }); + + onMount(() => { + setControlsHeight(controlsEl?.offsetHeight); + setControlsWidth(controlsEl?.offsetWidth); + }); + createEventListener(window, "resize", () => { + setControlsHeight(controlsEl?.offsetHeight); + setControlsWidth(controlsEl?.offsetWidth); }); - onMount(() => setControlsHeight(controlsEl?.offsetHeight)); - createEventListener(window, "resize", () => - setControlsHeight(controlsEl?.offsetHeight), - ); function createOnMouseDown( onDrag: ( @@ -725,9 +757,24 @@ function Inner() { ref={controlsEl} class={cx( "flex absolute flex-col items-center m-2", - placeControlsAbove() ? "bottom-full" : "top-full", + controlsPlacement().position === "above" && "bottom-full", + controlsPlacement().position === "below" && "top-full", + controlsPlacement().position === "right" && + "left-full top-1/2 -translate-y-1/2", + controlsPlacement().position === "left" && + "right-full top-1/2 -translate-y-1/2", + controlsPlacement().position === "inside-bottom" && + "bottom-2 left-1/2 -translate-x-1/2", )} - style={{ width: `${bounds.size.width}px` }} + style={{ + width: + controlsPlacement().position === "right" || + controlsPlacement().position === "left" + ? "auto" + : controlsPlacement().position === "inside-bottom" + ? "auto" + : `${bounds.size.width}px`, + }} > Date: Thu, 23 Oct 2025 21:58:42 +0800 Subject: [PATCH 2/4] fix --- apps/desktop/src/routes/target-select-overlay.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/desktop/src/routes/target-select-overlay.tsx b/apps/desktop/src/routes/target-select-overlay.tsx index 8dd161cd09..4ac3b31d71 100644 --- a/apps/desktop/src/routes/target-select-overlay.tsx +++ b/apps/desktop/src/routes/target-select-overlay.tsx @@ -291,14 +291,11 @@ function Inner() { if (isFullHeight) { // Try to place on the right side const rightSpace = window.innerWidth - (left + width); - if (rightSpace >= ctrlW + margin) { + if (rightSpace >= ctrlW + margin) return { position: "right" as const }; - } // Try to place on the left side - if (left >= ctrlW + margin) { - return { position: "left" as const }; - } + if (left >= ctrlW + margin) return { position: "left" as const }; // Fall back to inside at the bottom return { position: "inside-bottom" as const }; From 1684481b88db5640b1ee3766d24b5cf5b42166dc Mon Sep 17 00:00:00 2001 From: Oscar Beaumont Date: Thu, 23 Oct 2025 22:22:12 +0800 Subject: [PATCH 3/4] fix --- .../src/routes/target-select-overlay.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/apps/desktop/src/routes/target-select-overlay.tsx b/apps/desktop/src/routes/target-select-overlay.tsx index 4ac3b31d71..e00947c61f 100644 --- a/apps/desktop/src/routes/target-select-overlay.tsx +++ b/apps/desktop/src/routes/target-select-overlay.tsx @@ -779,6 +779,9 @@ function Inner() { screen: params.displayId!, bounds, }} + showBackground={ + controlsPlacement().position === "inside-bottom" + } /> -

- Click and drag to create new area -

+ +

+ Click and drag to create new area +

+ @@ -824,6 +829,7 @@ function Inner() { function RecordingControls(props: { target: ScreenCaptureTarget; setToggleModeSelect?: (value: boolean) => void; + showBackground?: boolean; }) { const auth = authStore.createQuery(); const { setOptions, rawOptions } = useRecordingOptions(); @@ -991,7 +997,12 @@ function RecordingControls(props: {
props.setToggleModeSelect?.(true)} - class="flex gap-1 items-center mb-5 transition-opacity duration-200 hover:opacity-60" + class="flex gap-1 items-center mb-5 transition-all duration-200" + classList={{ + "bg-black/40 p-2 rounded-lg backdrop-blur-sm border border-white/10 hover:bg-black/50 hover:opacity-80": + props.showBackground, + "hover:opacity-60": props.showBackground, + }} >

From f979f2d13030fe507a0e7846dd79f88dd37538cf Mon Sep 17 00:00:00 2001 From: Oscar Beaumont Date: Thu, 23 Oct 2025 22:25:26 +0800 Subject: [PATCH 4/4] wip --- apps/desktop/src/routes/target-select-overlay.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/desktop/src/routes/target-select-overlay.tsx b/apps/desktop/src/routes/target-select-overlay.tsx index e00947c61f..07be96bb56 100644 --- a/apps/desktop/src/routes/target-select-overlay.tsx +++ b/apps/desktop/src/routes/target-select-overlay.tsx @@ -779,6 +779,7 @@ function Inner() { screen: params.displayId!, bounds, }} + setToggleModeSelect={setToggleModeSelect} showBackground={ controlsPlacement().position === "inside-bottom" } @@ -995,9 +996,9 @@ function RecordingControls(props: {

-
props.setToggleModeSelect?.(true)} - class="flex gap-1 items-center mb-5 transition-all duration-200" + class="cursor-pointer flex gap-1 items-center mb-5 transition-all duration-200" classList={{ "bg-black/40 p-2 rounded-lg backdrop-blur-sm border border-white/10 hover:bg-black/50 hover:opacity-80": props.showBackground, @@ -1009,7 +1010,7 @@ function RecordingControls(props: { What is {capitalize(rawOptions.mode)} Mode?

-
+ ); }