Change styles for genres list, remove wrapper to this list and replac…

…e Box with div

apps/react/src/features/genres/components/GenresList/GenresList.module.css

@@ -1,5 +1,10 @@
 .list {
 	width: 100%;
+	overflow-y: auto;
+	border: 1px var(--border-color) solid;
+	height: calc(100% - var(--form-field-height) - (2 * var(--space-s)));
+
+	/* Used important to override material styles. */
 	padding-top: 0 !important;
 }
 

apps/react/src/features/genres/pages/GenresPage/GenresPage.module.css

@@ -8,13 +8,7 @@
 .main__section {
 	min-width: 320px;
 	border: 1px var(--border-color) solid;
-}
-
-.main__section__list {
 	flex-grow: 1;
-	overflow-y: auto;
-	border: 1px var(--border-color) solid;
-	height: calc(100% - var(--form-field-height) - (2 * var(--space-s)));
 }
 
 .main__details {

apps/react/src/features/genres/pages/GenresPage/GenresPage.tsx

@@ -2,7 +2,6 @@ import { memo, useEffect, FC } from 'react';
 import { fetchGenres } from '@js-camp/react/store/genre/dispatchers';
 import { selectGenres, selectAreGenresLoading } from '@js-camp/react/store/genre/selectors';
 import { useAppDispatch, useAppSelector } from '@js-camp/react/store';
-import { Box } from '@mui/material';
 import { Outlet } from 'react-router-dom';
 
 import { GenresList } from '../../components/GenresList';
@@ -26,20 +25,16 @@ const GenresPageComponent: FC = () => {
 
 	return (
 		<main className={styles.main}>
-			<Box className={styles.main__section}>
-				<GenresFilterForm/>
-				<Box className={styles.main__section__list}>
-					<GenresList genres={genres} />
-				</Box>
-			</Box>
-			<Box className={styles.main__details}>
+			<div className={styles.main__section}>
+				<GenresFilterForm />
+				<GenresList genres={genres} />
+			</div>
+			<div className={styles.main__details}>
 				<Outlet />
-			</Box>
+			</div>
 		</main>
 	);
 };
 
-/**
- * Memorized genres page component.
- */
+/** Memorized genres page component. */
 export const GenresPage = memo(GenresPageComponent);