адаптивность страницы Курсы

src/pages/CourseExercises.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-
 import { useState, useEffect } from "react";
 import { useParams, useHistory, useLocation } from "react-router-dom";
 

src/pages/Courses.tsx

@@ -36,7 +36,7 @@ const AnalitcsCards = () => {
           <ProgressLine />
 
           {/* Текст поверх линии */}
-          <div className="absolute text-white font-semibold text-base">Вы прошли реабилитацию на {85}%</div>
+          <div className="absolute text-white font-semibold text-sm sm:text-base">Вы прошли реабилитацию на {85}%</div>
         </div>
       </div>
     </div>
@@ -133,9 +133,9 @@ export const Courses = () => {
         )}
 
         {/* Заголовок секции */}
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-col sm:flex-row content-center justify-between mb-6">
           <h2 className="text-xl font-black text-[#5F5C5C]">Мои курсы</h2>
-          <span className="text-sm text-gray-500">{courses.length} курсов</span>
+          <span className="text-sm text-gray-500"> Назначенных: {courses.length}</span>
         </div>
 
         {/* Выводим список курсов */}
@@ -151,10 +151,10 @@ export const Courses = () => {
                   onClick={() => history.push(getRouteCourseExercises(course.ID.toString()), { course })}
                   className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
                 >
-                  <div className="flex items-center space-x-5">
+                  <div className="flex flex-col sm:flex-row sm:content-center space-x-5">
                     {/* Изображение курса */}
                     {course.url_file_img && (
-                      <div className="w-16 h-16 rounded-2xl overflow-hidden flex-shrink-0">
+                      <div className="h-10 w-10 md:h-20 md:w-20 rounded-2xl overflow-hidden flex-shrink-0">
                         <img
                           src={course.url_file_img || "/placeholder.svg"}
                           alt={course.title}
@@ -183,14 +183,14 @@ export const Courses = () => {
                       </div>
 
                       {/* Информация о прогрессе */}
-                      <div className="flex justify-between items-center">
+                      <div className="flex flex-col md:flex-row md:justify-between content-center">
                         <p className="text-sm text-[#5F5C5C]/70 font-semibold">{progress}% завершено</p>
                         <p className="text-xs text-[#5F5C5C]/50">{Math.floor(Math.random() * 15) + 5} упражнений</p>
                       </div>
                     </div>
 
                     {/* Иконка стрелки */}
-                    <div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
+                    <div className="hidden sm:block text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1 my-auto">
                       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                       </svg>