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

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>