Fix styling on registration page

main.js

@@ -210,7 +210,7 @@ const WINDOW_SIZE = Object.freeze({
   defaultWidth: 880,
   defaultHeight: 820,
   minWidth: 880,
-  minHeight: 820,
+  minHeight: 600,
 });
 
 function getWindowSize() {

stylesheets/_session_signin.scss

@@ -10,6 +10,7 @@
     height: 100%;
     display: flex;
     align-items: center;
+    flex-direction: column;
 
     &-accent {
       flex-grow: 1;
@@ -28,21 +29,33 @@
     }
 
     &-registration {
-      height: 45%;
       padding-right: 128px;
     }
 
+    &-header {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: space-between;
+      padding: 17px 20px;
+    }
+
+    &-body {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+      align-items: center;
+      width: 100%;
+      padding-bottom: 20px;
+    }
+
+
     &-close-button {
-      position: absolute;
+      display: flex;
-      top: 17px;
+      align-items: center;
-      left: 20px;
     }
 
     &-session-button {
-      position: absolute;
-      top: 17px;
-      right: 20px;
-
       img {
         width: 30px;
       }
@@ -246,6 +259,8 @@
       display: inline-block;
       font-family: $session-font-mono;
       user-select: all;
+      overflow: hidden;
+      resize: none;
     }
   }
 }
@@ -259,3 +274,5 @@
 .registration-content-centered {
   text-align: center;
 }
+
+

ts/components/session/SessionRegistrationView.tsx

@@ -8,24 +8,27 @@ export const SessionRegistrationView: React.FC = () => (
   <div className="session-content">
     <div id="session-toast-container" />
     <div id="error" className="collapse" />
-    <div className="session-content-close-button">
+    <div className="session-content-header">
-      <SessionIconButton
+      <div className="session-content-close-button">
-        iconSize={SessionIconSize.Medium}
+        <SessionIconButton
-        iconType={SessionIconType.Exit}
+          iconSize={SessionIconSize.Medium}
-        onClick={() => {
+          iconType={SessionIconType.Exit}
-          window.close();
+          onClick={() => {
-        }}
+            window.close();
-      />
+          }}
+        />
+      </div>
+      <div className="session-content-session-button">
+        <img alt="brand" src="./images/session/brand.svg" />
+      </div>
     </div>
-
+    <div className="session-content-body">
-    <div className="session-content-accent">
+      <div className="session-content-accent">
-      <AccentText />
+        <AccentText />
-    </div>
+      </div>
-    <div className="session-content-registration">
+      <div className="session-content-registration">
-      <RegistrationTabs />
+        <RegistrationTabs />
-    </div>
+      </div>
-    <div className="session-content-session-button">
-      <img alt="brand" src="./images/session/brand.svg" />
     </div>
   </div>
 );