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

frontend/src/components/widgets/buttons/IconButton.vue

@@ -6,7 +6,7 @@
 
 <style lang="scss">
 .icon-button {
-	display: inline-flex;
+	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex: 0 0 auto;

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -1,15 +1,14 @@
 <template>
-	<div class="popover-button">
+	<LayoutRow class="popover-button">
 		<IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner />
 		<FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu">
 			<slot></slot>
 		</FloatingMenu>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .popover-button {
-	display: inline-block;
 	position: relative;
 	width: 16px;
 	height: 24px;
@@ -17,6 +16,7 @@
 
 	.floating-menu {
 		left: 50%;
+		bottom: 0;
 	}
 
 	.icon-button {
@@ -51,6 +51,7 @@ import { defineComponent, PropType } from "vue";
 
 import { PopoverButtonIcon } from "@/utilities/widgets";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
@@ -58,6 +59,7 @@ export default defineComponent({
 	components: {
 		FloatingMenu,
 		IconButton,
+		LayoutRow,
 	},
 	props: {
 		action: { type: Function as PropType<() => void>, required: false },

frontend/src/components/widgets/buttons/TextButton.vue

@@ -6,7 +6,6 @@
 
 <style lang="scss">
 .text-button {
-	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 	flex: 0 0 auto;

frontend/src/components/widgets/floating-menus/ColorPicker.vue

@@ -1,22 +1,21 @@
 <template>
-	<div class="color-picker">
-		<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
+	<LayoutRow class="color-picker">
+		<LayoutCol class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="saturationCursor" class="selection-circle"></div>
-		</div>
-		<div class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
+		</LayoutCol>
+		<LayoutCol class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="hueCursor" class="selection-pincers"></div>
-		</div>
-		<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
+		</LayoutCol>
+		<LayoutCol class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="opacityCursor" class="selection-pincers"></div>
-		</div>
-	</div>
+		</LayoutCol>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .color-picker {
 	--saturation-picker-hue: #ff0000;
 	--opacity-picker-color: #ff0000;
-	display: flex;
 
 	.saturation-picker {
 		width: 256px;
@@ -51,15 +50,15 @@
 
 		&::before {
 			content: "";
-			display: block;
 			width: 100%;
 			height: 100%;
+			z-index: -1;
+			position: relative;
+			// Checkered transparent pattern
 			background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
 				linear-gradient(#ffffff, #ffffff);
 			background-size: 16px 16px;
 			background-position: 0 0, 8px 8px;
-			position: relative;
-			z-index: -1;
 		}
 	}
 
@@ -123,6 +122,9 @@ import { RGBA } from "@/dispatcher/js-messages";
 import { hsvaToRgba, rgbaToHsva } from "@/utilities/color";
 import { clamp } from "@/utilities/math";
 
+import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
 type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation";
 
 // TODO: Clean up the fundamental code design in this file to simplify it and use better practices.
@@ -157,13 +159,22 @@ export default defineComponent({
 			document.removeEventListener("pointerup", this.onPointerUp);
 		},
 		onPointerDown(e: PointerEvent) {
-			if (!(e.currentTarget instanceof HTMLElement)) return;
+			const saturationPicker = this.$refs.saturationPicker as typeof LayoutCol;
+			const saturationPickerElement = saturationPicker && (saturationPicker.$el as HTMLElement);
 
-			if ((this.$refs.saturationPicker as HTMLElement).contains(e.currentTarget)) {
+			const huePicker = this.$refs.huePicker as typeof LayoutCol;
+			const huePickerElement = huePicker && (huePicker.$el as HTMLElement);
+
+			const opacityPicker = this.$refs.opacityPicker as typeof LayoutCol;
+			const opacityPickerElement = opacityPicker && (opacityPicker.$el as HTMLElement);
+
+			if (!(e.currentTarget instanceof HTMLElement) || !saturationPickerElement || !huePickerElement || !opacityPickerElement) return;
+
+			if (saturationPickerElement.contains(e.currentTarget)) {
 				this.state = "MoveSaturation";
-			} else if ((this.$refs.huePicker as HTMLElement).contains(e.currentTarget)) {
+			} else if (huePickerElement.contains(e.currentTarget)) {
 				this.state = "MoveHue";
-			} else if ((this.$refs.opacityPicker as HTMLElement).contains(e.currentTarget)) {
+			} else if (opacityPickerElement.contains(e.currentTarget)) {
 				this.state = "MoveOpacity";
 			} else {
 				this.state = "Idle";
@@ -191,6 +202,7 @@ export default defineComponent({
 			}
 
 			this.updateHue();
+
 			// The `color` prop's watcher calls `this.updateColor()`
 			this.$emit("update:color", hsvaToRgba(this.pickerHSVA));
 		},
@@ -198,12 +210,23 @@ export default defineComponent({
 			if (this.state === "Idle") return;
 
 			this.state = "Idle";
+
 			this.removeEvents();
 		},
 		updateRects() {
+			const saturationPicker = this.$refs.saturationPicker as typeof LayoutCol;
+			const saturationPickerElement = saturationPicker && (saturationPicker.$el as HTMLElement);
+
+			const huePicker = this.$refs.huePicker as typeof LayoutCol;
+			const huePickerElement = huePicker && (huePicker.$el as HTMLElement);
+
+			const opacityPicker = this.$refs.opacityPicker as typeof LayoutCol;
+			const opacityPickerElement = opacityPicker && (opacityPicker.$el as HTMLElement);
+
+			if (!saturationPickerElement || !huePickerElement || !opacityPickerElement) return;
+
 			// Saturation
-			const saturationPicker = this.$refs.saturationPicker as HTMLElement;
-			const saturation = saturationPicker.getBoundingClientRect();
+			const saturation = saturationPickerElement.getBoundingClientRect();
 
 			this.pickerSaturationRect.width = saturation.width;
 			this.pickerSaturationRect.height = saturation.height;
@@ -211,8 +234,7 @@ export default defineComponent({
 			this.pickerSaturationRect.top = saturation.top;
 
 			// Hue
-			const huePicker = this.$refs.huePicker as HTMLElement;
-			const hue = huePicker.getBoundingClientRect();
+			const hue = huePickerElement.getBoundingClientRect();
 
 			this.pickerHueRect.width = hue.width;
 			this.pickerHueRect.height = hue.height;
@@ -220,8 +242,7 @@ export default defineComponent({
 			this.pickerHueRect.top = hue.top;
 
 			// Opacity
-			const opacityPicker = this.$refs.opacityPicker as HTMLElement;
-			const opacity = opacityPicker.getBoundingClientRect();
+			const opacity = opacityPickerElement.getBoundingClientRect();
 
 			this.pickerOpacityRect.width = opacity.width;
 			this.pickerOpacityRect.height = opacity.height;
@@ -275,5 +296,9 @@ export default defineComponent({
 			this.updateHue();
 		},
 	},
+	components: {
+		LayoutRow,
+		LayoutCol,
+	},
 });
 </script>

frontend/src/components/widgets/floating-menus/DialogModal.vue

@@ -1,21 +1,19 @@
 <template>
-	<div class="dialog-modal">
-		<FloatingMenu :type="'Dialog'" :direction="'Center'">
-			<LayoutRow>
-				<LayoutCol class="icon-column">
-					<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
-					<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
-				</LayoutCol>
-				<LayoutCol class="main-column">
-					<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
-					<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
-					<LayoutRow class="buttons-row" v-if="dialog.state.buttons.length > 0">
-						<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback && button.callback()" v-bind="button.props" />
-					</LayoutRow>
-				</LayoutCol>
-			</LayoutRow>
-		</FloatingMenu>
-	</div>
+	<FloatingMenu class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
+		<LayoutRow>
+			<LayoutCol class="icon-column">
+				<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
+				<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
+			</LayoutCol>
+			<LayoutCol class="main-column">
+				<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
+				<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
+				<LayoutRow class="buttons-row" v-if="dialog.state.buttons.length > 0">
+					<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback && button.callback()" v-bind="button.props" />
+				</LayoutRow>
+			</LayoutCol>
+		</LayoutRow>
+	</FloatingMenu>
 </template>
 
 <style lang="scss">
@@ -25,11 +23,6 @@
 	width: 100%;
 	height: 100%;
 
-	.dialog {
-		width: 100%;
-		height: 100%;
-	}
-
 	.floating-menu-container .floating-menu-content {
 		pointer-events: auto;
 		padding: 24px;

frontend/src/components/widgets/floating-menus/FloatingMenu.vue

@@ -2,7 +2,7 @@
 	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === 'Dialog'" ref="floatingMenu">
 		<div class="tail" v-if="type === 'Popover'"></div>
 		<div class="floating-menu-container" ref="floatingMenuContainer">
-			<LayoutCol class="floating-menu-content" :scrollableY="scrollableY" ref="floatingMenuContent" :style="floatingMenuContentStyle">
+			<LayoutCol class="floating-menu-content" data-floating-menu-content :scrollableY="scrollableY" ref="floatingMenuContent" :style="floatingMenuContentStyle">
 				<slot></slot>
 			</LayoutCol>
 		</div>
@@ -45,8 +45,6 @@
 			font-size: inherit;
 			padding: 8px;
 			z-index: 0;
-			display: flex;
-			flex-direction: column;
 			// Draw over the application without being clipped by the containing panel's `overflow: hidden`
 			position: fixed;
 		}
@@ -196,7 +194,7 @@ export default defineComponent({
 	},
 	data() {
 		const containerResizeObserver = new ResizeObserver((entries) => {
-			const content = entries[0].target.querySelector(".floating-menu-content") as HTMLElement;
+			const content = entries[0].target.querySelector("[data-floating-menu-content]") as HTMLElement;
 			content.style.minWidth = `${entries[0].contentRect.width}px`;
 		});
 		return {
@@ -209,7 +207,7 @@ export default defineComponent({
 		const floatingMenuContainer = this.$refs.floatingMenuContainer as HTMLElement;
 		const floatingMenuContentComponent = this.$refs.floatingMenuContent as typeof LayoutCol;
 		const floatingMenuContent = floatingMenuContentComponent && (floatingMenuContentComponent.$el as HTMLElement);
-		const workspace = document.querySelector(".workspace-row");
+		const workspace = document.querySelector("[data-workspace]");
 
 		if (!floatingMenuContainer || !floatingMenuContentComponent || !floatingMenuContent || !workspace) return;
 
@@ -346,7 +344,7 @@ export default defineComponent({
 		},
 		isPointerEventOutsideFloatingMenu(e: PointerEvent, extraDistanceAllowed = 0): boolean {
 			// Considers all child menus as well as the top-level one.
-			const allContainedFloatingMenus = [...this.$el.querySelectorAll(".floating-menu-content")];
+			const allContainedFloatingMenus = [...this.$el.querySelectorAll("[data-floating-menu-content]")];
 			return !allContainedFloatingMenus.find((element) => !this.isPointerEventOutsideMenuElement(e, element, extraDistanceAllowed));
 		},
 		isPointerEventOutsideMenuElement(e: PointerEvent, element: HTMLElement, extraDistanceAllowed = 0): boolean {

frontend/src/components/widgets/floating-menus/MenuList.vue

@@ -2,7 +2,7 @@
 	<FloatingMenu class="menu-list" :direction="direction" :type="'Dropdown'" ref="floatingMenu" :windowEdgeMargin="0" :scrollableY="scrollableY" data-hover-menu-keep-open>
 		<template v-for="(section, sectionIndex) in menuEntries" :key="sectionIndex">
 			<Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" />
-			<div
+			<LayoutRow
 				v-for="(entry, entryIndex) in section"
 				:key="entryIndex"
 				class="row"
@@ -31,7 +31,7 @@
 					v-bind="{ defaultAction, minWidth, drawIcon, scrollableY }"
 					:ref="(ref: any) => setEntryRefs(entry, ref)"
 				/>
-			</div>
+			</LayoutRow>
 		</template>
 	</FloatingMenu>
 </template>
@@ -43,7 +43,6 @@
 
 		.row {
 			height: 20px;
-			display: flex;
 			align-items: center;
 			white-space: nowrap;
 			position: relative;
@@ -134,6 +133,7 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utilities/icons";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -263,9 +263,7 @@ const MenuList = defineComponent({
 		},
 	},
 	data() {
-		return {
-			keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
-		};
+		return { keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER };
 	},
 	components: {
 		FloatingMenu,
@@ -273,6 +271,7 @@ const MenuList = defineComponent({
 		IconLabel,
 		CheckboxInput,
 		UserInputLabel,
+		LayoutRow,
 	},
 });
 export default MenuList;

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

frontend/src/components/widgets/labels/IconLabel.vue

@@ -1,12 +1,11 @@
 <template>
-	<div class="icon-label" :class="`size-${icons[icon].size}`">
+	<LayoutRow class="icon-label" :class="`size-${icons[icon].size}`">
 		<component :is="icon" />
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .icon-label {
-	display: block;
 	flex: 0 0 auto;
 	fill: var(--color-e-nearwhite);
 
@@ -32,10 +31,11 @@ import { DefineComponent, defineComponent, PropType } from "vue";
 
 import { IconName, IconSize, ICON_LIST } from "@/utilities/icons";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
 const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
 
 export default defineComponent({
-	components: Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
 	props: {
 		icon: { type: String as PropType<IconName>, required: true },
 		gapAfter: { type: Boolean as PropType<boolean>, default: false },
@@ -45,5 +45,9 @@ export default defineComponent({
 			icons,
 		};
 	},
+	components: {
+		LayoutRow,
+		...Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
+	},
 });
 </script>

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="user-input-label">
+	<LayoutRow class="user-input-label">
 		<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
 			<span class="group-gap" v-if="keyGroupIndex > 0"></span>
 			<template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
@@ -15,14 +15,14 @@
 		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
 		</span>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .user-input-label {
+	flex: 0 0 auto;
 	height: 100%;
 	margin: 0 8px;
-	display: flex;
 	align-items: center;
 	white-space: nowrap;
 
@@ -39,6 +39,9 @@
 	}
 
 	.input-key {
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		font-family: "Inconsolata", monospace;
 		font-weight: 400;
 		text-align: center;
@@ -49,7 +52,7 @@
 		border-color: var(--color-7-middlegray);
 		border-radius: 4px;
 		height: 16px;
-		// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel with 15px makes them agree
+		// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel by using 15px makes them agree
 		line-height: 15px;
 
 		&.width-16 {
@@ -74,7 +77,6 @@
 
 		.icon-label {
 			margin: 1px;
-			display: inline-block;
 		}
 	}
 
@@ -101,10 +103,14 @@ import { HintInfo, KeysGroup } from "@/dispatcher/js-messages";
 
 import { IconName } from "@/utilities/icons";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
-	components: { IconLabel },
+	components: {
+		IconLabel,
+		LayoutRow,
+	},
 	props: {
 		inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
 		inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },

frontend/src/components/widgets/options/ToolOptions.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="tool-options">
+	<LayoutRow class="tool-options">
 		<template v-for="(option, index) in toolOptionsWidgets[activeTool] || []" :key="index">
 			<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
 			<IconButton v-if="option.kind === 'IconButton'" :action="() => handleIconButtonAction(option)" :title="option.tooltip" v-bind="option.props" />
@@ -16,14 +16,13 @@
 			/>
 			<Separator v-if="option.kind === 'Separator'" v-bind="option.props" />
 		</template>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .tool-options {
 	height: 100%;
 	flex: 0 0 auto;
-	display: flex;
 	align-items: center;
 }
 </style>
@@ -34,6 +33,7 @@ import { defineComponent, PropType } from "vue";
 import { ToolName } from "@/dispatcher/js-messages";
 import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
@@ -182,6 +182,7 @@ export default defineComponent({
 		IconButton,
 		PopoverButton,
 		NumberInput,
+		LayoutRow,
 	},
 });
 </script>

frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue

@@ -15,7 +15,6 @@
 
 	.arrow {
 		flex: 0 0 auto;
-		display: block;
 		background: none;
 		outline: none;
 		border: none;