From df31ec8a8e3310a9c3039b390a7c67228dae3471 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 24 Dec 2025 19:36:37 -0800
Subject: [PATCH] WIP: Part 1

---
 .../utility_types/widgets/button_widgets.rs   |  4 +++
 .../utility_types/widgets/input_widgets.rs    | 10 ++++++
 .../utility_types/widgets/label_widgets.rs    |  2 ++
 frontend/src/components/panels/Layers.svelte  |  2 +-
 .../components/widgets/WidgetSection.svelte   |  2 +-
 .../src/components/widgets/WidgetSpan.svelte  |  1 +
 .../widgets/buttons/TextButton.svelte         |  6 ++--
 .../widgets/inputs/DropdownInput.svelte       |  1 +
 .../widgets/inputs/FieldInput.svelte          | 33 ++++++++++++++-----
 .../widgets/inputs/NumberInput.svelte         | 13 ++++----
 .../widgets/inputs/RadioInput.svelte          |  2 ++
 .../widgets/inputs/TextInput.svelte           |  8 ++---
 .../widgets/labels/TextLabel.svelte           |  1 +
 13 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
index 82ac8b8e3c..dd57d985e5 100644
--- a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
@@ -138,8 +138,12 @@ pub struct TextButton {
 	pub narrow: bool,
 
 	// Sizing
+	#[serde(rename = "autoWidth")]
+	pub auto_width: bool,
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
+	#[serde(rename = "maxWidth")]
+	pub max_width: u32,
 
 	// Tooltips
 	#[serde(rename = "tooltipLabel")]
diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
index 12d17eb422..02ea3f1664 100644
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
@@ -84,6 +84,8 @@ pub struct DropdownInput {
 	pub interactive: bool,
 
 	// Sizing
+	#[serde(rename = "autoWidth")]
+	pub auto_width: bool,
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
 	#[serde(rename = "maxWidth")]
@@ -189,6 +191,8 @@ pub struct NumberInput {
 	pub unit_is_hidden_when_editing: bool,
 
 	// Sizing
+	#[serde(rename = "autoWidth")]
+	pub auto_width: bool,
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
 	#[serde(rename = "maxWidth")]
@@ -309,8 +313,12 @@ pub struct RadioInput {
 	pub narrow: bool,
 
 	// Sizing
+	#[serde(rename = "autoWidth")]
+	pub auto_width: bool,
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
+	#[serde(rename = "maxWidth")]
+	pub max_width: u32,
 	//
 	// Callbacks exists on the `RadioEntryData` children, not this parent `RadioInput`
 }
@@ -399,6 +407,8 @@ pub struct TextInput {
 	pub centered: bool,
 
 	// Sizing
+	#[serde(rename = "autoWidth")]
+	pub auto_width: bool,
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
 	#[serde(rename = "maxWidth")]
diff --git a/editor/src/messages/layout/utility_types/widgets/label_widgets.rs b/editor/src/messages/layout/utility_types/widgets/label_widgets.rs
index a1975b9793..3bed9d59dd 100644
--- a/editor/src/messages/layout/utility_types/widgets/label_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/label_widgets.rs
@@ -70,6 +70,8 @@ pub struct TextLabel {
 	pub table_align: bool,
 
 	// Sizing
+	#[serde(rename = "autoWidth")]
+	pub auto_width: bool,
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
 	#[serde(rename = "maxWidth")]
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index a9995954f3..5d4d8db79c 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -700,7 +700,7 @@
 			justify-content: space-between;
 
 			.widget-span:first-child {
-				flex: 1 1 auto;
+				flex: 1 0 auto;
 			}
 
 			&:not(:has(*)) {
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index 0151e573c8..af092567eb 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -174,7 +174,7 @@
 				}
 
 				> .text-label:first-of-type {
-					flex: 0 0 25%;
+					flex: 0 0 20%;
 					margin-left: 16px;
 				}
 
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index aa37ad21f2..9ecb943363 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -337,6 +337,7 @@
 	.widget-span.row {
 		flex: 0 0 auto;
 		display: flex;
+		overflow: hidden;
 		min-height: var(--row-height);
 		--row-height: 32px;
 
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index e239b04dd8..4fae6bab86 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -28,7 +28,9 @@
 	export let flush = false;
 	export let narrow = false;
 	// Sizing
+	export let autoWidth = false;
 	export let minWidth = 0;
+	export let maxWidth = 0;
 	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
@@ -107,15 +109,15 @@
 
 <style lang="scss">
 	.text-button-container {
-		display: flex;
 		position: relative;
+		display: flex;
 	}
 
 	.text-button {
 		display: flex;
+		flex: 0 0 auto;
 		justify-content: center;
 		align-items: center;
-		flex: 0 0 auto;
 		white-space: nowrap;
 		height: var(--widget-height);
 		margin: 0;
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 414d741f70..3499b27259 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -36,6 +36,7 @@
 	export let virtualScrolling = false;
 	export let interactive = true;
 	// Sizing
+	export let autoWidth = false;
 	export let minWidth = 0;
 	export let maxWidth = 0;
 	// Tooltips
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index 2be753e261..94db4f18f5 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -25,6 +25,9 @@
 	export let monospace = false;
 	export let narrow = false;
 	export let textarea = false;
+	export let autoWidth = false;
+	export let minWidth = 0;
+	export let maxWidth = 0;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
@@ -76,8 +79,24 @@
 </script>
 
 <!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
-<LayoutRow class={`field-input ${className}`} classes={{ disabled, narrow, monospace, ...classes }} style={styleName} {styles} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
+<LayoutRow
+	class={`field-input ${className}`}
+	classes={{ disabled, narrow, monospace, ...classes }}
+	style={styleName}
+	styles={{
+		...styles,
+		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
+		...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
+	}}
+	{tooltipLabel}
+	{tooltipDescription}
+	{tooltipShortcut}
+>
+
 	{#if !textarea}
+		{#if label}
+			<label for={`field-input-${id}`} on:pointerdown>{label}</label>
+		{/if}
 		<input
 			type="text"
 			class:has-label={label}
@@ -115,9 +134,6 @@
 			on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
 		></textarea>
 	{/if}
-	{#if label}
-		<label for={`field-input-${id}`} on:pointerdown>{label}</label>
-	{/if}
 	<slot />
 </LayoutRow>
 
@@ -128,7 +144,6 @@
 		position: relative;
 		border-radius: 2px;
 		background: var(--color-1-nearblack);
-		flex-direction: row-reverse;
 
 		&.narrow.narrow {
 			--widget-height: 20px;
@@ -182,13 +197,13 @@
 
 			&:focus {
 				text-align: left;
-
-				& + label {
-					display: none;
-				}
 			}
 		}
 
+		label:has(+ input:focus) {
+			display: none;
+		}
+
 		textarea {
 			min-height: calc((var(--widget-height) - 6px) * 3);
 			margin: 3px;
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 2678e26fee..9f245ba4e4 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -53,6 +53,7 @@
 	export let unitIsHiddenWhenEditing = true;
 
 	// Sizing
+	export let autoWidth = false;
 	export let minWidth = 0;
 	export let maxWidth = 0;
 	// Tooltips
@@ -101,11 +102,6 @@
 
 	$: watchValue(value, unit);
 	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
-	$: styles = {
-		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
-		...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
-		...(mode === "Range" ? { "--progress-factor": Math.min(Math.max((rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin), 0), 1) } : {}),
-	};
 
 	// Keep track of the Shift and Ctrl key being held down.
 	const trackShiftAndCtrl = (e: KeyboardEvent | MouseEvent) => {
@@ -775,7 +771,12 @@
 	{tooltipLabel}
 	{tooltipDescription}
 	{tooltipShortcut}
-	{styles}
+	styles={{
+		...(mode === "Range" ? { "--progress-factor": Math.min(Math.max((rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin), 0), 1) } : {}),
+	}}
+	{autoWidth}
+	{minWidth}
+	{maxWidth}
 	hideContextMenu={true}
 	spellcheck={false}
 	bind:this={self}
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index 76e65661c1..39a90e5dc1 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -15,7 +15,9 @@
 	// Styling
 	export let narrow = false;
 	// Sizing
+	export let autoWidth = false;
 	export let minWidth = 0;
+	export let maxWidth = 0;
 
 	$: mixed = selectedIndex === undefined && !disabled;
 
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 613e21f2e4..431d4e8162 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -14,6 +14,7 @@
 	export let narrow = false;
 	export let centered = false;
 	// Sizing
+	export let autoWidth = false;
 	export let minWidth = 0;
 	export let maxWidth = 0;
 	// Tooltips
@@ -73,10 +74,6 @@
 <FieldInput
 	class={`text-input ${className}`.trim()}
 	classes={{ centered, ...classes }}
-	styles={{
-		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
-		...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
-	}}
 	{value}
 	on:value
 	on:textFocused={onTextFocused}
@@ -90,6 +87,9 @@
 	{tooltipDescription}
 	{tooltipShortcut}
 	{placeholder}
+	{autoWidth}
+	{minWidth}
+	{maxWidth}
 	bind:this={self}
 />
 
diff --git a/frontend/src/components/widgets/labels/TextLabel.svelte b/frontend/src/components/widgets/labels/TextLabel.svelte
index 36da1795a8..d2655279f6 100644
--- a/frontend/src/components/widgets/labels/TextLabel.svelte
+++ b/frontend/src/components/widgets/labels/TextLabel.svelte
@@ -22,6 +22,7 @@
 	export let centerAlign = false;
 	export let tableAlign = false;
 	// Sizing
+	export let autoWidth = false;
 	export let minWidth = 0;
 	export let maxWidth = 0;
 	export let minWidthCharacters = 0;