Fix peertube container in markdown preview

client/src/app/shared/shared-custom-markup/custom-markup-container.component.scss

@@ -1,24 +0,0 @@
-.custom-markup-container {
-
-  ::ng-deep .peertube-container {
-
-    &.layout-row {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-
-    &.layout-column {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .header {
-      margin: 30px 0 15px;
-    }
-
-    h4 {
-      margin-bottom: 0;
-    }
-  }
-}

client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts

@@ -3,8 +3,7 @@ import { CustomMarkupService } from './custom-markup.service'
 
 @Component({
   selector: 'my-custom-markup-container',
-  templateUrl: './custom-markup-container.component.html',
-  styleUrls: [ './custom-markup-container.component.scss' ]
+  templateUrl: './custom-markup-container.component.html'
 })
 export class CustomMarkupContainerComponent implements OnChanges {
   @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>

client/src/sass/application.scss

@@ -11,6 +11,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 @use './classes';
 
+@use './custom-markup';
+
 [hidden] {
   display: none !important;
 }

client/src/sass/custom-markup.scss

@@ -0,0 +1,20 @@
+peertube-container {
+  > .layout-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  > .layout-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  > .header {
+    margin: 30px 0 15px;
+
+    > h4 {
+      margin-bottom: 0;
+    }
+  }
+}