From 19f22055162185d5f46d5916c82de3639de209a1 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 28 Sep 2018 14:37:04 +0200
Subject: Display other videos on xl screens on the right

---
 client/src/app/videos/+video-watch/video-watch.component.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'client/src/app/videos/+video-watch/video-watch.component.scss')

diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index eb63cbde7..f31e4694a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,5 +1,8 @@
 @import '_variables';
 @import '_mixins';
+@import '_bootstrap-variables';
+
+$other-videos-width: 260px;
 
 .root-row {
   flex-direction: column;
@@ -361,7 +364,7 @@
 
   /deep/ .other-videos {
     padding-left: 15px;
-    width: 260px;
+    width: $other-videos-width;
 
     .title-page {
       margin-top: 0 !important;
@@ -450,6 +453,11 @@ my-video-comments {
   }
 }
 
+@media screen and (min-width: map-get($grid-breakpoints, xl)) {
+  .video-bottom .video-info {
+    max-width: calc(100% - #{$other-videos-width});
+  }
+}
 
 @media screen and (max-width: 1600px) {
   .video-bottom .video-info .video-attributes .video-attribute {
-- 
cgit v1.2.3