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 bd6cc1b46..1276c1a02 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,9 +8,5 @@ interface ConfigurationChildWrapperProps { export function ConfigurationChildWrapper({ children, }: ConfigurationChildWrapperProps) { - return ( - - {children} - - ); + return
{children}
; } diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx index 0341d12d3..de4430f99 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx @@ -9,17 +9,12 @@ export function Crew() { - + % diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx index ebd47c4b7..f73d09fe1 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx @@ -1,4 +1,5 @@ import { Flex, Heading } from '@radix-ui/themes'; +import * as styles from '../../../page.css'; import { Camouflage } from './components/Camouflage'; import { Consumables } from './components/Consumables'; import { Crew } from './components/Crew'; @@ -9,106 +10,88 @@ import { Provisions } from './components/Provisions'; export function Characteristics() { return ( - - - - Configure + +
+ Configure - - - - - - - + + + + + + +
- - Statistics + + Statistics - - - Survivability - - + + + Survivability + + - - Lethality - - - - - - - - - - - - - - - - - + + Lethality + + + + + + + + + + + + + + + + + - - Flexibility - - - - + + Flexibility + + + + - - Mobility - - - - - - - - - - + + Mobility + + + + + + + + + + - - Stealth - - - - - - - + + Stealth + + + + + + diff --git a/src/app/tools/tankopedia/page.css.ts b/src/app/tools/tankopedia/page.css.ts index a6de47c73..a608f4e08 100644 --- a/src/app/tools/tankopedia/page.css.ts +++ b/src/app/tools/tankopedia/page.css.ts @@ -56,19 +56,38 @@ export const alignTopRight = style({ }, }); -export const configure = style({ - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gap: 16, +export const characteristics = style({ + display: 'flex', + gap: 32, + + '@media': { + 'screen and (max-width: 800px)': { + flexDirection: 'column', + }, + }, }); -export const configureRight = style({ +export const configurationChild = style({ + display: 'flex', + gap: 8, + flexDirection: 'column', + + '@media': { + 'screen and (min-width: 801px)': { + alignItems: 'end', + }, + }, +}); + +export const configuration = style({ display: 'flex', flexDirection: 'column', - gap: 8, -}); -export const configureLeft = style({ - display: 'flex', - flexDirection: 'column', - gap: 8, + gap: 16, + flex: 1, + + '@media': { + 'screen and (min-width: 801px)': { + alignItems: 'end', + }, + }, });