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

---
 .../preferences_dialog_message_handler.rs     |  2 ++
 .../document/document_message_handler.rs      |  4 +--
 .../components/widgets/WidgetSection.svelte   |  4 ---
 .../widgets/buttons/TextButton.svelte         | 13 ++++++-
 .../widgets/inputs/DropdownInput.svelte       | 11 ++++--
 .../widgets/inputs/FieldInput.svelte          | 35 ++++++++++++++++---
 .../widgets/inputs/RadioInput.svelte          | 19 +++++++---
 7 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs b/editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs
index 7a4ed18610..6ceb1c5ba9 100644
--- a/editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs
+++ b/editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs
@@ -177,6 +177,7 @@ impl PreferencesDialogMessageHandler {
 					}),
 			])
 			.selected_index(Some(preferences.selection_mode as u32))
+			.auto_width(true)
 			.widget_instance();
 			let selection_mode = vec![
 				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
@@ -266,6 +267,7 @@ impl PreferencesDialogMessageHandler {
 					.on_update(move |_| PreferencesMessage::GraphWireStyle { style: GraphWireStyle::GridAligned }.into()),
 			])
 			.selected_index(Some(preferences.graph_wire_style as u32))
+			.auto_width(true)
 			.widget_instance();
 			let graph_wire_style = vec![
 				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index 215e9a7e73..ee7e50776e 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -3486,7 +3486,6 @@ impl DocumentMessageHandler {
 				.selected_index(blend_mode.and_then(|blend_mode| blend_mode.index_in_list_svg_subset()).map(|index| index as u32))
 				.disabled(disabled)
 				.draw_icon(false)
-				.max_width(100)
 				.tooltip_label("Blend Mode")
 				.widget_instance(),
 			Separator::new(SeparatorStyle::Related).widget_instance(),
@@ -3508,7 +3507,6 @@ impl DocumentMessageHandler {
 					}
 				})
 				.on_commit(|_| DocumentMessage::AddTransaction.into())
-				.max_width(100)
 				.tooltip_label("Opacity")
 				.widget_instance(),
 			Separator::new(SeparatorStyle::Related).widget_instance(),
@@ -3530,7 +3528,6 @@ impl DocumentMessageHandler {
 					}
 				})
 				.on_commit(|_| DocumentMessage::AddTransaction.into())
-				.max_width(100)
 				.tooltip_label("Fill")
 				.widget_instance(),
 		];
