Level editor: make tool select smaller

Czechitas-podklady-WEB · Feb 6, 2025 · ea9d221 · ea9d221
1 parent b2679c3
commit ea9d221
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/src/Components/LevelEditor.module.css b/src/Components/LevelEditor.module.css
@@ -53,3 +53,9 @@
 	top: 0;
 	bottom: 0;
 }
+.toolSelect {
+	width: 100%;
+	max-width: 16rem;
+	margin-inline: auto;
+	margin-block: 5rem 1rem;
+}
diff --git a/src/Components/LevelEditor.tsx b/src/Components/LevelEditor.tsx
@@ -215,34 +215,33 @@ export const LevelEditor: FunctionComponent = () => {
 					}}
 				/>
 			</div>
-			<FormControl fullWidth>
-				<InputLabel id="tool-label">Zvolený nástroj</InputLabel>
-				<Select
-					labelId="tool-label"
-					id="tool"
-					value={tool}
-					label="Zvolený nástroj"
-					onChange={(value) => {
-						setTool(value.target.value as typeof tool)
-					}}
-				>
-					<MenuItem value="erase">Guma</MenuItem>
-					<MenuItem value="player">Princezna</MenuItem>
-					{environmentElement.map(({ value, label }) => (
-						<MenuItem key={value} value={value}>
-							{label}
-						</MenuItem>
-					))}
-					{environmentFoundations.map(({ value, label }) => (
-						<MenuItem key={value} value={value}>
-							{label}
-						</MenuItem>
-					))}
-				</Select>
-			</FormControl>
-			{/* @TODO: add, remove row or column, above, below, right, left */}
-			<br />
-			<br />
+			<div className={styles.toolSelect}>
+				<FormControl fullWidth>
+					<InputLabel id="tool-label">Zvolený nástroj</InputLabel>
+					<Select
+						labelId="tool-label"
+						id="tool"
+						value={tool}
+						label="Zvolený nástroj"
+						onChange={(value) => {
+							setTool(value.target.value as typeof tool)
+						}}
+					>
+						<MenuItem value="erase">Guma</MenuItem>
+						<MenuItem value="player">Princezna</MenuItem>
+						{environmentElement.map(({ value, label }) => (
+							<MenuItem key={value} value={value}>
+								{label}
+							</MenuItem>
+						))}
+						{environmentFoundations.map(({ value, label }) => (
+							<MenuItem key={value} value={value}>
+								{label}
+							</MenuItem>
+						))}
+					</Select>
+				</FormControl>
+			</div>
 			<Typography align="center">
 				<LevelPicker
 					onSelect={(level) => {