sccs fixes #3

src/components/filters/Filters.module.scss

@@ -1,25 +1,24 @@
 @import '../../styles/mixins.scss';
 
 .container {
-	@apply mb-4 flex flex-col items-start gap-4;
+	@apply mb-4 flex flex-col items-start justify-center gap-4;
 
-	@include md(lg, 'max') {
-		@apply flex-row;
+	@include md(md, 'max') {
+		@apply flex-col items-center;
 	}
 
 	.heading {
 		@apply text-xl min-w-[150px] border-b-2 pb-3;
 
-		@include md(lg, 'max') {
-			@apply border-b-0 pb-0 min-w-[125px];
+		@include md(md, 'max') {
+			@apply min-w-[125px] text-center;
 		}
 	}
 
 	.filters {
 		@apply flex flex-row gap-4;
 
-		@include md(lg, 'max') {
-			@apply border-l-2 pl-5;
+		@include md(md, 'max') {
 		}
 	}
 }

src/components/filters/select/SelectPriorityFilter.tsx

@@ -15,7 +15,7 @@ export function SelectPriorityFilter() {
 
 	return (
 		<div className="flex flex-col gap-2">
-			<div className="text-xl">Приоритет</div>
+			<div className="text-xl text-center md:text-start">Приоритет</div>
 			<Select
 				onValueChange={(priority) => {
 					priority === '-1' ? setPriorityFilter(null) : setPriorityFilter(parseInt(priority))

src/components/sorting/PrioritySorting.tsx

@@ -15,7 +15,7 @@ export function PrioritySorting() {
 
 	return (
 		<div className="flex flex-col gap-2">
-			<div className="text-xl">Приоритет</div>
+			<div className="text-xl text-center md:text-start">Приоритет</div>
 			<Select
 				onValueChange={(priority) => {
 					setPrioritySorting(priority)

src/components/sorting/Sorting.module.scss

@@ -1,25 +1,24 @@
 @import '../../styles/mixins.scss';
 
 .container {
-	@apply mb-4 flex flex-col items-start gap-4;
+	@apply mb-4 flex flex-col items-start justify-center gap-4;
 
-	@include md(lg, 'max') {
-		@apply flex-row;
+	@include md(md, 'max') {
+		@apply flex-col items-center;
 	}
 
 	.heading {
 		@apply text-xl min-w-[150px] border-b-2 pb-3;
 
-		@include md(lg, 'max') {
-			@apply border-b-0 pb-0 min-w-[125px];
+		@include md(md, 'max') {
+			@apply min-w-[125px] text-center;
 		}
 	}
 
 	.sorts {
 		@apply flex flex-row gap-4;
 
-		@include md(lg, 'max') {
-			@apply border-l-2 pl-5;
+		@include md(md, 'max') {
 		}
 	}
 }

src/screens/notes/Notes.module.scss

@@ -13,6 +13,12 @@
 		flex-basis: 300px;
 
 		@include md(lg, 'max') {
+			@apply flex-row gap-8 justify-center;
+			flex-basis: 0;
+		}
+
+		@include md(md, 'max') {
+			@apply flex flex-col gap-4;
 			flex-basis: 0;
 		}
 	}

tailwind.config.js

@@ -62,11 +62,13 @@ module.exports = {
 			},
 		},
 		screens: {
-			md: { max: '900px' },
-			'md-min': { min: '900px' },
-			'md-header': { max: '768px' },
-			sm: { min: '600px' },
-			xs: { max: '500px' },
+			xs: { min: '420px' },
+			sm: { min: '660px' },
+			md: { min: '768px' },
+			lg: { min: '980px' },
+			xl: { min: '1280px' },
+			'2xl': { min: '1536px' },
+			'3xl': { min: '1920px' },
 		},
 		extend: {
 			spacing: {