Merge pull request #33 from Bricks666/feature/fix-mobile-ru-layout

make gaps and font-size in rooms header adaptive

src/pages/rooms/ui/rooms-header/rooms-header.module.css

@@ -0,0 +1,9 @@
+@media (max-width: 600px) {
+	.title {
+		font-size: 1.3rem;
+	}
+
+	.bar {
+		gap: 0.25em;
+	}
+}

src/pages/rooms/ui/rooms-header/rooms-header.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+	readonly bar: string;
+	readonly title: string;
+};
+export = styles;

src/pages/rooms/ui/rooms-header/rooms-header.tsx

@@ -1,4 +1,5 @@
 import { Typography } from '@mui/material';
+import cn from 'classnames';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,17 +9,21 @@ import { OpenCreateRoom } from '@/features/rooms';
 
 import { CommonProps } from '@/shared/types';
 
+import styles from './rooms-header.module.css';
+
 export const RoomsHeader: React.FC<CommonProps> = (props) => {
 	const { className, } = props;
 	const { t, } = useTranslation('rooms');
 	const title = t('title');
 
+	console.log(styles);
+
 	return (
 		<MainHeader
-			className={className}
+			className={cn(styles.bar, className)}
 			slots={{
 				left: (
-					<Typography variant='h5' component='h1'>
+					<Typography className={styles.title} variant='h5' component='h1'>
 						{title}
 					</Typography>
 				),

src/shared/ui/template-header/template-header.module.css

@@ -1,4 +1,6 @@
 .container {
+	gap: 0.5em;
+
 	border-left: none;
 	border-top: none;
 	border-right: none;
@@ -7,7 +9,7 @@
 .bar {
 	display: grid;
 	grid-template-columns: 150px 1fr 150px;
-	gap: 0.5em;
+	gap: inherit;
 	align-items: center;
 
 	padding: 0 1em;
@@ -50,3 +52,9 @@
 		grid-column: 2;
 	}
 }
+
+@media (max-width: 600px) {
+	.bar {
+		padding: 0 0.5em;
+	}
+}