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) {

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
+  @media (min-width: 1470px) {
-  // I will conquer this one day
+    grid-template-areas:
-  // grid-template-areas:
+      'content related'
-  //   'content content'
+      'info    related';
-  //   'info    related';
+  }
-  //
-  // @media (min-width: 1470px) {
-  //
-  // }
 
   .grid-area--content {
     grid-area: content;
-    max-width: var(--file-max-width);
   }
   .grid-area--info {
     grid-area: info;

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;

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-page-max-width: 1787px;
-  // --file-max-height: calc(var(--file-max-height) * 9 / 16);
   --file-max-height: 788px;
+  --file-max-width: 1400px;
 
   --video-aspect-ratio: 56.25%; // 9 x 16