+
+@media screen and (max-width: $small-view) {
+ .videos-header {
+ flex-direction: column;
+ }
+
+ .action-button {
+ flex-direction: column;
+ align-self: center;
+ margin-left: 0px;
+ }
+
+ ::ng-deep {
+ .video-miniature {
+ align-items: center;
+
+ .video-bottom,
+ .video-bottom .video-miniature-information {
+ /* same width than a.video-thumbnail */
+ max-width: $video-thumbnail-width !important;
+ }
+ }
+ }
+
+ my-delete-button,
+ my-edit-button {
+ margin-right: 0px;
+
+ ::ng-deep {
+ span, a {
+ margin-right: 0px;
+ }
+ }
+ }
+
+ my-delete-button,
+ my-edit-button,
+ my-button {
+ margin-top: 15px;
+ width: 100%;
+ text-align: center;
+
+ ::ng-deep {
+ .action-button {
+ /* same width than a.video-thumbnail */
+ width: $video-thumbnail-width;
+ }
+ }
+ }
+}
+
+// Adapt my-video-miniature on small screens with menu
+@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
+ :host-context(.main-col:not(.expanded)) {
+ ::ng-deep {
+ .video-miniature {
+ flex-direction: column;
+
+ .video-miniature-name {
+ max-width: $video-thumbnail-width;
+ }
+ }
+ }
+ }
+}