Fix file page layout shift (#1150)

ui/component/page/view.jsx

@@ -133,6 +133,7 @@ function Page(props: Props) {
               'main--full-width hide-ribbon': fullWidthPage,
               'main--auth-page': authPage,
               'main--file-page': filePage,
+              'main--video-page': filePage && !videoTheaterMode && !livestream && !isMarkdown,
               'main--settings-page': settingsPage,
               'main--markdown': isMarkdown,
               'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream && !isMarkdown && !isMobile,

ui/scss/component/_main.scss

@@ -510,6 +510,24 @@ body {
   }
 }
 
+.main--video-page {
+  @media (min-width: $breakpoint-medium) {
+    $recommended-width: calc(var(--recommended-content-width) - var(--spacing-l) * 3 - var(--spacing-m) * 2);
+
+    display: grid;
+    grid-template-columns: 1fr $recommended-width;
+    justify-content: space-between;
+    gap: var(--spacing-l);
+
+    .file-page__recommended {
+      margin: 0 !important;
+      height: 100% !important;
+      width: 100% !important;
+      overflow: hidden;
+    }
+  }
+}
+
 .card__title-section--body-list {
   display: unset !important;
   // width: 100%;

ui/scss/init/_vars.scss

@@ -53,6 +53,7 @@
   --mobile: 600px;
   --side-nav-width: 230px;
   --side-nav-width--micro: 93px;
+  --recommended-content-width: 32rem;
 
   --spacing-main-padding: var(--spacing-xl);
   --floating-viewer-width: 32rem;