[BUGFIX] Fix totally broken playlist grid

Resources/Private/Templates/Youtube/Index.html

@@ -89,17 +89,19 @@
 		}"/>
 	</div>
 	<ul class="sg-video__list sg-video__list--playlist">
-		<f:for each="{feed}" as="feedItem" iteration="feedIterator">
-			<f:if condition="!{feedIterator.isFirst}">
-				<li class="sg-video__list-item">
-					<f:render section="videoItem" arguments="{
-						feed: feed,
-						feedItem: feedItem,
-						titleChars: settings.maxTitleChars,
-						descChars: settings.maxDescriptionChars }" />
-				</li>
-			</f:if>
-		</f:for>
+		<div>
+			<f:for each="{feed}" as="feedItem" iteration="feedIterator">
+				<f:if condition="!{feedIterator.isFirst}">
+					<li class="sg-video__list-item">
+						<f:render section="videoItem" arguments="{
+							feed: feed,
+							feedItem: feedItem,
+							titleChars: settings.maxTitleChars,
+							descChars: settings.maxDescriptionChars }" />
+					</li>
+				</f:if>
+			</f:for>
+		</div>
 	</ul>
 </f:section>
 

Resources/Public/Sass/Modules/_sg-video.scss

@@ -174,35 +174,36 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
 	&--playlist {
 		@media (min-width: $sg-video-screen-lg) {
 			display: grid;
+			gap: 20px;
 			grid-template-columns: 70% auto;
 			position: relative;
 		}
 	}
 
 	&__list--playlist {
-		overflow: auto;
 		display: flex;
 		flex-direction: row;
 		position: relative;
 
-		@media (max-width: $sg-video-screen-md-max) {
-			.sg-video__image {
-				width: auto;
-				max-height: 180px;
+		> div {
+			@media (max-width: $sg-video-screen-md-max) {
+				.sg-video__image {
+					width: auto;
+					max-height: 180px;
+				}
 			}
-		}
-
-		@media (min-width: $sg-video-screen-lg) {
-			position: absolute;
-			right: 0;
-			height: 100%;
-			width: 28%;
-			flex-direction: column;
-			flex-grow: 1;
-			justify-content: space-between;
 
-			.sg-video__list-item:not(:last-child) {
-				margin-bottom: 15px;
+			@media (min-width: $sg-video-screen-lg) {
+				position: absolute;
+				height: 100%;
+				overflow-y: auto;
+				flex-direction: column;
+				flex-grow: 1;
+				justify-content: space-between;
+
+				.sg-video__list-item:not(:last-child) {
+					margin-bottom: 15px;
+				}
 			}
 		}