fix: file page with large titles

src/ui/page/file/view.jsx

@@ -219,92 +219,94 @@ class FilePage extends React.Component<Props> {
             ))}
         </div>
 
-        <div className="grid-area--info media__content media__content--large">
-          <h1 className="media__title media__title--large">{title}</h1>
-          <div className="media__subtext media__subtext--large">
-            <div className="media__subtitle__channel">
-              <UriIndicator uri={uri} link />
+        <div className="columns">
+          <div className="grid-area--info">
+            <h1 className="media__title media__title--large">{title}</h1>
+            <div className="media__subtext media__subtext--large">
+              <div className="media__subtitle__channel">
+                <UriIndicator uri={uri} link />
+              </div>
             </div>
-          </div>
-          <div className="media__actions media__actions--between">
-            <div className="media__action-group--large">
-              {claimIsMine && (
-                <Button
-                  button="primary"
-                  icon={icons.EDIT}
-                  label={__('Edit')}
-                  navigate="/$/publish"
-                  onClick={() => {
-                    prepareEdit(claim, editUri, fileInfo);
-                  }}
-                />
-              )}
-              {!claimIsMine && (
-                <React.Fragment>
-                  {channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
-
+            <div className="media__actions media__actions--between">
+              <div className="media__action-group--large">
+                {claimIsMine && (
                   <Button
-                    button="alt"
-                    icon={icons.TIP}
-                    label={__('Send a tip')}
-                    onClick={() => openModal(MODALS.SEND_TIP, { uri })}
+                    button="primary"
+                    icon={icons.EDIT}
+                    label={__('Edit')}
+                    navigate="/$/publish"
+                    onClick={() => {
+                      prepareEdit(claim, editUri, fileInfo);
+                    }}
                   />
-                </React.Fragment>
-              )}
-              <Button
-                button="alt"
-                icon={icons.SHARE}
-                label={__('Share')}
-                onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
-              />
+                )}
+                {!claimIsMine && (
+                  <React.Fragment>
+                    {channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
+
+                    <Button
+                      button="alt"
+                      icon={icons.TIP}
+                      label={__('Send a tip')}
+                      onClick={() => openModal(MODALS.SEND_TIP, { uri })}
+                    />
+                  </React.Fragment>
+                )}
+                <Button
+                  button="alt"
+                  icon={icons.SHARE}
+                  label={__('Share')}
+                  onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
+                />
+              </div>
+
+              <div className="media__action-group--large">
+                <FileDownloadLink uri={uri} />
+                <FileActions
+                  uri={uri}
+                  claimId={claim.claim_id}
+                  showFullscreen={isPreviewType}
+                  viewerContainer={this.viewerContainer}
+                />
+              </div>
             </div>
 
-            <div className="media__action-group--large">
-              <FileDownloadLink uri={uri} />
-              <FileActions
-                uri={uri}
-                claimId={claim.claim_id}
-                showFullscreen={isPreviewType}
-                viewerContainer={this.viewerContainer}
-              />
+            <div className="media__actions media__actions--between">
+              <div className="media__subtext media__subtext--large">
+                <DateTime uri={uri} show={DateTime.SHOW_DATE} />
+              </div>
+
+              <div className="media__subtext media__subtext--large">
+                <VideoDuration uri={uri} />
+
+                {claimIsMine && (
+                  <p>
+                    {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="media__info--large">
+              <ClaimTags uri={uri} type="large" />
+              <FileDetails uri={uri} />
+
+              <div className="media__info-title">{__('Comments')}</div>
+              <CommentCreate uri={uri} />
+              <CommentsList uri={uri} />
             </div>
           </div>
-
-          <div className="media__actions media__actions--between">
-            <div className="media__subtext media__subtext--large">
-              <DateTime uri={uri} show={DateTime.SHOW_DATE} />
-            </div>
-
-            <div className="media__subtext media__subtext--large">
-              <VideoDuration uri={uri} />
-
-              {claimIsMine && (
-                <p>
-                  {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
-                </p>
-              )}
+          <div className="grid-area--related">
+            <div className="media__actions media__actions--between media__actions--nowrap">
+              <ClaimUri uri={uri} />
+              <div className="file-properties">
+                {isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
+                {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
+                <FilePrice badge uri={normalizeURI(uri)} />
+              </div>
             </div>
+            <RecommendedContent uri={uri} />
           </div>
-
-          <div className="media__info--large">
-            <ClaimTags uri={uri} type="large" />
-            <FileDetails uri={uri} />
-
-            <div className="media__info-title">{__('Comments')}</div>
-            <CommentCreate uri={uri} />
-            <CommentsList uri={uri} />
-          </div>
-        </div>
-        <div className="grid-area--related">
-          <div className="media__actions media__actions--between">
-            <ClaimUri uri={uri} />
-            <div className="file-properties">
-              {isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
-              {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
-              <FilePrice badge uri={normalizeURI(uri)} />
-            </div>
-          </div>
-          <RecommendedContent uri={uri} />
         </div>
       </Page>
     );

src/ui/scss/component/_main.scss

@@ -35,41 +35,21 @@
   }
 }
 
+.grid-wrapper {
+  display: flex;
+  position: relative;
+}
+
 .main--file-page {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr auto;
-  max-width: calc(100% - var(--side-nav-width) - var(--spacing-main-padding));
+  position: relative;
 
-  grid-template-areas:
-    'content content'
-    'info related';
-
-  .grid-area--content {
-    width: 100%;
-  }
-
-  .grid-area--content {
-    grid-area: content;
-  }
   .grid-area--info {
-    grid-area: info;
+    margin-right: var(--spacing-large);
+    width: 50%;
   }
+
   .grid-area--related {
-    grid-area: related;
-    width: 35rem;
-  }
-
-  @media (max-width: 600px) {
-    grid-template-areas:
-      'content'
-      'info'
-      'related';
-
-    .grid-area--related {
-      grid-area: related;
-      width: auto;
-    }
+    width: calc(50% - var(--spacing-large));
   }
 }
 

src/ui/scss/component/_media.scss

@@ -56,7 +56,9 @@
 
 .media__title--large {
   cursor: default;
-  display: inline;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
   font-size: 2rem;
   line-height: 1.33;
   margin-right: var(--spacing-small);
@@ -86,6 +88,10 @@
   justify-content: space-between;
 }
 
+.media__actions--nowrap {
+  flex-wrap: nowrap;
+}
+
 .media__action-group {
   > *:not(:last-child) {
     margin-right: var(--spacing-medium);
@@ -110,13 +116,6 @@
   }
 }
 
-//  M E D I A
-//  C O N T E N T
-
-.media__content--large {
-  padding-right: var(--spacing-large);
-}
-
 // M E D I A
 // S U B T E X T
 //