AuthPage: css fixes

- The graphic was meant to be 50% of the card width, but was squished.
- Try to reduce scrolling by making everything fit in a 100% zoom on a 1080p screen.

ui/component/common/card.jsx

@@ -63,7 +63,7 @@ export default function Card(props: Props) {
         }
       }}
     >
-      <div>
+      <div className="card__first-pane">
         {(title || subtitle) && (
           <div
             className={classnames('card__header--between', {

ui/component/page/view.jsx

@@ -117,6 +117,7 @@ function Page(props: Props) {
         className={classnames('main-wrapper__inner', {
           'main-wrapper__inner--filepage': isOnFilePage,
           'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
+          'main-wrapper__inner--auth': authPage,
         })}
       >
         {getSideNavElem()}

ui/scss/component/_main.scss

@@ -42,6 +42,15 @@
   padding-top: 0;
 }
 
+.main-wrapper__inner--auth {
+  min-height: unset;
+  padding: 0;
+
+  .main--auth-page {
+    margin-top: 0;
+  }
+}
+
 .main {
   position: relative;
   width: calc(100% - var(--side-nav-width) - var(--spacing-l));
@@ -425,27 +434,28 @@
 .main__sign-up--graphic {
   max-width: 47rem;
 
+  .card__first-pane {
+    width: 50%;
+    @media (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+  }
+
   .card__second-pane {
     width: 50%;
+    @media (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--color-login-graphic-background);
-
-    @media (max-width: $breakpoint-small) {
-      width: 100%;
-    }
-
-    .signup-image {
-      @media (max-width: $breakpoint-small) {
-        width: 50%;
-      }
-    }
   }
 
   .card__title {
-    font-size: var(--font-heading);
+    font-size: var(--font-title);
     font-weight: var(--font-weight-bold);
   }