diff --git a/scripts/hud/customizer.ts b/scripts/hud/customizer.ts
index 62795771..0adfe1f3 100644
--- a/scripts/hud/customizer.ts
+++ b/scripts/hud/customizer.ts
@@ -351,6 +351,50 @@ namespace HudCustomizer {
 		$.UnregisterEventHandler('DragStart', panels.virtual, dragStartHandle);
 	}
 
+	function onComponentMouseOver(component: Component) {
+		if (activeComponent && activeComponent === component) return;
+
+		activeComponent?.panel.RemoveClass('hud-customizable--active');
+
+		activeComponent = component;
+
+		activeComponent.panel.AddClass('hud-customizable--active');
+
+		const [position, size] = LayoutUtil.getPositionAndSize(component.panel);
+
+		// Set the virtual panel's position and size to the component we just hovered over
+		LayoutUtil.setPositionAndSize(panels.virtual, position, size);
+
+		updateResizeKnobs(position, size);
+
+		// This is going to be weird to localise, but I guess we could do it, probably in V2 when we can
+		// define the locale string in the `customisable` XML property.
+		panels.virtualName.text = activeComponent.panel.id;
+		// TODO: This text looks TERRIBLE. Better to just have a constant size text for every component
+		// place text above component (left-aligned)
+		const stupidFontSizeThing = Math.min(
+			LayoutUtil.getHeight(activeComponent.panel) / 2,
+			LayoutUtil.getWidth(activeComponent.panel) / 2
+		);
+
+		panels.virtualName.style.fontSize = stupidFontSizeThing;
+
+		snaps[0][activeComponent.snaps[0]].button.SetSelected(true);
+		snaps[1][activeComponent.snaps[1]].button.SetSelected(true);
+
+		if (dragStartHandle) {
+			$.UnregisterEventHandler('DragStart', panels.virtual, dragStartHandle);
+		}
+		if (dragEndHandle) {
+			$.UnregisterEventHandler('DragEnd', panels.virtual, dragEndHandle);
+		}
+
+		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) =>
+			onStartDrag(DragMode.MOVE, panels.virtual, ...args)
+		);
+		dragEndHandle = $.RegisterEventHandler('DragEnd', panels.virtual, () => onEndDrag());
+	}
+
 	function onStartDrag(mode, displayPanel, _source, callback) {
 		if (!activeComponent) return;
 
@@ -367,28 +411,6 @@ namespace HudCustomizer {
 		callback.removePositionBeforeDrop = false;
 	}
 
-	function onEndDrag() {
-		if (!activeComponent) return;
-
-		onDragThink();
-
-		$.UnregisterEventHandler('HudThink', $.GetContextPanel(), onThinkHandle);
-
-		LayoutUtil.setPositionAndSize(panels.virtual, activeComponent.position, activeComponent.size);
-		updateResizeKnobs(activeComponent.position, activeComponent.size);
-
-		activeComponent.panel.RemoveClass('hud-customizable--dragging');
-		panels.virtual.RemoveClass('hud-customizer-virtual--dragging');
-
-		activeGridlines?.forEach((line) => line?.panel.RemoveClass('hud-customizer__gridline--highlight'));
-		activeGridlines = [undefined, undefined];
-
-		// TODO: this is just for testing
-		save();
-
-		dragMode = undefined;
-	}
-
 	function onDragThink() {
 		if (!activeComponent || dragMode === undefined) return;
 
@@ -451,6 +473,28 @@ namespace HudCustomizer {
 		updateResizeKnobs(panelPos, panelSize);
 	}
 
+	function onEndDrag() {
+		if (!activeComponent) return;
+
+		onDragThink();
+
+		$.UnregisterEventHandler('HudThink', $.GetContextPanel(), onThinkHandle);
+
+		LayoutUtil.setPositionAndSize(panels.virtual, activeComponent.position, activeComponent.size);
+		updateResizeKnobs(activeComponent.position, activeComponent.size);
+
+		activeComponent.panel.RemoveClass('hud-customizable--dragging');
+		panels.virtual.RemoveClass('hud-customizer-virtual--dragging');
+
+		activeGridlines?.forEach((line) => line?.panel.RemoveClass('hud-customizer__gridline--highlight'));
+		activeGridlines = [undefined, undefined];
+
+		// TODO: this is just for testing
+		save();
+
+		dragMode = undefined;
+	}
+
 	function updateResizeKnobs(position, size) {
 		const width = size[0];
 		const height = size[1];
@@ -497,50 +541,6 @@ namespace HudCustomizer {
 		}
 	}
 
-	function onComponentMouseOver(component: Component) {
-		if (activeComponent && activeComponent === component) return;
-
-		activeComponent?.panel.RemoveClass('hud-customizable--active');
-
-		activeComponent = component;
-
-		activeComponent.panel.AddClass('hud-customizable--active');
-
-		const [position, size] = LayoutUtil.getPositionAndSize(component.panel);
-
-		// Set the virtual panel's position and size to the component we just hovered over
-		LayoutUtil.setPositionAndSize(panels.virtual, position, size);
-
-		updateResizeKnobs(position, size);
-
-		// This is going to be weird to localise, but I guess we could do it, probably in V2 when we can
-		// define the locale string in the `customisable` XML property.
-		panels.virtualName.text = activeComponent.panel.id;
-		// TODO: This text looks TERRIBLE. Better to just have a constant size text for every component
-		// place text above component (left-aligned)
-		const stupidFontSizeThing = Math.min(
-			LayoutUtil.getHeight(activeComponent.panel) / 2,
-			LayoutUtil.getWidth(activeComponent.panel) / 2
-		);
-
-		panels.virtualName.style.fontSize = stupidFontSizeThing;
-
-		snaps[0][activeComponent.snaps[0]].button.SetSelected(true);
-		snaps[1][activeComponent.snaps[1]].button.SetSelected(true);
-
-		if (dragStartHandle) {
-			$.UnregisterEventHandler('DragStart', panels.virtual, dragStartHandle);
-		}
-		if (dragEndHandle) {
-			$.UnregisterEventHandler('DragEnd', panels.virtual, dragEndHandle);
-		}
-
-		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) =>
-			onStartDrag(DragMode.MOVE, panels.virtual, ...args)
-		);
-		dragEndHandle = $.RegisterEventHandler('DragEnd', panels.virtual, () => onEndDrag());
-	}
-
 	function getNearestGridLine(axis: Axis, sizeFactor: number): Gridline {
 		const isX = axis === Axis.X;