@@ -3946,6 +3943,7 @@ pub fn navigation_controls(ptz: &PTZ, navigation_handler: &NavigationMessageHand
 			.min(0.000001)
 			.max(1000000.)
 			.tooltip_label(if node_graph { "Node Graph Zoom" } else { "Canvas Zoom" })
+			.min_width(80)
 			.on_update(|number_input: &NumberInput| {
 				NavigationMessage::CanvasZoomSet {
 					zoom_factor: number_input.value.unwrap() / 100.,
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index af092567eb..1e75fe249f 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -186,10 +186,6 @@
 					flex-grow: 1;
 				}
 
-				> .radio-input button {
-					flex: 1 1 100%;
-				}
-
 				> .parameter-expose-button + .text-label ~ .number-input:last-child {
 					margin-left: auto;
 				}
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 4fae6bab86..63ca9af923 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -70,7 +70,9 @@
 		class:disabled
 		class:narrow
 		class:flush
+		class:auto-width={autoWidth}
 		style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
+		style:max-width={maxWidth > 0 ? `${maxWidth}px` : undefined}
 		data-tooltip-label={tooltipLabel}
 		data-tooltip-description={tooltipDescription}
 		data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
@@ -111,11 +113,16 @@
 	.text-button-container {
 		position: relative;
 		display: flex;
+		flex: 1 1 auto;
+
+		&:has(.auto-width) {
+			flex: 1 0 auto;
+		}
 	}
 
 	.text-button {
 		display: flex;
-		flex: 0 0 auto;
+		flex: 1 1 auto;
 		justify-content: center;
 		align-items: center;
 		white-space: nowrap;
@@ -131,6 +138,10 @@
 		--button-text-color: var(--color-e-nearwhite);
 		--widget-height: 24px;
 
+		&.auto-width {
+			flex: 1 0 auto;
+		}
+
 		&.narrow.narrow {
 			--widget-height: 20px;
 		}
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 3499b27259..f3cfe3bac7 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -119,7 +119,7 @@
 
 <LayoutRow
 	class="dropdown-input"
-	classes={{ narrow }}
+	classes={{ narrow, "auto-width": autoWidth }}
 	styles={{
 		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
 		...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
@@ -165,8 +165,13 @@
 <style lang="scss">
 	.dropdown-input {
 		position: relative;
+		flex: 1 1 auto;
 		--widget-height: 24px;
 
+		&.auto-width {
+			flex: 1 0 auto;
+		}
+
 		&.narrow.narrow {
 			--widget-height: 20px;
 		}
@@ -181,7 +186,9 @@
 			.dropdown-label {
 				margin: 0;
 				margin-left: 8px;
-				flex: 1 1 100%;
+				flex: 1 1 auto;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 
 			.dropdown-icon {
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index 94db4f18f5..4f174b5c83 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -81,7 +81,7 @@
 <!-- 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 }}
+	classes={{ disabled, narrow, monospace, "auto-width": autoWidth, ...classes }}
 	style={styleName}
 	styles={{
 		...styles,
@@ -92,10 +92,10 @@
 	{tooltipDescription}
 	{tooltipShortcut}
 >
-
 	{#if !textarea}
 		{#if label}
 			<label for={`field-input-${id}`} on:pointerdown>{label}</label>
+			<div class="after-label-spacer"></div>
 		{/if}
 		<input
 			type="text"
@@ -139,12 +139,27 @@
 
 <style lang="scss">
 	.field-input {
-		min-width: 80px;
 		height: auto;
 		position: relative;
+		overflow: hidden;
 		border-radius: 2px;
 		background: var(--color-1-nearblack);
 
+		// This property seems likely to be supported soon in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1832409
+		// Meanwhile, Firefox and Safari pre-26.2 (Dec 2025) assume the input text field is 30px wide, as set by `min-width: 30px` in FieldInput.svelte.
+		@supports (field-sizing: content) {
+			input[type="text"]:not(:focus).has-label {
+				field-sizing: content;
+				flex: 0 0 auto;
+				width: auto;
+				min-width: auto;
+			}
+
+			label {
+				flex: 1 1 0;
+			}
+		}
+
 		&.narrow.narrow {
 			--widget-height: 20px;
 		}
@@ -157,14 +172,24 @@
 		}
 
 		label {
-			flex: 0 0 auto;
+			flex: 1 1 auto;
 			line-height: calc(var(--widget-height) - 6px);
 			padding: 3px 0;
-			padding-right: 4px;
 			margin-left: 8px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
+
+			// This keeps the label, when abbreviated by ellipsis, from touching the number value.
+			// This only shrinks after the label has shrunk to 0 (which is why this is a separate element, not margin or padding on the label or input).
+			+ .after-label-spacer {
+				width: 4px;
+				flex: 0 1 auto;
+			}
+		}
+
+		&.auto-width label {
+			flex: 1 0 auto;
 		}
 
 		&:not(.disabled) label {
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index 39a90e5dc1..ed9063012b 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -27,7 +27,14 @@
 	}
 </script>
 
-<LayoutRow class="radio-input" classes={{ disabled, narrow, mixed }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
+<LayoutRow
+	class="radio-input"
+	classes={{ disabled, narrow, mixed, "auto-width": autoWidth }}
+	styles={{
+		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
+		...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
+	}}
+>
 	{#each entries as entry, index}
 		<button
 			class:active={!mixed ? index === selectedIndex : undefined}
@@ -68,8 +75,7 @@
 			justify-content: center;
 			// `min-width: fit-content` and `flex: 1 1 0` together allow us to occupy space such that we're always at least the content width,
 			// but if the container is set wider, we distribute the space evenly (so buttons with short and long labels would have equal widths).
-			min-width: fit-content;
-			flex: 1 1 0;
+			flex: 1 1 100%;
 
 			&:first-of-type {
 				margin-left: 2px;
@@ -99,10 +105,15 @@
 			.text-label {
 				margin: 0 8px;
 				overflow: hidden;
-				flex: 0 0 auto;
+				flex: 0 1 auto;
+				text-overflow: ellipsis;
 			}
 		}
 
+		&.auto-width button .text-label {
+			flex: 0 0 auto;
+		}
+
 		&:not(.disabled) button:not(.active):hover {
 			background: var(--color-6-lowergray);
 			color: var(--color-f-white);