traxxx/assets/components/entities/children.vue

<template>
	<div class="children">
		<EntityTile
			v-for="child in entity.children"
			:key="`child-${child.id}`"
			:entity="child"
		/>
	</div>
</template>

<script>
import EntityTile from './tile.vue';

export default {
	components: {
		EntityTile,
	},
	props: {
		entity: {
			type: Object,
			default: null,
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.children {
	display: flex;
	box-sizing: border-box;
	padding: 1rem;
	margin: 0 1rem 0 0;
	border-bottom: solid 1px var(--darken-hint);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;

	.tile {
		width: 15rem;
		margin: 0 1rem 0 0;
	}

	&.expanded {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
		grid-gap: 1rem;
		margin: 0;

		.tile {
			width: 100%;
		}
	}

	&::-webkit-scrollbar {
		display: none;
	}
}

@media(max-width: $breakpoint0) {
	.children.expanded {
		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	}
}
</style>