From 0584dad3b39251b0dfb2d8847954439a3c80acb0 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 24 Jan 2019 13:09:27 -0500
Subject: [PATCH] fix: responsive layout on file page

---
 src/renderer/scss/component/_content.scss     |  2 +-
 src/renderer/scss/component/_main.scss        | 23 ++++++++-----------
 .../scss/component/_markdown-preview.scss     |  1 +
 src/renderer/scss/init/_vars.scss             |  4 ++--
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index 82e564907..8b52686af 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -18,7 +18,7 @@
   position: absolute;
   background-position: 50% 50%;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 100%;
   margin: auto;
 
   &:not(.card__media--nsfw) {
diff --git a/src/renderer/scss/component/_main.scss b/src/renderer/scss/component/_main.scss
index afa84e461..577fa6f39 100644
--- a/src/renderer/scss/component/_main.scss
+++ b/src/renderer/scss/component/_main.scss
@@ -14,28 +14,23 @@
 }
 
 .main--file-page {
-  max-width: 1787px;
+  max-width: var(--file-page-max-width);
   display: grid;
-  grid-template-areas:
-    'content related'
-    'info    related';
   grid-gap: var(--spacing-vertical-large);
   grid-template-rows: auto 1fr;
   grid-template-columns: 1fr auto;
+  grid-template-areas:
+    'content content'
+    'info    related';
 
-  // TODO: Get responsive grid working, to many issues with different thumbnails messing stuff up on small screens with the file taking up the full width
-  // I will conquer this one day
-  // grid-template-areas:
-  //   'content content'
-  //   'info    related';
-  //
-  // @media (min-width: 1470px) {
-  //
-  // }
+  @media (min-width: 1470px) {
+    grid-template-areas:
+      'content related'
+      'info    related';
+  }
 
   .grid-area--content {
     grid-area: content;
-    max-width: var(--file-max-width);
   }
   .grid-area--info {
     grid-area: info;
diff --git a/src/renderer/scss/component/_markdown-preview.scss b/src/renderer/scss/component/_markdown-preview.scss
index 48c967b81..5de66b942 100644
--- a/src/renderer/scss/component/_markdown-preview.scss
+++ b/src/renderer/scss/component/_markdown-preview.scss
@@ -17,6 +17,7 @@
     font-size: 1.15rem;
     margin-bottom: var(--spacing-vertical-medium);
     white-space: pre-line;
+    word-break: break-all;
 
     svg {
       width: 1rem;
diff --git a/src/renderer/scss/init/_vars.scss b/src/renderer/scss/init/_vars.scss
index 00cf41f6a..2edb526e3 100644
--- a/src/renderer/scss/init/_vars.scss
+++ b/src/renderer/scss/init/_vars.scss
@@ -18,9 +18,9 @@ $large-breakpoint: 1921px;
   --spacing-vertical-medium: calc(2rem / 2);
   --spacing-vertical-large: 2rem;
 
-  --file-max-width: 1400px;
-  // --file-max-height: calc(var(--file-max-height) * 9 / 16);
+  --file-page-max-width: 1787px;
   --file-max-height: 788px;
+  --file-max-width: 1400px;
 
   --video-aspect-ratio: 56.25%; // 9 x 16