Fixes #497 and also fixes #528

Author: oharsta

client/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@surfnet/sds": "^0.0.144",
+    "@surfnet/sds": "^0.0.145",
     "dompurify": "^3.2.6",
     "i18n-js": "^4.5.1",
     "isomorphic-dompurify": "^2.26.0",

client/src/components/BreadCrumb.scss

@@ -12,7 +12,7 @@
 
     ol.sds--breadcrumb--list {
         min-height: 32px;
-        max-width: $medium;
+        max-width: $max-width;
         margin: 0 auto 0 auto;
         position: relative;
         transition: margin 150ms ease-in-out;

client/src/components/Entities.scss

@@ -2,7 +2,7 @@
 
 .mod-entities {
 
-    max-width: $medium;
+    max-width: $max-width;
     width: 100%;
     margin: 0 auto;
 

client/src/components/Header.scss

@@ -14,7 +14,7 @@
         align-items: center;
         width: 100%;
         margin: 0 auto;
-        max-width: $medium;
+        max-width: $max-width;
 
         @media (max-width: $medium) {
             padding: 0 15px;

client/src/components/Page.scss

@@ -1,7 +1,7 @@
 @import "../styles/vars.scss";
 
 .page {
-    max-width: $medium;
+    max-width: $max-width;
     width: 100%;
     margin: 0 auto;
     background-color: white;

client/src/components/Tabs.scss

@@ -5,7 +5,7 @@
     background-color: $background;
 
     .tabs {
-        max-width: $medium;
+        max-width: $max-width;
         margin: 0 auto;
         display: flex;
         gap: var(--sds--space--1);

client/src/components/UnitHeader.scss

@@ -25,7 +25,7 @@
     }
 
     .unit-header {
-        max-width: $medium;
+        max-width: $max-width;
         margin: 0 auto;
         width: 100%;
         display: flex;

client/src/components/UnitHeaderInviter.scss

@@ -13,7 +13,7 @@
 
 
     .unit-header {
-        max-width: $medium;
+        max-width: $max-width;
         margin: 0 auto;
         width: 100%;
         display: flex;

client/src/pages/Inviter.scss

@@ -5,7 +5,7 @@
 
 
     .inviter-container {
-        max-width: $medium;
+        max-width: $max-width;
         display: flex;
         flex-direction: column;
         align-items: center;

client/src/pages/Login.js

@@ -8,14 +8,23 @@ import {login} from "../utils/Login";
 import {useAppStore} from "../stores/AppStore";
 import {isEmpty} from "../utils/Utils";
 import {useLocation} from "react-router-dom";
-import {useState} from "react";
+import {useEffect, useRef, useState} from "react";
 
 export const Login = () => {
     const location = useLocation();
     const [spin, setSpin] = useState(false);
 
     const config = useAppStore((state) => state.config);
 
+    const buttonRef = useRef();
+
+    useEffect(() => {
+        if (buttonRef && buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+
     const doLogin = () => {
         const force = location.state === "force";
         login(config, !isEmpty(force));
@@ -36,6 +45,7 @@ export const Login = () => {
                         <Button onClick={doLogin}
                                 txt={I18n.t("landing.header.login")}
                                 type={ButtonType.Primary}
+                                ref={buttonRef}
                                 size={ButtonSize.Full}/>
                         <p className={"sup"}
                            dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(I18n.t("landing.header.sup"))}}/>