diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx index 1276c1a02..3c83a2f74 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx @@ -1,5 +1,5 @@ +import { Flex } from '@radix-ui/themes'; import { ReactNode } from 'react'; -import * as styles from '../../../../page.css'; interface ConfigurationChildWrapperProps { children: ReactNode; @@ -8,5 +8,9 @@ interface ConfigurationChildWrapperProps { export function ConfigurationChildWrapper({ children, }: ConfigurationChildWrapperProps) { - return
{children}
; + return ( + + {children} + + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx index 889032138..421dc5b1d 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx @@ -61,8 +61,10 @@ export function Skills() { - Skills in yellow only apply under special - circumstances. + + Yellow + {' '} + skills apply under special circumstances. diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index 10e42f7e2..54f240f1d 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -65,7 +65,7 @@ export default function Page({ params }: { params: { id: string } }) { }, [initialId, assigned]); return ( - + {assigned && ( <> @@ -78,7 +78,7 @@ export default function Page({ params }: { params: { id: string } }) { justify="center" > <Flex - gap="4" + gap="8" direction="column" style={{ flex: 1, @@ -90,13 +90,15 @@ export default function Page({ params }: { params: { id: string } }) { <TankSandbox /> <AntagonistBar /> - <Flex direction="column" gap="5"> + <Flex gap="5" wrap="wrap"> <Modules /> <Provisions /> - <Equipment /> <Miscellaneous /> <Consumables /> - <Skills /> + <Flex gap="5" wrap="wrap"> + <Equipment /> + <Skills /> + </Flex> </Flex> </Flex> diff --git a/src/app/tools/tankopedia/page.css.ts b/src/app/tools/tankopedia/page.css.ts index 891a7fbb4..cc95795d4 100644 --- a/src/app/tools/tankopedia/page.css.ts +++ b/src/app/tools/tankopedia/page.css.ts @@ -74,12 +74,6 @@ export const characteristics = style({ }, }); -export const configurationChild = style({ - display: 'flex', - gap: 8, - flexDirection: 'column', -}); - export const configuration = style({ display: 'flex', flexDirection: 'column', diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx index 8dd966b7a..f46bdc2d1 100644 --- a/src/app/tools/tankopedia/page.tsx +++ b/src/app/tools/tankopedia/page.tsx @@ -8,7 +8,7 @@ export default function Page() { const router = useRouter(); return ( - <PageWrapper size="double" color="purple"> + <PageWrapper size={1200} color="purple"> <TankSearch onSelect={(tank) => { router.push(`./tankopedia/${tank.id}`); diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx index 98ba0a074..c4c5c47de 100644 --- a/src/components/PageWrapper.tsx +++ b/src/components/PageWrapper.tsx @@ -3,13 +3,13 @@ import { ComponentProps } from 'react'; interface PageWrapperProps extends ComponentProps<typeof Flex> { color?: ComponentProps<typeof Theme>['accentColor']; - size?: 'regular' | 'wide' | 'double'; + size?: number; } export default function PageWrapper({ style, color, - size = 'regular', + size = 800, ...props }: PageWrapperProps) { return ( @@ -19,7 +19,7 @@ export default function PageWrapper({ gap="4" style={{ width: '100%', - maxWidth: size === 'regular' ? 800 : size === 'double' ? 1200 : 960, + maxWidth: size, margin: 'auto', padding: 16, boxSizing: 'border-box',