properly fit server auth page on responsive width

2026-07-22 18:36:34 +02:00 · 2026-07-18 21:47:00 -07:00
parent a51299e818
commit 8e3d3d3ec0
6 changed files with 74 additions and 26 deletions
@@ -0,0 +1,8 @@
+.container {
+    width: 100%;
+    cursor: default;
+}
+
+.title {
+    text-transform: uppercase;
+}
@@ -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>
@@ -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%;
+}
@@ -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
-                                    src={logo}
-                                    style={{
-                                        height: 'var(--theme-font-size-2xl)',
-                                        width: 'var(--theme-font-size-2xl)',
-                                    }}
-                                />
+                                <img alt="" className={styles.serverLogo} src={logo} />
                                <Text fw={600} size="lg">
                                    {server.name}
                                </Text>
@@ -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;
+}
@@ -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' }}>
-                <Stack gap="xl" style={{ maxWidth: '50%' }}>
-                    <ScrollArea style={{ maxHeight: 'calc(100vh - 50px)' }}>
-                        <Group wrap="nowrap">
+            <div className={styles.wrapper}>
+                <Stack className={styles.content} gap="xl">
+                    <ScrollArea className={styles.scrollArea}>
+                        <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>
    );
 };