Only show entity children expand when overflowing.

assets/components/entities/entity.vue

@@ -58,7 +58,7 @@
 				>
 					<div
 						class="scroll scroll-left noselect"
-						:class="{ unscrolled }"
+						:class="{ 'scroll-start': scrollAtStart }"
 						@click="scroll('left')"
 					><Icon icon="arrow-left3" /></div>
 
@@ -77,13 +77,13 @@
 
 					<div
 						class="scroll scroll-right noselect"
-						:class="{ scrolled }"
+						:class="{ 'scroll-end': scrollAtEnd }"
 						@click="scroll('right')"
 					><Icon icon="arrow-right3" /></div>
 				</div>
 
 				<div
-					v-if="entity.children.length > 1"
+					v-if="(scrollable && entity.children.length > 1) || expanded"
 					class="expand noselect"
 					@click="expanded = !expanded"
 				>
@@ -133,8 +133,9 @@ async function fetchEntity() {
 }
 
 function updateScroll() {
-	this.unscrolled = this.$refs.children.scrollLeft === 0;
-	this.scrolled = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
+	this.scrollable = this.$refs.children.scrollWidth > this.$refs.children.clientWidth;
+	this.scrollAtStart = this.$refs.children.scrollLeft === 0;
+	this.scrollAtEnd = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
 }
 
 function scroll(direction) {
@@ -175,8 +176,9 @@ export default {
 			totalCount: null,
 			limit: 10,
 			expanded: false,
-			unscrolled: true,
-			scrolled: false,
+			scrollable: true,
+			scrollAtStart: true,
+			scrollAtEnd: false,
 		};
 	},
 	watch: {
@@ -298,9 +300,14 @@ export default {
 	top: 0;
 	bottom: 0;
 
-	&.unscrolled,
-	&.scrolled {
+	&.scroll-start ,
+	&.scroll-end {
+		/* use over v-show so button stays visible while still hovered */
 		display: none;
+
+		.icon {
+			fill: var(--lighten-weak);
+		}
 	}
 
 	.icon {
@@ -311,8 +318,10 @@ export default {
 		display: flex;
 		cursor: pointer;
 
-		.icon {
-			fill: var(--text-light);
+		&:not(.scroll-start):not(.scroll-end) {
+			.icon {
+				fill: var(--text-light);
+			}
 		}
 	}
 }