diff --git a/ui/src/builder/BuilderFieldsWidth.vue b/ui/src/builder/BuilderFieldsWidth.vue
new file mode 100644
index 000000000..61bb79316
--- /dev/null
+++ b/ui/src/builder/BuilderFieldsWidth.vue
@@ -0,0 +1,245 @@
+<template>
+	<div class="BuilderFieldsWidth" tabindex="-1" ref="rootEl">
+		<div class="chipStackContainer">
+			<div class="chipStack">
+				<button
+					class="chip"
+					tabindex="0"
+					:class="{ active: mode == 'default' }"
+					v-on:click="
+						() => {
+							setMode('default');
+							setContentValue(component.id, fieldKey, undefined);
+						}
+					"
+				>
+					Default
+				</button>
+				<button
+					class="chip"
+					tabindex="0"
+					:class="{ active: mode == 'css' }"
+					v-on:click="setMode('css')"
+				>
+					CSS
+				</button>
+				<button
+					class="chip"
+					:class="{ active: mode == 'pick' }"
+					tabindex="0"
+					v-on:click="setMode('pick')"
+				>
+					Pick
+				</button>
+			</div>
+		</div>
+
+		<div class="main" v-if="mode == 'pick' || mode == 'css'">
+			<div class="pickerContainer" v-if="mode == 'pick'">
+				<BuilderSelect :defaultValue=subMode :options=selectOptions @select="handleInputSelect"/>
+				<div v-if="subMode == SubMode.fixed" class="fixedContainer">
+					<input type="text" :value="valuePickFixed" v-on:input="handleInputFixed" ref="fixedEl"	/>
+					<div>px</div>
+				</div>
+
+			</div>
+
+			<input
+				type="text"
+				ref="freehandInputEl"
+				:value="component.content[fieldKey]"
+				v-on:input="handleInputCss"
+				v-if="mode == 'css'"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	computed,
+	inject,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	Ref,
+	ref,
+	toRefs,
+} from "vue";
+import { Component } from "../streamsyncTypes";
+import { useComponentActions } from "./useComponentActions";
+import injectionKeys from "../injectionKeys";
+import BuilderSelect from "./BuilderSelect.vue";
+
+const ss = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+const { setContentValue } = useComponentActions(ss, ssbm);
+
+const rootEl: Ref<HTMLElement> = ref(null);
+const pickerEl: Ref<HTMLInputElement> = ref(null);
+const fixedEl: Ref<HTMLInputElement> = ref(null);
+const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+
+type Mode = "pick" | "css" | "default";
+
+enum SubMode {
+	fixed = "fixed",
+	fit_content = "fit-content",
+	full = "full",
+}
+
+const subModes: Array<{key: SubMode, label: string, match: (v: string) => boolean, default: string, icon?: string}> = [
+	{'key': SubMode.fixed, label: 'Fixed', match: (v) => v.endsWith('px'), default: '160px'},
+	{'key': SubMode.fit_content, label: 'Fit Content', match: (v) => v == 'fit-content', default: 'fit-content'},
+	{'key': SubMode.full, label: 'Full', match: (v) => v == '100%', default: '100%'},
+]
+
+
+const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+	pick: pickerEl,
+	css: freehandInputEl,
+	default: null,
+};
+
+const props = defineProps<{
+	componentId: Component["id"];
+	fieldKey: string;
+}>();
+
+const { componentId, fieldKey } = toRefs(props);
+const component = computed(() => ss.getComponentById(componentId.value));
+
+const selectOptions = computed(() => {
+	return subModes.map((m) => {
+		return { value: m.key, label: m.label, icon: "ri-split-cells-horizontal" };
+	});
+});
+
+const subMode = computed(() => {
+	const value = component.value.content[fieldKey.value]
+	for (const k in subModes) {
+		if (value && subModes[k].match(value)) {
+			return subModes[k].key
+		}
+	}
+
+	return null
+})
+
+const valueCss = computed(() => {
+	const value = component.value.content[fieldKey.value]
+	if (!value) {
+		return ''
+	} else {
+		return value
+	}
+})
+
+const valuePickFixed = computed(() => {
+	const value = component.value.content[fieldKey.value]
+	if (!value) {
+		return null
+	} else if (value.endsWith('px')) {
+		return value.substring(0, value.length - 2)
+	}
+
+	return null
+})
+
+const getInitialMode = (): Mode => {
+	if (!valueCss.value) {
+		return "default";
+	}
+
+	for (const k in subModes) {
+		if (subModes[k].match(valueCss.value)) {
+			return "pick"
+		}
+	}
+
+	return "css";
+};
+
+const mode: Ref<Mode> = ref(getInitialMode());
+
+const autofocus = () => {
+	const focusEl = focusEls[mode.value]?.value;
+	if (!focusEl) return;
+	focusEl.focus();
+
+	if (typeof focusEl.selectionStart !== "number") return;
+	focusEl.selectionStart = focusEl.selectionEnd = focusEl.value.length;
+};
+
+const setMode = async (newMode: Mode) => {
+	if (mode.value == newMode) return;
+	mode.value = newMode;
+	await nextTick();
+	autofocus();
+};
+
+const handleInputSelect = (select: string) => {
+	for (const k in subModes) {
+		if (subModes[k].key == select) {
+			const value = subModes[k].default;
+			component.value.content[fieldKey.value] = value;
+			setContentValue(
+					component.value.id,
+					fieldKey.value,
+					value
+			);
+		}
+	}
+
+	if (select == SubMode.fixed) {
+		nextTick(() => {
+			fixedEl.value.focus();
+		});
+	}
+}
+
+const handleInputCss = (ev: Event) => {
+	setContentValue(
+			component.value.id,
+			fieldKey.value,
+			(ev.target as HTMLInputElement).value
+	)
+}
+
+const handleInputFixed = (ev: Event) => {
+	setContentValue(
+		component.value.id,
+		fieldKey.value,
+		(ev.target as HTMLInputElement).value + 'px'
+	)
+}
+
+onMounted(() => {
+	rootEl.value.addEventListener("focus", autofocus);
+});
+
+onBeforeUnmount(() => {
+	rootEl.value.removeEventListener("focus", autofocus);
+});
+</script>
+
+<style scoped>
+@import "./sharedStyles.css";
+
+.chipStackContainer {
+	padding: 12px;
+	margin-top: 4px;
+	padding-bottom: 12px;
+}
+.main {
+	border-top: 1px solid var(--builderSeparatorColor);
+	padding: 12px;
+}
+
+.fixedContainer {
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
+	padding: 8px;
+}
+</style>
diff --git a/ui/src/core_components/CoreButton.vue b/ui/src/core_components/CoreButton.vue
index d9678e4a2..b60742a15 100644
--- a/ui/src/core_components/CoreButton.vue
+++ b/ui/src/core_components/CoreButton.vue
@@ -9,12 +9,13 @@
 </template>
 
 <script lang="ts">
