Display other videos on xl screens on the right

4 files changed, 43 insertions, 34 deletions

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 {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 40a9ed231..e2271d7d9 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -339,7 +339,7 @@ table {
   font-weight: $font-semibold;
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 1600px) {
   .main-col {
     &.expanded {
       .margin-content {
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
new file mode 100644
index 000000000..ce2532af5
--- /dev/null
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -0,0 +1,32 @@
+$dropdown-link-active-bg: inherit;
+
+$zindex-modal: 10005;
+$modal-footer-border-width: 0;
+$modal-md: 600px;
+
+$grid-breakpoints: (
+  // Extra small screen / phone
+  xs: 0,
+  // Small screen / phone
+  sm: 576px,
+  // Medium screen / tablet
+  md: 768px,
+  // Large screen / desktop
+  lg: 900px,
+  // Extra large screen / wide desktop
+  xl: 1200px
+);
+
+$container-max-widths: (
+  sm: 420px,
+  md: 720px,
+  lg: 900px,
+  xl: 1140px
+);
+
+$input-btn-focus-width: 0;
+$input-btn-focus-color: inherit;
+$input-focus-border-color: #ced4da;
+
+$nav-pills-link-active-bg: #F0F0F0;
+$nav-pills-link-active-color: #000;
\ No newline at end of file
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 7bce85c37..9c7464873 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,35 +1,4 @@
-$dropdown-link-active-bg: inherit;
-
-$zindex-modal: 10005;
-$modal-footer-border-width: 0;
-$modal-md: 600px;
-
-$grid-breakpoints: (
-  // Extra small screen / phone
-  xs: 0,
-  // Small screen / phone
-  sm: 576px,
-  // Medium screen / tablet
-  md: 768px,
-  // Large screen / desktop
-  lg: 900px,
-  // Extra large screen / wide desktop
-  xl: 1200px
-);
-
-$container-max-widths: (
-  sm: 420px,
-  md: 720px,
-  lg: 900px,
-  xl: 1140px
-);
-
-$input-btn-focus-width: 0;
-$input-btn-focus-color: inherit;
-$input-focus-border-color: #ced4da;
-
-$nav-pills-link-active-bg: #F0F0F0;
-$nav-pills-link-active-color: #000;
+@import "./_bootstrap-variables";
 
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';