fix: file page with large titles

src/ui/page/file/view.jsx

@@ -219,7 +219,8 @@ class FilePage extends React.Component<Props> {
             ))}
         </div>
 
-        <div className="grid-area--info media__content media__content--large">
+        <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">
@@ -296,7 +297,7 @@ class FilePage extends React.Component<Props> {
             </div>
           </div>
           <div className="grid-area--related">
-          <div className="media__actions media__actions--between">
+            <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} />}
@@ -306,6 +307,7 @@ class FilePage extends React.Component<Props> {
             </div>
             <RecommendedContent uri={uri} />
           </div>
+        </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;
-  }
-  .grid-area--related {
-    grid-area: related;
-    width: 35rem;
+    margin-right: var(--spacing-large);
+    width: 50%;
   }
 
-  @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
 //