Improved release media layout.

assets/components/scroll/scroll.vue

@@ -7,43 +7,45 @@
 			@expand="(state) => expanded = state"
 		/>
 
-		<Expand
-			v-if="expanded"
-			:expanded="expanded"
-			class="expand-light"
-			@expand="(state) => expanded = state"
-		/>
+		<div class="scrollable">
+			<Expand
+				v-if="expanded"
+				:expanded="expanded"
+				class="expand-light"
+				@expand="(state) => expanded = state"
+			/>
 
-		<div
-			v-show="enabled && !expanded"
-			class="scroll-button scroll-left noselect"
-			:class="{ 'scroll-start': scrollAtStart }"
-			@click="scroll('left')"
-		><Icon icon="arrow-left3" /></div>
+			<div
+				v-show="enabled && !expanded"
+				class="scroll-button scroll-left noselect"
+				:class="{ 'scroll-start': scrollAtStart }"
+				@click="scroll('left')"
+			><Icon icon="arrow-left3" /></div>
 
-		<slot v-if="!expanded" />
+			<slot v-if="!expanded" />
 
-		<slot
-			v-if="expanded"
-			name="expanded"
-		/>
+			<slot
+				v-if="expanded"
+				name="expanded"
+			/>
 
-		<div
-			v-show="enabled && !expanded"
-			class="scroll-button scroll-right noselect"
-			:class="{ 'scroll-end': scrollAtEnd }"
-			@click="scroll('right')"
-		><Icon icon="arrow-right3" /></div>
+			<div
+				v-show="enabled && !expanded"
+				class="scroll-button scroll-right noselect"
+				:class="{ 'scroll-end': scrollAtEnd }"
+				@click="scroll('right')"
+			><Icon icon="arrow-right3" /></div>
+		</div>
 
 		<Expand
-			v-if="expandable && scrollable"
+			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
 			class="expand-dark"
 			@expand="(state) => expanded = state"
 		/>
 
 		<Expand
-			v-if="expandable && scrollable"
+			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
 			class="expand-light"
 			@expand="(state) => expanded = state"
@@ -78,6 +80,8 @@ function mounted() {
 	});
 
 	window.addEventListener('resize', this.updateScroll);
+
+	this.updateScroll();
 	setTimeout(() => this.updateScroll(), 500); // allow CSS to calculate
 }
 
@@ -86,6 +90,10 @@ function beforeDestroy() {
 	window.removeEventListener('resize', this.updateScroll);
 }
 
+function updated() {
+	this.updateScroll();
+}
+
 export default {
 	components: {
 		Expand,
@@ -110,6 +118,7 @@ export default {
 		};
 	},
 	mounted,
+	updated,
 	beforeDestroy,
 	methods: {
 		scroll,
@@ -123,8 +132,6 @@ export default {
 
 .scroll {
 	background: var(--profile);
-	position: relative;
-	padding: 0 1rem 0 0;
 
 	&.expanded {
 		padding: 0;
@@ -135,6 +142,10 @@ export default {
 	}
 }
 
+.scrollable {
+	position: relative;
+}
+
 .expand-light {
 	display: none;
 }