+import { FieldCategory, FieldType } from "../streamsyncTypes";
 import {
 	buttonColor,
 	buttonTextColor,
 	buttonShadow,
 	separatorColor,
-	cssClasses
+	cssClasses,
 } from "../renderer/sharedStyleFields";
 import { watch } from "vue";
 import { getClick } from "../renderer/syntheticEvents";
@@ -79,7 +80,6 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
 import injectionKeys from "../injectionKeys";
 
 const rootEl:Ref<HTMLElement> = ref(null);
diff --git a/ui/src/core_components/CoreColumns.vue b/ui/src/core_components/CoreColumns.vue
index c870e5cac..a91add7d9 100644
--- a/ui/src/core_components/CoreColumns.vue
+++ b/ui/src/core_components/CoreColumns.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script lang="ts">
+import { cssClasses } from "../renderer/sharedStyleFields";
+
 export default {
 	streamsync: {
 		name: "Column Container",
@@ -21,7 +23,6 @@ export default {
 <script setup lang="ts">
 import { inject } from "vue";
 import injectionKeys from "../injectionKeys";
-import { cssClasses } from "../renderer/sharedStyleFields";
 
 const instanceData = inject(injectionKeys.instanceData);
 instanceData.at(-1).value = { minimumNonCollapsiblePosition: undefined };
diff --git a/ui/src/core_components/CoreHeader.vue b/ui/src/core_components/CoreHeader.vue
index 1f21da7af..4672edce2 100644
--- a/ui/src/core_components/CoreHeader.vue
+++ b/ui/src/core_components/CoreHeader.vue
@@ -10,6 +10,9 @@
 </template>
 
 <script lang="ts">
+import { FieldType } from "../streamsyncTypes";
+import { accentColor, cssClasses, emptinessColor } from "../renderer/sharedStyleFields";
+
 const description =
 	"A container component that typically contains the main navigation elements.";
 
@@ -36,9 +39,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import { FieldType } from "../streamsyncTypes";
 import injectionKeys from "../injectionKeys";
-import { accentColor, cssClasses, emptinessColor } from "../renderer/sharedStyleFields";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
diff --git a/ui/src/core_components/CoreHeading.vue b/ui/src/core_components/CoreHeading.vue
index 8f1c3385f..dd95b6332 100644
--- a/ui/src/core_components/CoreHeading.vue
+++ b/ui/src/core_components/CoreHeading.vue
@@ -8,6 +8,9 @@
 </template>
 
 <script lang="ts">
+import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+
 const description =
 	"A text component used to display headings or titles in different sizes and styles.";
 
@@ -55,9 +58,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
 import injectionKeys from "../injectionKeys";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 <style scoped>
diff --git a/ui/src/core_components/CoreMessage.vue b/ui/src/core_components/CoreMessage.vue
index e4a7a13d5..b4c55bfc3 100644
--- a/ui/src/core_components/CoreMessage.vue
+++ b/ui/src/core_components/CoreMessage.vue
@@ -18,6 +18,10 @@
 </template>
 
 <script lang="ts">
+import LoadingSymbol from "../renderer/LoadingSymbol.vue";
+import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
 
@@ -37,61 +41,58 @@ else:
 `;
 
 export default {
-    streamsync: {
-        name: "Message",
-        description,
-        docs,
-        category: "Content",
-        fields: {
-            message: {
-                name: "Message",
-                type: FieldType.Text,
-                desc: "Prefix with '+' for a success message, with '-' for error, '!' for warning, '%' for loading. No prefix for info. Leave empty to hide.",
-            },
-            successColor: {
-                name: "Success",
-                default: "#00B800",
-                type: FieldType.Color,
-                category: FieldCategory.Style,
-            },
-            errorColor: {
-                name: "Error",
-                default: "#FB0000",
-                type: FieldType.Color,
-                category: FieldCategory.Style,
-            },
-            warningColor: {
-                name: "Warning",
-                default: "#FB9600",
-                type: FieldType.Color,
-                category: FieldCategory.Style,
-            },
-            infoColor: {
-                name: "Info",
-                default: "#00ADB8",
-                type: FieldType.Color,
-                category: FieldCategory.Style,
-            },
-            loadingColor: {
-                name: "Loading",
-                default: "#00ADB8",
-                type: FieldType.Color,
-                category: FieldCategory.Style,
-            },
-            primaryTextColor,
-            cssClasses,
-        },
-        previewField: "name",
-    },
-    components: { LoadingSymbol }
+	streamsync: {
+		name: "Message",
+		description,
+		docs,
+		category: "Content",
+		fields: {
+			message: {
+				name: "Message",
+				type: FieldType.Text,
+				desc: "Prefix with '+' for a success message, with '-' for error, '!' for warning, '%' for loading. No prefix for info. Leave empty to hide.",
+			},
+			successColor: {
+				name: "Success",
+				default: "#00B800",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+			},
+			errorColor: {
+				name: "Error",
+				default: "#FB0000",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+			},
+			warningColor: {
+				name: "Warning",
+				default: "#FB9600",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+			},
+			infoColor: {
+				name: "Info",
+				default: "#00ADB8",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+			},
+			loadingColor: {
+				name: "Loading",
+				default: "#00ADB8",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+			},
+			primaryTextColor,
+			cssClasses,
+		},
+		previewField: "name",
+	},
+	components: {LoadingSymbol}
 };
 </script>
 <script setup lang="ts">
-import LoadingSymbol from "../renderer/LoadingSymbol.vue";
 import { computed, inject } from "vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
 import injectionKeys from "../injectionKeys";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const isBeingEdited = inject(injectionKeys.isBeingEdited);
diff --git a/ui/src/core_components/CoreMetric.vue b/ui/src/core_components/CoreMetric.vue
index 70321dcf2..5bc9bbba0 100644
--- a/ui/src/core_components/CoreMetric.vue
+++ b/ui/src/core_components/CoreMetric.vue
@@ -10,6 +10,13 @@
 </template>
 
 <script lang="ts">
+import { FieldCategory, FieldType } from "../streamsyncTypes";
+import {
+cssClasses,
+	primaryTextColor,
+	secondaryTextColor
+} from "../renderer/sharedStyleFields";
+
 const description =
 	"A component that prominently displays a metric value and associated information.";
 
@@ -68,13 +75,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
 import injectionKeys from "../injectionKeys";
-import {
-cssClasses,
-	primaryTextColor,
-	secondaryTextColor,
-} from "../renderer/sharedStyleFields";
 const fields = inject(injectionKeys.evaluatedFields);
 
 const sentiment = computed(() => {
diff --git a/ui/src/core_components/CoreTabs.vue b/ui/src/core_components/CoreTabs.vue
index 95fc360be..9e0fe339a 100644
--- a/ui/src/core_components/CoreTabs.vue
+++ b/ui/src/core_components/CoreTabs.vue
@@ -24,7 +24,7 @@ import {
 	buttonColor,
 	buttonTextColor,
 	buttonShadow,
-cssClasses,
+	cssClasses,
 } from "../renderer/sharedStyleFields";
 
 const description =
diff --git a/ui/src/core_components/CoreText.vue b/ui/src/core_components/CoreText.vue
index 77f90abff..0b3c14b86 100644
--- a/ui/src/core_components/CoreText.vue
+++ b/ui/src/core_components/CoreText.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { FieldCategory, FieldControl, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+import {cssClasses, primaryTextColor} from "../renderer/sharedStyleFields";
 import { getClick } from "../renderer/syntheticEvents";
 
 const clickHandlerStub = `
diff --git a/ui/src/core_components/CoreTimer.vue b/ui/src/core_components/CoreTimer.vue
index 2e792d7de..0a97ca9bf 100644
--- a/ui/src/core_components/CoreTimer.vue
+++ b/ui/src/core_components/CoreTimer.vue
@@ -8,6 +8,8 @@
 </template>
 
 <script lang="ts">
+import { FieldType } from "../streamsyncTypes";
+import { accentColor, cssClasses } from "../renderer/sharedStyleFields";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -55,9 +57,8 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, nextTick, onMounted, Ref, ref, watch } from "vue";
-import { FieldType } from "../streamsyncTypes";
 import injectionKeys from "../injectionKeys";
-import { accentColor, cssClasses } from "../renderer/sharedStyleFields";
+
 
 const MIN_ANIMATION_RESET_MS = 500;
 const MIN_ANIMATION_DURATION_MS = 1000;
diff --git a/ui/src/core_components/CoreWebcamCapture.vue b/ui/src/core_components/CoreWebcamCapture.vue
index 006d09067..c2f18df3a 100644
--- a/ui/src/core_components/CoreWebcamCapture.vue
+++ b/ui/src/core_components/CoreWebcamCapture.vue
@@ -31,7 +31,7 @@ import {
 	buttonShadow,
 	buttonTextColor,
 	cssClasses,
-	separatorColor,
+	separatorColor
 } from "../renderer/sharedStyleFields";
 
 const description =