Clean up web code's use of display CSS properties, using <LayoutRow>/<LayoutCol> where intended

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -1,27 +1,27 @@
 <template>
-	<div class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
+	<LayoutRow class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
 		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
 		<label :for="`checkbox-input-${id}`">
-			<div class="checkbox-box">
+			<LayoutRow class="checkbox-box">
 				<IconLabel :icon="icon" />
-			</div>
+			</LayoutRow>
 		</label>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .checkbox-input {
-	display: inline-block;
+	flex: 0 0 auto;
 
 	input {
 		display: none;
 	}
 
 	label {
-		display: block;
+		display: flex;
 
 		.checkbox-box {
-			display: block;
+			flex: 0 0 auto;
 			background: var(--color-e-nearwhite);
 			padding: 2px;
 			border-radius: 2px;
@@ -84,6 +84,7 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utilities/icons";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
@@ -102,6 +103,9 @@ export default defineComponent({
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
 		outlineStyle: { type: Boolean as PropType<boolean>, default: false },
 	},
-	components: { IconLabel },
+	components: {
+		IconLabel,
+		LayoutRow,
+	},
 });
 </script>

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -1,10 +1,10 @@
 <template>
-	<div class="dropdown-input">
-		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+	<LayoutRow class="dropdown-input">
+		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
 			<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
-		</div>
+		</LayoutRow>
 		<MenuList
 			v-model:activeEntry="activeEntry"
 			@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
@@ -15,7 +15,7 @@
 			:scrollableY="true"
 			ref="menuList"
 		/>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
@@ -23,7 +23,6 @@
 	position: relative;
 
 	.dropdown-box {
-		display: flex;
 		align-items: center;
 		white-space: nowrap;
 		background: var(--color-1-nearblack);
@@ -36,7 +35,6 @@
 		}
 
 		span {
-			display: inline-block;
 			margin: 0;
 			margin-left: 8px;
 			flex: 1 1 100%;
@@ -90,6 +88,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
@@ -138,6 +137,7 @@ export default defineComponent({
 	components: {
 		IconLabel,
 		MenuList,
+		LayoutRow,
 	},
 });
 </script>

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="number-input" :class="{ disabled }">
+	<LayoutRow class="number-input" :class="{ disabled }">
 		<input
 			:class="{ 'has-label': label }"
 			:id="`number-input-${id}`"
@@ -14,7 +14,7 @@
 		<label v-if="label" :for="`number-input-${id}`">{{ label }}</label>
 		<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement('Decrease')"></button>
 		<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement('Increase')"></button>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
@@ -25,7 +25,6 @@
 	border-radius: 2px;
 	background: var(--color-1-nearblack);
 	overflow: hidden;
-	display: flex;
 	flex-direction: row-reverse;
 
 	label {
@@ -154,6 +153,8 @@ import { defineComponent, PropType } from "vue";
 
 import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
 export default defineComponent({
 	props: {
 		value: { type: Number as PropType<number>, required: true },
@@ -182,7 +183,6 @@ export default defineComponent({
 			if (Number.isNaN(this.value)) this.text = "";
 			else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`;
 			else this.text = `${this.value}${this.unit}`;
-
 			this.editing = true;
 			const inputElement = this.$refs.input as HTMLInputElement;
 			// Setting the value directly is required to make `inputElement.select()` work
@@ -194,24 +194,20 @@ export default defineComponent({
 		onTextChanged() {
 			// The `inputElement.blur()` call at the bottom of this function causes itself to be run again, so this check skips a second run
 			if (!this.editing) return;
-
 			const newValue = parseFloat(this.text);
 			this.updateValue(newValue);
-
 			this.editing = false;
 			const inputElement = this.$refs.input as HTMLElement;
 			inputElement.blur();
 		},
 		onCancelTextChange() {
 			this.updateValue(NaN);
-
 			this.editing = false;
 			const inputElement = this.$refs.input as HTMLElement;
 			inputElement.blur();
 		},
 		onIncrement(direction: IncrementDirection) {
 			if (Number.isNaN(this.value)) return;
-
 			switch (this.incrementBehavior) {
 				case "Add": {
 					const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor;
@@ -234,16 +230,12 @@ export default defineComponent({
 		},
 		updateValue(newValue: number) {
 			let sanitized = newValue;
-
 			const invalid = Number.isNaN(newValue);
 			if (invalid) sanitized = this.value;
-
 			if (this.isInteger) sanitized = Math.round(sanitized);
 			if (typeof this.min === "number" && !Number.isNaN(this.min)) sanitized = Math.max(sanitized, this.min);
 			if (typeof this.max === "number" && !Number.isNaN(this.max)) sanitized = Math.min(sanitized, this.max);
-
 			if (!invalid) this.$emit("update:value", sanitized);
-
 			this.setText(sanitized);
 		},
 		setText(value: number) {
@@ -252,7 +244,6 @@ export default defineComponent({
 			// 1.23 == 1
 			// 0.23 == 0 (Reason for the slightly more complicated code)
 			const leftSideDigits = Math.max(Math.floor(value).toString().length, 0) * Math.sign(value);
-
 			const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0);
 			const displayValue = Math.round(value * roundingPower) / roundingPower;
 			this.text = `${displayValue}${this.unit}`;
@@ -265,12 +256,10 @@ export default defineComponent({
 				this.text = "-";
 				return;
 			}
-
 			// The simple `clamp()` function can't be used here since `undefined` values need to be boundless
 			let sanitized = newValue;
 			if (typeof this.min === "number") sanitized = Math.max(sanitized, this.min);
 			if (typeof this.max === "number") sanitized = Math.min(sanitized, this.max);
-
 			this.setText(sanitized);
 		},
 	},
@@ -284,5 +273,6 @@ export default defineComponent({
 		inputElement.removeEventListener("focus", this.onTextFocused);
 		inputElement.removeEventListener("blur", this.onTextChanged);
 	},
+	components: { LayoutRow },
 });
 </script>

frontend/src/components/widgets/inputs/OptionalInput.vue

@@ -1,16 +1,15 @@
 <template>
-	<div class="optional-input">
+	<LayoutRow class="optional-input">
 		<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" />
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .optional-input {
 	label {
-		display: flex;
 		align-items: center;
-		white-space: nowrap;
 		justify-content: center;
+		white-space: nowrap;
 		width: 24px;
 		height: 24px;
 		border: 1px solid var(--color-7-middlegray);
@@ -38,6 +37,7 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utilities/icons";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 
 export default defineComponent({
@@ -47,6 +47,7 @@ export default defineComponent({
 	},
 	components: {
 		CheckboxInput,
+		LayoutRow,
 	},
 });
 </script>

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -1,10 +1,10 @@
 <template>
-	<div class="radio-input" ref="radioInput">
+	<LayoutRow class="radio-input">
 		<button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="handleEntryClick(entry)" :title="entry.tooltip">
 			<IconLabel v-if="entry.icon" :icon="entry.icon" />
 			<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
 		</button>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
@@ -16,7 +16,7 @@
 		padding: 0 4px;
 		outline: none;
 		border: none;
-		display: inline-flex;
+		display: flex;
 		align-items: center;
 
 		&:hover {
@@ -50,11 +50,6 @@
 		}
 	}
 
-	.icon-label,
-	.text-label {
-		display: inline-block;
-	}
-
 	.text-label {
 		margin: 0 4px;
 	}
@@ -71,6 +66,7 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utilities/icons";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
@@ -100,6 +96,7 @@ export default defineComponent({
 	components: {
 		IconLabel,
 		TextLabel,
+		LayoutRow,
 	},
 });
 </script>

frontend/src/components/widgets/inputs/ShelfItemInput.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="shelf-item-input" :class="{ active: active }">
+	<LayoutRow class="shelf-item-input" :class="{ active: active }">
 		<IconButton :action="action" :icon="icon" :size="32" />
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
@@ -33,10 +33,14 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utilities/icons";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 
 export default defineComponent({
-	components: { IconButton },
+	components: {
+		IconButton,
+		LayoutRow,
+	},
 	props: {
 		icon: { type: String as PropType<IconName>, required: true },
 		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },

frontend/src/components/widgets/inputs/SwatchPairInput.vue

@@ -1,25 +1,25 @@
 <template>
-	<div class="swatch-pair">
-		<div class="secondary swatch">
+	<LayoutCol class="swatch-pair">
+		<LayoutRow class="secondary swatch">
 			<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
 				<ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" />
 			</FloatingMenu>
-		</div>
-		<div class="primary swatch">
+		</LayoutRow>
+		<LayoutRow class="primary swatch">
 			<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
 				<ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" />
 			</FloatingMenu>
-		</div>
-	</div>
+		</LayoutRow>
+	</LayoutCol>
 </template>
 
 <style lang="scss">
 .swatch-pair {
-	display: flex;
 	// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
 	flex-direction: column-reverse;
+	flex: 0 0 auto;
 
 	.swatch {
 		width: 28px;
@@ -71,6 +71,8 @@ import { defineComponent } from "vue";
 import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
 import { rgbaToDecimalRgba } from "@/utilities/color";
 
+import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
@@ -84,6 +86,8 @@ export default defineComponent({
 	components: {
 		FloatingMenu,
 		ColorPicker,
+		LayoutRow,
+		LayoutCol,
 	},
 	methods: {
 		clickPrimarySwatch() {