fix: restyle login page

src/app/login/login.module.css

@@ -12,7 +12,7 @@ body:has(.loginContainer) {
   justify-content: center;
   gap: 1.5rem;
   padding: 2rem;
-  width: 300px;
+  width: min(max(300px, 30svw), 500px);
 
   background-color: var(--base-1);
   border-radius: 1rem;
@@ -24,6 +24,7 @@ body:has(.loginContainer) {
 }
 
 .loginContainer form {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1rem;

src/app/login/page.tsx

@@ -1,14 +1,12 @@
 // /home/max/Git/MeetUp/src/app/login/page.tsx
 import { auth } from '@/auth';
-import LabeledInput from '@/components/labeled-input';
-import Login from '@/components/user/sso-login-button';
 import { redirect } from 'next/navigation';
 
 import style from './login.module.css';
 
 import '@/app/globals.css';
 import SSOLogin from '@/components/user/sso-login-button';
-import Login from '@/components/user/login-button';
+import LoginForm from '@/components/user/login-form';
 
 export default async function LoginPage() {
   const session = await auth();
@@ -21,24 +19,13 @@ export default async function LoginPage() {
     <div className={style.loginContainer}>
       <h1>Login</h1>
 
-      <form>
+      <LoginForm />
-        <LabeledInput
-          type='email'
-          label='E-Mail'
-          placeholder='Enter your E-Mail'
-        />
-        <LabeledInput
-          type='password'
-          label='Password'
-          placeholder='Enter your Password'
-        />
-      </form>
 
-      <Login provider={''} providerDisplayName={''}></Login>
+      <hr style={{ width: '100%' }} />
-
-      <hr style={{ width: 230 }} />
 
+      {process.env.AUTH_AUTHENTIK_ISSUER && (
         <SSOLogin provider='authentik' providerDisplayName='SSO' />
+      )}
     </div>
   );
 }

src/components/button.module.css

@@ -6,6 +6,7 @@
   border: 2px solid var(--color-100);
   transition: background-color 0.3s ease;
   height: 50px;
+  width: min(100%, 300px);
 }
 
 .button:hover {

src/components/button.tsx

@@ -8,22 +8,17 @@ export default function Button({
   children,
   mode = 'primary',
   icon,
-  width,
 }: {
   type?: 'button' | 'submit' | 'reset';
   children?: React.ReactNode;
   mode?: 'primary' | 'warning' | 'success' | 'danger';
   icon?: IconProp;
-  width?: number;
 }) {
   if (!icon) {
     return (
       <button
         className={style.button + ' ' + style['style_' + mode]}
         type={type}
-        style={{
-          width: width ? `${width}px` : '100%',
-        }}
       >
         <span>{children}</span>
       </button>
@@ -35,9 +30,6 @@ export default function Button({
           style.button + ' ' + style['style_' + mode] + ' ' + style['icon']
         }
         type={type}
-        style={{
-          width: width ? `${width}px` : '100%',
-        }}
       >
         <FontAwesomeIcon icon={icon} height={25} />
         <span>{children}</span>

src/components/labeled-input.module.css

@@ -6,7 +6,7 @@
 .input {
   position: relative;
   overflow: visible;
-  width: 250px;
+  width: 100%;
 }
 
 .input input {

src/components/user/login-button.tsx

@@ -1,11 +0,0 @@
-import Button from '../button';
-
-export default function Login() {
-  return (
-    <form>
-      <Button type='submit' mode='primary' width={250}>
-        Login
-      </Button>
-    </form>
-  );
-}

src/components/user/login-form.module.css

@@ -0,0 +1,7 @@
+.loginForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+}

src/components/user/login-form.tsx

@@ -0,0 +1,23 @@
+import style from './login-form.module.css';
+import Button from '../button';
+import LabeledInput from '@/components/labeled-input';
+
+export default function LoginForm() {
+  return (
+    <form className={style.loginForm}>
+      <LabeledInput
+        type='email'
+        label='E-Mail'
+        placeholder='Enter your E-Mail'
+      />
+      <LabeledInput
+        type='password'
+        label='Password'
+        placeholder='Enter your Password'
+      />
+      <Button type='submit' mode='primary'>
+        Login
+      </Button>
+    </form>
+  );
+}

src/components/user/sso-login-button.tsx

@@ -15,8 +15,15 @@ export default function SSOLogin({
         'use server';
         await signIn(provider);
       }}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+        alignItems: 'center',
+      }}
     >
-      <Button type='submit' mode='warning' icon={faOpenid} width={250}>
+      <Button type='submit' mode='warning' icon={faOpenid}>
         Login with {providerDisplayName}
       </Button>
     </form>