properly fit server auth page on responsive width

src/renderer/features/action-required/components/action-required-container.module.css

@@ -0,0 +1,8 @@
+.container {
+    width: 100%;
+    cursor: default;
+}
+
+.title {
+    text-transform: uppercase;
+}

src/renderer/features/action-required/components/action-required-container.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import styles from '/@/renderer/features/action-required/components/action-required-container.module.css';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
@@ -10,9 +11,9 @@ interface ActionRequiredContainerProps {
 }
 
 export const ActionRequiredContainer = ({ children, title }: ActionRequiredContainerProps) => (
-    <Stack style={{ cursor: 'default', maxWidth: '700px' }}>
+    <Stack className={styles.container}>
         <Group>
-            <Text size="xl" style={{ textTransform: 'uppercase' }}>
+            <Text className={styles.title} size="xl">
                 {title}
             </Text>
         </Group>

src/renderer/features/action-required/components/server-required.module.css

@@ -0,0 +1,21 @@
+.list {
+    width: 100%;
+    min-width: 300px;
+}
+
+.server-button {
+    padding: var(--theme-spacing-sm);
+}
+
+.server-button-label {
+    width: 100%;
+}
+
+.server-logo {
+    width: var(--theme-font-size-2xl);
+    height: var(--theme-font-size-2xl);
+}
+
+.server-row {
+    width: 100%;
+}

src/renderer/features/action-required/components/server-required.tsx

@@ -3,6 +3,7 @@ import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 
+import styles from '/@/renderer/features/action-required/components/server-required.module.css';
 import { isServerLock } from '/@/renderer/features/action-required/utils/window-properties';
 import JellyfinLogo from '/@/renderer/features/servers/assets/jellyfin.png';
 import NavidromeLogo from '/@/renderer/features/servers/assets/navidrome.png';
@@ -32,7 +33,7 @@ export const ServerRequired = () => {
     if (Object.keys(serverList).length > 0) {
         return (
             <ScrollArea>
-                <Stack miw="300px">
+                <Stack className={styles.list}>
                     <ServerSelector />
                     {!isServerLock() && (
                         <>
@@ -102,31 +103,21 @@ function ServerSelector() {
 
                 return (
                     <Button
+                        classNames={{
+                            label: styles.serverButtonLabel,
+                            root: styles.serverButton,
+                        }}
                         key={`server-${server.id}`}
                         onClick={() => {
                             if (!isSessionExpired) return handleSetCurrentServer(server);
                             return handleCredentialsModal(server);
                         }}
                         size="lg"
-                        styles={{
-                            label: {
-                                width: '100%',
-                            },
-                            root: {
-                                padding: 'var(--theme-spacing-sm)',
-                            },
-                        }}
                         variant={server.id === currentServer?.id ? 'filled' : 'default'}
                     >
-                        <Group justify="space-between" w="100%">
+                        <Group className={styles.serverRow} justify="space-between">
                             <Group>
-                                <img
+                                <img alt="" className={styles.serverLogo} src={logo} />
-                                    src={logo}
-                                    style={{
-                                        height: 'var(--theme-font-size-2xl)',
-                                        width: 'var(--theme-font-size-2xl)',
-                                    }}
-                                />
                                 <Text fw={600} size="lg">
                                     {server.name}
                                 </Text>

src/renderer/features/action-required/routes/action-required-route.module.css

@@ -0,0 +1,27 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.content {
+    box-sizing: border-box;
+    width: 90%;
+    max-width: min(90%, 700px);
+    margin-inline: auto;
+}
+
+.scroll-area {
+    width: 100%;
+    max-height: calc(100vh - 50px);
+}
+
+.check-group {
+    width: 100%;
+}
+
+.actions {
+    margin-top: 2rem;
+}

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -6,6 +6,7 @@ import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { ActionRequiredContainer } from '/@/renderer/features/action-required/components/action-required-container';
 import { ServerCredentialRequired } from '/@/renderer/features/action-required/components/server-credential-required';
 import { ServerRequired } from '/@/renderer/features/action-required/components/server-required';
+import styles from '/@/renderer/features/action-required/routes/action-required-route.module.css';
 import { isServerLock } from '/@/renderer/features/action-required/utils/window-properties';
 import LoginRoute from '/@/renderer/features/login/routes/login-route';
 import { ServerList } from '/@/renderer/features/servers/components/server-list';
@@ -14,7 +15,6 @@ import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-e
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServerWithCredential } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
-import { Center } from '/@/shared/components/center/center';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
@@ -58,17 +58,17 @@ const ActionRequiredRoute = () => {
     return (
         <AnimatedPage>
             <PageHeader />
-            <Center style={{ height: '100%', width: '100vw' }}>
+            <div className={styles.wrapper}>
-                <Stack gap="xl" style={{ maxWidth: '50%' }}>
+                <Stack className={styles.content} gap="xl">
-                    <ScrollArea style={{ maxHeight: 'calc(100vh - 50px)' }}>
+                    <ScrollArea className={styles.scrollArea}>
-                        <Group wrap="nowrap">
+                        <Group className={styles.checkGroup} wrap="nowrap">
                             {displayedCheck && (
                                 <ActionRequiredContainer title={displayedCheck.title}>
                                     {displayedCheck?.component}
                                 </ActionRequiredContainer>
                             )}
                         </Group>
-                        <Stack mt="2rem">
+                        <Stack className={styles.actions}>
                             {canReturnHome && <Navigate to={AppRoute.HOME} />}
                             {/* This should be displayed if a credential is required */}
                             {isCredentialRequired && !isServerLock && (
@@ -86,7 +86,7 @@ const ActionRequiredRoute = () => {
                         </Stack>
                     </ScrollArea>
                 </Stack>
-            </Center>
+            </div>
         </AnimatedPage>
     );
 };