responsive realted column

src/renderer/component/page/view.jsx

@@ -12,8 +12,8 @@ type Props = {
   noPadding: ?boolean,
   extraPadding: ?boolean,
   notContained: ?boolean, // No max-width, but keep the padding
-  forContent: ?boolean,
   loading: ?boolean,
+  className: ?string,
 };
 
 type State = {
@@ -79,17 +79,16 @@ class Page extends React.PureComponent<Props, State> {
       extraPadding,
       notContained,
       loading,
-      forContent,
+      className,
     } = this.props;
     const { showLoader } = this.state;
 
     return (
       <main
-        className={classnames('main', {
-          'main--contained': !notContained && !noPadding && !extraPadding && !forContent,
+        className={classnames('main', className, {
+          'main--contained': !notContained && !noPadding && !extraPadding,
           'main--no-padding': noPadding,
           'main--extra-padding': extraPadding,
-          'main--for-content': forContent,
         })}
       >
         {pageTitle && (

src/renderer/page/file/view.jsx

@@ -158,24 +158,26 @@ class FilePage extends React.Component<Props> {
     }
 
     return (
-      <Page forContent>
-        {showFile && <FileViewer className="content__embedded" uri={uri} mediaType={mediaType} />}
-        {!showFile &&
-          (thumbnail ? (
-            <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
-          ) : (
-            <div
-              className={classnames('content__empty', {
-                'content__empty--nsfw': shouldObscureThumbnail,
-              })}
-            >
-              <div className="card__media-text">
-                {__("Sorry, looks like we can't preview this file.")}
+      <Page notContained className="main--file-page">
+        <div className="grid-area--content">
+          {showFile && <FileViewer className="content__embedded" uri={uri} mediaType={mediaType} />}
+          {!showFile &&
+            (thumbnail ? (
+              <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
+            ) : (
+              <div
+                className={classnames('content__empty', {
+                  'content__empty--nsfw': shouldObscureThumbnail,
+                })}
+              >
+                <div className="card__media-text">
+                  {__("Sorry, looks like we can't preview this file.")}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+        </div>
 
-        <div className="media__content media__content--large">
+        <div className="grid-area--info media__content media__content--large">
           <h1 className="media__title media__title--large">{title}</h1>
 
           <div className="media__properties media__properties--large">
@@ -237,8 +239,9 @@ class FilePage extends React.Component<Props> {
             <FileDetails uri={uri} />
           </div>
         </div>
-
-        <RecommendedContent uri={uri} />
+        <div className="grid-area--related">
+          <RecommendedContent uri={uri} />
+        </div>
       </Page>
     );
   }

src/renderer/scss/component/_main.scss

@@ -12,3 +12,29 @@
     padding: var(--spacing-vertical-large);
   }
 }
+
+.main--file-page {
+  display: grid;
+  grid-template-areas:
+    'content content'
+    'info    related'
+    'info    related';
+
+  @media (min-width: 1470px) {
+    grid-template-areas:
+      'content related'
+      'info    related'
+      'info    related';
+    grid-template-rows: 0fr 1fr;
+  }
+
+  .grid-area--content {
+    grid-area: content;
+  }
+  .grid-area--info {
+    grid-area: info;
+  }
+  .grid-area--related {
+    grid-area: related;
+  }
+}

src/renderer/scss/component/_media.scss

@@ -199,9 +199,7 @@
 //  C O N T E N T
 
 .media__content--large {
-  float: left;
   padding-right: var(--spacing-vertical-large);
-  width: calc(100% - 30rem);
 }
 
 //  M E D I A