WIP: Part 1

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")]

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")]

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")]

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(*)) {

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;
 				}
 

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;
 

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;

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

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;

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}

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;
 

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}
 />
 

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;