From d08e5883ca58c74361db378493f331f8b8afa909 Mon Sep 17 00:00:00 2001
From: Oscar Beaumont <oscar@otbeaumont.me>
Date: Fri, 17 Oct 2025 21:43:44 +0800
Subject: [PATCH 1/2] 3 stacked

---
 apps/desktop/src-tauri/src/windows.rs                     | 4 ++--
 .../routes/(window-chrome)/new-main/TargetMenuGrid.tsx    | 6 +++---
 .../desktop/src/routes/(window-chrome)/new-main/index.tsx | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/desktop/src-tauri/src/windows.rs b/apps/desktop/src-tauri/src/windows.rs
index 5245414184..739821e03d 100644
--- a/apps/desktop/src-tauri/src/windows.rs
+++ b/apps/desktop/src-tauri/src/windows.rs
@@ -13,8 +13,8 @@ use std::{
     sync::{Arc, Mutex, atomic::AtomicU32},
 };
 use tauri::{
-    AppHandle, LogicalPosition, Manager, Monitor, PhysicalPosition, PhysicalSize, WebviewUrl,
-    WebviewWindow, WebviewWindowBuilder, Wry,
+    AppHandle, LogicalPosition, LogicalSize, Manager, Monitor, PhysicalPosition, PhysicalSize,
+    WebviewUrl, WebviewWindow, WebviewWindowBuilder, Wry,
 };
 use tauri_specta::Event;
 use tokio::sync::RwLock;
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx
index abb75d55f2..0ca80348ad 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx
@@ -103,7 +103,7 @@ export default function TargetMenuGrid(props: TargetMenuGridProps) {
 		<div
 			data-variant={props.variant}
 			class={cx(
-				"grid w-full grid-cols-2 content-start items-start justify-items-stretch gap-2",
+				"grid w-full grid-cols-3 content-start items-start justify-items-stretch gap-2",
 				props.class,
 			)}
 			ref={(node) => {
@@ -112,7 +112,7 @@ export default function TargetMenuGrid(props: TargetMenuGridProps) {
 		>
 			<Switch>
 				<Match when={props.errorMessage}>
-					<div class="flex flex-col col-span-2 gap-2 justify-center items-center py-6 text-sm text-center text-gray-11">
+					<div class="flex flex-col col-span-3 gap-2 justify-center items-center py-6 text-sm text-center text-gray-11">
 						<p>{props.errorMessage}</p>
 					</div>
 				</Match>
@@ -122,7 +122,7 @@ export default function TargetMenuGrid(props: TargetMenuGridProps) {
 					</For>
 				</Match>
 				<Match when={isEmpty()}>
-					<div class="col-span-2 py-6 text-sm text-center text-gray-11">
+					<div class="col-span-3 py-6 text-sm text-center text-gray-11">
 						{props.emptyMessage ?? defaultEmptyMessage()}
 					</div>
 				</Match>
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
index aeed303171..f163df2153 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
@@ -74,8 +74,8 @@ import TargetTypeButton from "./TargetTypeButton";
 
 function getWindowSize() {
 	return {
-		width: 270,
-		height: 256,
+		width: 320,
+		height: 300,
 	};
 }
 
@@ -195,8 +195,8 @@ function TargetMenuPanel(props: TargetMenuPanelProps & SharedTargetMenuProps) {
 			<div class="flex gap-3 justify-between items-center mt-3">
 				<div
 					onClick={() => props.onBack()}
-					class="flex gap-1 items-center rounded-md px-1.5 text-xs 
-					text-gray-11 transition-opacity hover:opacity-70 hover:text-gray-12 
+					class="flex gap-1 items-center rounded-md px-1.5 text-xs
+					text-gray-11 transition-opacity hover:opacity-70 hover:text-gray-12
 					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
 				>
 					<IconLucideArrowLeft class="size-3 text-gray-11" />

From 03ccaeec349e03c3b88d07a25e8542f5c0c9c0f5 Mon Sep 17 00:00:00 2001
From: Oscar Beaumont <oscar@otbeaumont.me>
Date: Fri, 17 Oct 2025 22:00:13 +0800
Subject: [PATCH 2/2] prototype

---
 .../src/routes/(window-chrome)/new-main/CameraSelect.tsx    | 2 +-
 .../routes/(window-chrome)/new-main/TargetTypeButton.tsx    | 2 +-
 apps/desktop/src/routes/(window-chrome)/new-main/index.tsx  | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
index 83a28b7fa8..072464bde5 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
@@ -38,7 +38,7 @@ export default function CameraSelect(props: {
 		<div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
 			<button
 				disabled={!!currentRecording.data || props.disabled}
-				class="flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
+				class="flex flex-row gap-2 items-center px-2 w-full h-11 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
 				onClick={() => {
 					Promise.all([
 						CheckMenuItem.new({
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
index 6664e1e402..8548b1000f 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
@@ -24,7 +24,7 @@ function TargetTypeButton(props: TargetTypeButtonProps) {
 			disabled={local.disabled}
 			aria-pressed={local.selected ? "true" : "false"}
 			class={cx(
-				"flex flex-1 flex-col items-center justify-end gap-2 rounded-lg bg-gray-3 py-1.5 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1",
+				"flex flex-1 flex-col items-center justify-center gap-3 rounded-lg bg-gray-3 py-6 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1 min-h-0",
 				local.selected ? "text-gray-12" : "text-gray-12 hover:bg-gray-4",
 				local.disabled && "pointer-events-none opacity-60",
 				local.class,
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
index f163df2153..f45e2b6e0f 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
@@ -631,7 +631,7 @@ function Page() {
 			exitClass="scale-100"
 			exitToClass="scale-95"
 		>
-			<div class="flex flex-col gap-2 w-full">
+			<div class="flex flex-col w-full space-y-2">
 				<div class="flex flex-row gap-2 items-stretch w-full text-xs text-gray-11">
 					<div
 						class={cx(
@@ -655,7 +655,7 @@ function Page() {
 						/>
 						<TargetDropdownButton
 							class={cx(
-								"rounded-none border-l border-gray-6 focus-visible:ring-0 focus-visible:ring-offset-0",
+								"rounded-none border-l border-gray-6 focus-visible:ring-0 focus-visible:ring-offset-0 h-full",
 								displayMenuOpen() && "bg-gray-5",
 							)}
 							ref={(el) => (displayTriggerRef = el)}
@@ -697,7 +697,7 @@ function Page() {
 						/>
 						<TargetDropdownButton
 							class={cx(
-								"rounded-none border-l border-gray-6 focus-visible:ring-0 focus-visible:ring-offset-0",
+								"rounded-none border-l border-gray-6 focus-visible:ring-0 focus-visible:ring-offset-0 h-full",
 								windowMenuOpen() && "bg-gray-5",
 							)}
 							ref={(el) => (windowTriggerRef = el)}