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

frontend/src/App.vue

@@ -2,7 +2,7 @@
 	<MainWindow />
 
 	<div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
-		<div class="unsupported-modal">
+		<LayoutCol class="unsupported-modal">
 			<h2>Your browser currently doesn't support Graphite</h2>
 			<p>Unfortunately, some features won't work properly. Please upgrade to a modern browser such as Firefox, Chrome, Edge, or Safari version 15 or later.</p>
 			<p>
@@ -13,7 +13,7 @@
 			<LayoutRow>
 				<button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button>
 			</LayoutRow>
-		</div>
+		</LayoutCol>
 	</div>
 </template>
 
@@ -186,39 +186,43 @@ img {
 	left: 0;
 	bottom: 0;
 	right: 0;
+	display: flex;
 	align-items: center;
 	justify-content: center;
-	display: flex;
-}
 
-.unsupported-modal {
+	.unsupported-modal {
-	background: var(--color-3-darkgray);
+		background: var(--color-3-darkgray);
-	border-radius: 4px;
+		border-radius: 4px;
-	box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
+		box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
-	padding: 0 16px 16px 16px;
+		padding: 0 16px 16px 16px;
-	border: 1px solid var(--color-4-dimgray);
+		border: 1px solid var(--color-4-dimgray);
-	max-width: 500px;
+		max-width: 500px;
 
-	& a {
+		p {
-		color: var(--color-accent-hover);
+			margin-top: 0;
-	}
+		}
-}
 
-.unsupported-modal-button {
+		a {
-	flex: 1;
+			color: var(--color-accent-hover);
-	background: var(--color-1-nearblack);
+		}
-	border: 0 none;
-	padding: 12px;
-	border-radius: 2px;
 
-	&:hover {
+		.unsupported-modal-button {
-		background: var(--color-6-lowergray);
+			flex: 1;
-		color: var(--color-f-white);
+			background: var(--color-1-nearblack);
-	}
+			border: 0 none;
+			padding: 12px;
+			border-radius: 2px;
 
-	&:active {
+			&:hover {
-		background: var(--color-accent-hover);
+				background: var(--color-6-lowergray);
-		color: var(--color-f-white);
+				color: var(--color-f-white);
+			}
+
+			&:active {
+				background: var(--color-accent-hover);
+				color: var(--color-f-white);
+			}
+		}
 	}
 }
 </style>
@@ -234,6 +238,7 @@ import { createDocumentsState, DocumentsState } from "@/state/documents";
 import { createFullscreenState, FullscreenState } from "@/state/fullscreen";
 import { createEditorState, EditorState } from "@/state/wasm-loader";
 
+import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import MainWindow from "@/components/window/MainWindow.vue";
 
@@ -291,6 +296,10 @@ export default defineComponent({
 		const { editor } = this;
 		editor.instance.free();
 	},
-	components: { MainWindow, LayoutRow },
+	components: {
+		MainWindow,
+		LayoutRow,
+		LayoutCol,
+	},
 });
 </script>

frontend/src/components/layout/LayoutCol.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-col" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }">
+	<div class="layout-col" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || null" :data-scrollable-y="scrollableY || null">
 		<slot></slot>
 	</div>
 </template>

frontend/src/components/layout/LayoutRow.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-row" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }">
+	<div class="layout-row" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || null" :data-scrollable-y="scrollableY || null">
 		<slot></slot>
 	</div>
 </template>

frontend/src/components/panels/Document.vue

@@ -1,15 +1,17 @@
 <template>
 	<LayoutCol class="document">
 		<LayoutRow class="options-bar" :scrollableX="true">
-			<div class="left side">
+			<LayoutRow class="left side">
 				<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
 
 				<Separator :type="'Section'" />
 
 				<ToolOptions :activeTool="activeTool" :activeToolOptions="activeToolOptions" />
-			</div>
+			</LayoutRow>
-			<div class="spacer"></div>
+
-			<div class="right side">
+			<LayoutRow class="spacer"></LayoutRow>
+
+			<LayoutRow class="right side">
 				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(snap: boolean) => setSnapping(snap)" :icon="'Snapping'" title="Snapping" />
 				<PopoverButton>
 					<h3>Snapping</h3>
