Hiding scroll buttons on small screens. Fixed channel count on overview.

assets/components/entities/entity.vue

@@ -52,6 +52,22 @@
 				v-if="entity.children.length > 0"
 				class="children-container"
 			>
+				<div
+					v-if="expanded"
+					class="expand noselect"
+					@click="expanded = !expanded"
+				>
+					<Icon
+						v-show="expanded"
+						icon="arrow-up3"
+					/>
+
+					<Icon
+						v-show="!expanded"
+						icon="arrow-down3"
+					/>
+				</div>
+
 				<div
 					class="scroll-container"
 					:class="{ expanded }"
@@ -83,7 +99,7 @@
 				</div>
 
 				<div
-					v-if="(scrollable && entity.children.length > 1) || expanded"
+					v-if="scrollable || expanded"
 					class="expand noselect"
 					@click="expanded = !expanded"
 				>
@@ -195,6 +211,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'theme';
+
 .info {
 	height: 2.5rem;
 	display: flex;
@@ -202,6 +220,7 @@ export default {
 	padding: 1rem;
 	background: var(--profile);
 	border-bottom: solid 1px var(--lighten-hint);
+	box-shadow: inset 0 0 3px var(--darken);
 
 	.link {
 		display: flex;
@@ -337,4 +356,10 @@ export default {
 	padding: 1rem 1rem 1rem 2rem;
 	background: linear-gradient(to left, var(--profile) 50%, transparent);
 }
+
+@media(max-width: $breakpoint) {
+	.scroll {
+		display: none;
+	}
+}
 </style>