diff --git a/src/App.css b/src/App.css
index 85c99a5..0258aa0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -10,11 +10,11 @@ body {
#root {
margin: 0 auto;
- display: flex;
+ /*display: flex;*/
flex-direction: column;
place-items: flex-start;
min-width: 320px;
- max-width: 1100px;
+ max-width: 1280px;
min-height: 100vh;
}
@@ -23,25 +23,8 @@ body {
margin: 0 auto;
padding: 2rem;
text-align: center;
-}
-
-/*.xlogo:hover {*/
-/* filter: drop-shadow(0 0 2em #f5c600);*/
-/*}*/
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
+ /* only horizontal scroll */
+ overflow-x: auto;
}
.card {
diff --git a/src/App.tsx b/src/App.tsx
index 3bfdb25..2f46d88 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,13 +3,26 @@ import Login from "./Login.tsx";
import {Navigate, Route, Routes} from "react-router-dom";
import Home from "./Home.tsx";
import NavBar from "./NavBar.tsx";
-import {useAuth} from "react-oidc-context";
+import {hasAuthParams, useAuth} from "react-oidc-context";
import NotFound from "./NotFound.tsx";
+import {useEffect, useState} from "react";
+import Spinner from "./Spinner.tsx";
function App() {
- const {user} = useAuth();
+ const auth = useAuth();
+ const [hasTriedSignin, setHasTriedSignin] = useState(false);
+
+ useEffect(() => {
+ if (!hasAuthParams() &&
+ !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading &&
+ !hasTriedSignin && auth.user
+ ) {
+ auth.signinSilent();
+ setHasTriedSignin(true);
+ }
+ }, [auth, hasTriedSignin]);
const AnonRoutes = <>