@@ -64,7 +66,7 @@
 					:displayDecimalPlaces="4"
 					ref="zoom"
 				/>
-			</div>
+			</LayoutRow>
 		</LayoutRow>
 		<LayoutRow class="shelf-and-viewport">
 			<LayoutCol class="shelf">
@@ -106,14 +108,14 @@
 					<ShelfItemInput icon="VectorShapeTool" title="Shape Tool (Y)" :active="activeTool === 'Shape'" :action="() => selectTool('Shape')" />
 				</LayoutCol>
 
-				<div class="spacer"></div>
+				<LayoutCol class="spacer"></LayoutCol>
 
 				<LayoutCol class="working-colors">
 					<SwatchPairInput />
-					<div class="swap-and-reset">
+					<LayoutRow class="swap-and-reset">
 						<IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
 						<IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
-					</div>
+					</LayoutRow>
 				</LayoutCol>
 			</LayoutCol>
 			<LayoutCol class="viewport">
@@ -125,7 +127,7 @@
 						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" />
 					</LayoutCol>
 					<LayoutCol class="canvas-area">
-						<div class="canvas" ref="canvas" :style="{ cursor: canvasCursor }" @pointerdown="(e: PointerEvent) => canvasPointerDown(e)">
+						<div class="canvas" data-canvas ref="canvas" :style="{ cursor: canvasCursor }" @pointerdown="(e: PointerEvent) => canvasPointerDown(e)">
 							<svg class="artboards" v-html="artboardSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
 							<svg class="artwork" v-html="artworkSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
 							<svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
@@ -168,7 +170,6 @@
 		.side {
 			height: 100%;
 			flex: 0 0 auto;
-			display: flex;
 			align-items: center;
 			margin: 0 4px;
 		}
