hotfix fullscreen compatibility

Author: crorisvanjski4

src/assets/scss/Dashboard.module.scss

@@ -7,7 +7,7 @@
 }
 
 div[data-fullscreen] .dashboard {
-	padding: 1.5rem;
-	gap: 1.5rem;
+	padding: 1rem;
+	gap: 1rem;
 	justify-content: space-between;
 }

src/assets/scss/SortBoxContainer.module.scss

@@ -6,3 +6,7 @@
 	height: 66vh;
 	justify-content: center;
 }
+
+div[data-fullscreen] .bar-container {
+	flex: 1;
+}

src/components/AlgorithmSelection.tsx

@@ -1,26 +1,58 @@
-import ToggleButton from "@mui/material/ToggleButton";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import SortIcon from "@mui/icons-material/Sort";
 import Algorithm, {
 	ALGORITHM_KEYS,
 	IAlgorithmKey,
 	SortingState,
 } from "../algorithms/Algorithm";
-import Stack from "@mui/material/Stack";
-import { Typography } from "@mui/material";
+import {
+	FormControl,
+	InputLabel,
+	MenuItem,
+	OutlinedInput,
+	Select,
+	SelectChangeEvent,
+} from "@mui/material";
 import { AlgorithmContext } from "./Dashboard";
-import { useContext } from "react";
+import { useContext, useState } from "react";
+import { Theme, useTheme } from "@mui/material/styles";
 
 export type AlgorithmSelectionProps = {};
 
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+	PaperProps: {
+		style: {
+			maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+			width: 450,
+		},
+	},
+};
+
+function getStyles(algorithmKey: string, textValue: string[], theme: Theme) {
+	return {
+		fontWeight:
+			textValue.indexOf(algorithmKey) === -1
+				? theme.typography.fontWeightRegular
+				: theme.typography.fontWeightMedium,
+	};
+}
+
 export default function AlgorithmSelection(props: AlgorithmSelectionProps) {
 	const state = useContext(AlgorithmContext);
+	const theme = useTheme();
+	const [textValue, setTextValue] = useState<string[]>(state.algorithms);
+
+	const handleChange = (event: SelectChangeEvent<typeof ALGORITHM_KEYS>) => {
+		const {
+			target: { value },
+		} = event;
+
+		const algorithms = (
+			Array.isArray(value) ? value : !value ? [] : [value]
+		) as IAlgorithmKey[];
 
-	const handleAlgorithmSelection = (
-		event: React.MouseEvent<HTMLElement>,
-		algorithms: IAlgorithmKey[]
-	) => {
 		if (algorithms.length > 0) {
+			setTextValue(typeof value === "string" ? value.split(",") : value);
 			const sortingStateEval: SortingState = algorithms.reduce(
 				(prev, algorithmKey) => ({ ...prev, [algorithmKey]: false }),
 				{}
@@ -32,19 +64,28 @@ export default function AlgorithmSelection(props: AlgorithmSelectionProps) {
 	};
 
 	return (
-		<Stack spacing={1} direction="row" alignItems="center">
-			<SortIcon fontSize="large" />
-			<Typography gutterBottom>Algorithms</Typography>
-			<ToggleButtonGroup
-				value={state.algorithms}
-				onChange={handleAlgorithmSelection}
-			>
-				{ALGORITHM_KEYS.map((key) => (
-					<ToggleButton key={key} value={key}>
-						{Algorithm[key].name}
-					</ToggleButton>
-				))}
-			</ToggleButtonGroup>
-		</Stack>
+		<div>
+			<FormControl sx={{ width: "80vw" }}>
+				<InputLabel id="algorithm-selection">Algorithms</InputLabel>
+				<Select
+					labelId="algorithm-selection"
+					multiple
+					value={textValue as IAlgorithmKey[]}
+					onChange={handleChange}
+					input={<OutlinedInput label="Algorithms" />}
+					MenuProps={MenuProps}
+				>
+					{ALGORITHM_KEYS.map((algorithmKey) => (
+						<MenuItem
+							key={algorithmKey}
+							value={algorithmKey}
+							style={getStyles(algorithmKey, textValue, theme)}
+						>
+							{Algorithm[algorithmKey].name}
+						</MenuItem>
+					))}
+				</Select>
+			</FormControl>
+		</div>
 	);
 }

src/components/ConfigContainer.tsx

@@ -9,7 +9,7 @@ export type ConfigContainerProps = {
 };
 
 export default function ConfigContainer(props: ConfigContainerProps) {
-	const spacing = props.spacing ?? 2;
+	const spacing = props.spacing ?? 1;
 
 	return (
 		<Card>