@@ -181,8 +182,6 @@
 	.shelf-and-viewport {
 		.shelf {
 			flex: 0 0 auto;
-			display: flex;
-			flex-direction: column;
 
 			.tools {
 				flex: 0 1 auto;
@@ -198,7 +197,6 @@
 
 				.swap-and-reset {
 					flex: 0 0 auto;
-					display: flex;
 				}
 			}
 		}

frontend/src/components/panels/Minimap.vue

@@ -1,11 +0,0 @@
-<template>
-	<div></div>
-</template>
-
-<style lang="scss"></style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({});
-</script>

frontend/src/components/panels/Properties.vue

@@ -1,5 +1,5 @@
 <template>
-	<div></div>
+	<LayoutCol class="properties-panel"></LayoutCol>
 </template>
 
 <style lang="scss"></style>
@@ -7,5 +7,9 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({});
+import LayoutCol from "@/components/layout/LayoutCol.vue";
+
+export default defineComponent({
+	components: { LayoutCol },
+});
 </script>

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">
+	<LayoutRow class="color-picker">
-		<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
+		<LayoutCol class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="saturationCursor" class="selection-circle"></div>
-		</div>
+		</LayoutCol>
-		<div class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
+		<LayoutCol class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="hueCursor" class="selection-pincers"></div>
-		</div>
+		</LayoutCol>
-		<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
+		<LayoutCol class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
 			<div ref="opacityCursor" class="selection-pincers"></div>
-		</div>
+		</LayoutCol>
-	</div>
+	</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 = saturationPickerElement.getBoundingClientRect();
-			const saturation = saturationPicker.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 = huePickerElement.getBoundingClientRect();
-			const hue = huePicker.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 = opacityPickerElement.getBoundingClientRect();
-			const opacity = opacityPicker.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 class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
-		<FloatingMenu :type="'Dialog'" :direction="'Center'">
+		<LayoutRow>
-			<LayoutRow>
+			<LayoutCol class="icon-column">
-				<LayoutCol class="icon-column">
+				<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
-					<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
+				<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
-					<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
+			</LayoutCol>
-				</LayoutCol>
+			<LayoutCol class="main-column">
-				<LayoutCol class="main-column">
+				<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
-					<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
+				<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
-					<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
+				<LayoutRow class="buttons-row" v-if="dialog.state.buttons.length > 0">
-					<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" />
-						<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback && button.callback()" v-bind="button.props" />
+				</LayoutRow>
-					</LayoutRow>
+			</LayoutCol>
-				</LayoutCol>
+		</LayoutRow>
-			</LayoutRow>
+	</FloatingMenu>
-		</FloatingMenu>
-	</div>
 </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 {
+		return { keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER };
-			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">
+	<LayoutRow class="dropdown-input">
-		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+		<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">
+	<LayoutCol class="swatch-pair">
-		<div class="secondary swatch">
+		<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>
+		</LayoutRow>
-		<div class="primary swatch">
+		<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>
+		</LayoutRow>
-	</div>
+	</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;

frontend/src/components/window/MainWindow.vue

@@ -1,14 +1,10 @@
 <template>
 	<LayoutCol class="main-window">
-		<LayoutRow class="title-bar-row">
+		<TitleBar :platform="platform" :maximized="maximized" />
-			<TitleBar :platform="platform" :maximized="maximized" />
+
-		</LayoutRow>
+		<Workspace />
-		<LayoutRow class="workspace-row">
+
-			<Workspace />
+		<StatusBar />
-		</LayoutRow>
-		<LayoutRow class="status-bar-row">
-			<StatusBar />
-		</LayoutRow>
 	</LayoutCol>
 </template>
 
@@ -18,29 +14,12 @@
 	overflow: auto;
 	touch-action: none;
 }
-
-.title-bar-row {
-	height: 28px;
-	flex: 0 0 auto;
-}
-
-.workspace-row {
-	position: relative;
-	flex: 1 1 100%;
-}
-
-.status-bar-row {
-	flex: 0 0 auto;
-	// Prevents the creation of a scrollbar due to the child's negative margin
-	overflow: hidden;
-}
 </style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import StatusBar from "@/components/window/status-bar/StatusBar.vue";
 import TitleBar from "@/components/window/title-bar/TitleBar.vue";
 import Workspace from "@/components/workspace/Workspace.vue";
@@ -49,7 +28,6 @@ export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
 
 export default defineComponent({
 	components: {
-		LayoutRow,
 		LayoutCol,
 		TitleBar,
 		Workspace,

frontend/src/components/window/status-bar/StatusBar.vue

@@ -1,33 +1,42 @@
 <template>
-	<div class="status-bar">
+	<LayoutRow class="status-bar">
-		<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
+		<LayoutRow class="hint-groups">
-			<Separator :type="'Section'" v-if="index !== 0" />
+			<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
-			<template v-for="hint in hintGroup" :key="hint">
+				<Separator :type="'Section'" v-if="index !== 0" />
-				<span v-if="hint.plus" class="plus">+</span>
+				<template v-for="hint in hintGroup" :key="hint">
-				<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
+					<LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
+					<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
+				</template>
 			</template>
-		</template>
+		</LayoutRow>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .status-bar {
-	display: flex;
 	height: 24px;
-	margin: 0 -4px;
+	width: 100%;
+	flex: 0 0 auto;
 
-	.separator.section {
+	.hint-groups {
-		margin: 0;
+		flex: 0 0 auto;
-	}
+		max-width: 100%;
+		margin: 0 -4px;
+		overflow: hidden;
 
-	.plus {
+		.separator.section {
-		display: flex;
+			margin: 0;
-		align-items: center;
+		}
-		font-weight: 700;
-	}
 
-	.user-input-label + .user-input-label {
+		.plus {
-		margin-left: 0;
+			flex: 0 0 auto;
+			align-items: center;
+			font-weight: 700;
+		}
+
+		.user-input-label + .user-input-label {
+			margin-left: 0;
+		}
 	}
 }
 </style>
@@ -37,15 +46,12 @@ import { defineComponent } from "vue";
 
 import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 import Separator from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
 	inject: ["editor"],
-	components: {
-		UserInputLabel,
-		Separator,
-	},
 	data() {
 		return {
 			hintData: [] as HintData,
@@ -60,5 +66,10 @@ export default defineComponent({
 		this.editor.instance.select_tool("Path");
 		this.editor.instance.select_tool("Select");
 	},
+	components: {
+		UserInputLabel,
+		Separator,
+		LayoutRow,
+	},
 });
 </script>

frontend/src/components/window/title-bar/TitleBar.vue

@@ -1,32 +1,38 @@
 <template>
-	<div class="header-third">
+	<LayoutRow class="title-bar">
-		<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
+		<LayoutRow class="header-part">
-		<MenuBarInput v-if="platform !== 'Mac'" />
+			<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
-	</div>
+			<MenuBarInput v-if="platform !== 'Mac'" />
-	<div class="header-third">
+		</LayoutRow>
-		<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
+		<LayoutRow class="header-part">
-	</div>
+			<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
-	<div class="header-third">
+		</LayoutRow>
-		<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
+		<LayoutRow class="header-part">
-		<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
+			<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
-	</div>
+			<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
+		</LayoutRow>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
-.header-third {
+.title-bar {
-	display: flex;
+	height: 28px;
-	flex: 1 1 100%;
+	flex: 0 0 auto;
 
-	&:nth-child(1) {
+	.header-part {
-		justify-content: flex-start;
+		flex: 1 1 100%;
-	}
 
-	&:nth-child(2) {
+		&:nth-child(1) {
-		justify-content: center;
+			justify-content: flex-start;
-	}
+		}
 
-	&:nth-child(3) {
+		&:nth-child(2) {
-		justify-content: flex-end;
+			justify-content: center;
+		}
+
+		&:nth-child(3) {
+			justify-content: flex-end;
+		}
 	}
 }
 </style>
@@ -34,6 +40,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
 import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
 import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
@@ -59,6 +66,7 @@ export default defineComponent({
 		WindowButtonsWindows,
 		WindowButtonsMac,
 		WindowButtonsWeb,
+		LayoutRow,
 	},
 });
 </script>

frontend/src/components/window/title-bar/WindowButtonsMac.vue

@@ -1,24 +1,28 @@
 <template>
-	<div class="mac window-buttons">
+	<LayoutRow class="window-buttons mac">
 		<div class="close" title="Close"></div>
 		<div class="minimize" title="Minimize"></div>
 		<div class="zoom" title="Zoom"></div>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
-.mac.window-buttons {
+.window-buttons.mac {
-	display: flex;
+	flex: 0 0 auto;
 	align-items: center;
+	margin: 0 8px;
 
 	div {
-		display: flex;
+		flex: 0 0 auto;
 		align-items: center;
-		margin-left: 8px;
 		width: 11px;
 		height: 11px;
 		border-radius: 50%;
 
+		& + div {
+			margin-left: 8px;
+		}
+
 		&.close {
 			background: #ff5a52;
 		}
@@ -37,9 +41,12 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
 export default defineComponent({
 	props: {
 		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},
+	components: { LayoutRow },
 });
 </script>

frontend/src/components/window/title-bar/WindowButtonsWeb.vue

@@ -1,13 +1,13 @@
 <template>
-	<div class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
+	<LayoutRow class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
 		<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
 		<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .window-buttons-web {
-	display: flex;
+	flex: 0 0 auto;
 	align-items: center;
 	padding: 0 8px;
 
@@ -33,6 +33,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
@@ -52,6 +53,7 @@ export default defineComponent({
 	components: {
 		IconLabel,
 		TextLabel,
+		LayoutRow,
 	},
 });
 </script>

frontend/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -1,21 +1,21 @@
 <template>
-	<div class="windows window-button minimize" title="Minimize">
+	<LayoutRow class="window-button windows minimize" title="Minimize">
 		<IconLabel :icon="'WindowButtonWinMinimize'" />
-	</div>
+	</LayoutRow>
-	<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
+	<LayoutRow class="window-button windows maximize" title="Maximize" v-if="!maximized">
 		<IconLabel :icon="'WindowButtonWinMaximize'" />
-	</div>
+	</LayoutRow>
-	<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
+	<LayoutRow class="window-button windows restore-down" title="Restore Down" v-if="maximized">
 		<IconLabel :icon="'WindowButtonWinRestoreDown'" />
-	</div>
+	</LayoutRow>
-	<div class="windows window-button close" title="Close">
+	<LayoutRow class="window-button windows close" title="Close">
 		<IconLabel :icon="'WindowButtonWinClose'" />
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
-.windows.window-button {
+.window-button.windows {
-	display: flex;
+	flex: 0 0 auto;
 	align-items: center;
 	padding: 0 17px;
 
@@ -40,10 +40,14 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
-	components: { IconLabel },
+	components: {
+		IconLabel,
+		LayoutRow,
+	},
 	props: {
 		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},

frontend/src/components/window/title-bar/WindowTitle.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="window-title">
+	<LayoutRow class="window-title">
 		<span>{{ title }}</span>
-	</div>
+	</LayoutRow>
 </template>
 
 <style lang="scss">
 .window-title {
-	display: flex;
+	flex: 0 0 auto;
 	align-items: center;
 	white-space: nowrap;
 	padding: 0 8px;
@@ -16,9 +16,12 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
 export default defineComponent({
 	props: {
 		title: { type: String as PropType<string>, required: true },
 	},
+	components: { LayoutRow },
 });
 </script>

frontend/src/components/workspace/Panel.vue

@@ -1,10 +1,11 @@
 <template>
 	<LayoutCol class="panel">
-		<LayoutRow class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
+		<LayoutRow class="tab-bar" data-tab-bar :class="{ 'min-widths': tabMinWidths }">
 			<LayoutRow class="tab-group" :scrollableX="true">
-				<div
+				<LayoutRow
 					class="tab"
 					:class="{ active: tabIndex === tabActiveIndex }"
+					data-tab
 					v-for="(tabLabel, tabIndex) in tabLabels"
 					:key="tabIndex"
 					@click="(e) => (e && e.stopPropagation(), clickAction && clickAction(tabIndex))"
@@ -12,7 +13,7 @@
 				>
 					<span>{{ tabLabel }}</span>
 					<IconButton :action="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
-				</div>
+				</LayoutRow>
 			</LayoutRow>
 			<PopoverButton :icon="'VerticalEllipsis'">
 				<h3>Panel Options</h3>
@@ -55,9 +56,9 @@
 			}
 
 			.tab {
+				flex: 0 1 auto;
 				height: 100%;
 				padding: 0 8px;
-				display: flex;
 				align-items: center;
 				position: relative;
 
@@ -138,7 +139,6 @@
 	.panel-body {
 		background: var(--color-3-darkgray);
 		flex: 1 1 100%;
-		display: flex;
 		flex-direction: column;
 		min-height: 0;
 	}
@@ -152,7 +152,6 @@ import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import Document from "@/components/panels/Document.vue";
 import LayerTree from "@/components/panels/LayerTree.vue";
-import Minimap from "@/components/panels/Minimap.vue";
 import Properties from "@/components/panels/Properties.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
@@ -161,7 +160,6 @@ const panelComponents = {
 	Document,
 	Properties,
 	LayerTree,
-	Minimap,
 	IconButton,
 	PopoverButton,
 };

frontend/src/components/workspace/Workspace.vue

@@ -1,65 +1,68 @@
 <template>
-	<LayoutRow class="workspace-grid-subdivision">
+	<LayoutRow class="workspace" data-workspace>
-		<LayoutCol class="workspace-grid-subdivision">
+		<LayoutRow class="workspace-grid-subdivision">
-			<Panel
+			<LayoutCol class="workspace-grid-subdivision">
-				:panelType="'Document'"
+				<Panel
-				:tabCloseButtons="true"
+					:panelType="'Document'"
-				:tabMinWidths="true"
+					:tabCloseButtons="true"
-				:tabLabels="documents.state.documents.map((doc) => doc.displayName)"
+					:tabMinWidths="true"
-				:clickAction="
+					:tabLabels="documents.state.documents.map((doc) => doc.displayName)"
-					(tabIndex) => {
+					:clickAction="
-						const targetId = documents.state.documents[tabIndex].id;
+						(tabIndex) => {
-						editor.instance.select_document(targetId);
+							const targetId = documents.state.documents[tabIndex].id;
-					}
+							editor.instance.select_document(targetId);
-				"
+						}
-				:closeAction="
+					"
-					(tabIndex) => {
+					:closeAction="
-						const targetId = documents.state.documents[tabIndex].id;
+						(tabIndex) => {
-						editor.instance.close_document_with_confirmation(targetId);
+							const targetId = documents.state.documents[tabIndex].id;
-					}
+							editor.instance.close_document_with_confirmation(targetId);
-				"
+						}
-				:tabActiveIndex="documents.state.activeDocumentIndex"
+					"
-				ref="documentsPanel"
+					:tabActiveIndex="documents.state.activeDocumentIndex"
-			/>
+					ref="documentsPanel"
-		</LayoutCol>
+				/>
-		<LayoutCol class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutCol>
+			</LayoutCol>
-		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17">
+			<LayoutCol class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutCol>
-			<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
+			<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17">
-				<Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" />
+				<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
-			</LayoutRow>
+					<Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" />
-			<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutRow>
+				</LayoutRow>
-			<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
+				<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="resizePanel($event)"></LayoutRow>
-				<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
+				<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
-			</LayoutRow>
+					<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
-			<!-- <LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
+				</LayoutRow>
-			<LayoutRow class="workspace-grid-subdivision folded">
+			</LayoutCol>
-				<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
+		</LayoutRow>
-			</LayoutRow> -->
+		<DialogModal v-if="dialog.state.visible" />
-		</LayoutCol>
 	</LayoutRow>
-	<DialogModal v-if="dialog.state.visible" />
 </template>
 
 <style lang="scss">
-.workspace-grid-subdivision {
+.workspace {
-	min-height: 28px;
+	position: relative;
-	flex: 1 1 0;
+	flex: 1 1 100%;
 
-	&.folded {
+	.workspace-grid-subdivision {
-		flex-grow: 0;
+		min-height: 28px;
-		height: 0;
+		flex: 1 1 0;
-	}
-}
 
-.workspace-grid-resize-gutter {
+		&.folded {
-	flex: 0 0 4px;
+			flex-grow: 0;
-
+			height: 0;
-	&.layout-row {
+		}
-		cursor: ns-resize;
 	}
 
-	&.layout-col {
+	.workspace-grid-resize-gutter {
-		cursor: ew-resize;
+		flex: 0 0 4px;
+
+		&.layout-row {
+			cursor: ns-resize;
+		}
+
+		&.layout-col {
+			cursor: ew-resize;
+		}
 	}
 }
 </style>
@@ -139,7 +142,7 @@ export default defineComponent({
 		activeDocumentIndex(newIndex: number) {
 			this.$nextTick(() => {
 				const documentsPanel = this.$refs.documentsPanel as typeof Panel;
-				const newActiveTab = documentsPanel.$el.querySelectorAll(".tab-bar .tab-group .tab")[newIndex];
+				const newActiveTab = documentsPanel.$el.querySelectorAll("[data-tab-bar] [data-tab]")[newIndex];
 				newActiveTab.scrollIntoView();
 			});
 		},

frontend/src/lifetime/input.ts

@@ -105,8 +105,8 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	const onPointerDown = (e: PointerEvent): void => {
 		const { target } = e;
-		const inCanvas = target instanceof Element && target.closest(".canvas");
+		const inCanvas = target instanceof Element && target.closest("[data-canvas]");
-		const inDialog = target instanceof Element && target.closest(".dialog-modal .floating-menu-content");
+		const inDialog = target instanceof Element && target.closest("[data-dialog-modal] [data-floating-menu-content]");
 
 		if (dialog.dialogIsVisible() && !inDialog) {
 			dialog.dismissDialog();
@@ -139,9 +139,9 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	const onMouseScroll = (e: WheelEvent): void => {
 		const { target } = e;
-		const inCanvas = target instanceof Element && target.closest(".canvas");
+		const inCanvas = target instanceof Element && target.closest("[data-canvas]");
 
-		const horizontalScrollableElement = target instanceof Element && target.closest(".scrollable-x");
+		const horizontalScrollableElement = target instanceof Element && target.closest("[data-scrollable-x]");
 		if (horizontalScrollableElement && e.deltaY !== 0) {
 			horizontalScrollableElement.scrollTo(horizontalScrollableElement.scrollLeft + e.deltaY, 0);
 			return;
@@ -157,7 +157,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 	// Window events
 
 	const onWindowResize = (container: HTMLElement): void => {
-		const viewports = Array.from(container.querySelectorAll(".canvas"));
+		const viewports = Array.from(container.querySelectorAll("[data-canvas]"));
 		const boundsOfViewports = viewports.map((canvas) => {
 			const bounds = canvas.getBoundingClientRect();
 			return [bounds.left, bounds.top, bounds.right, bounds.bottom];