From e66b616ba42f368b0b15aaaf53d70f63399e7991 Mon Sep 17 00:00:00 2001
From: Primakov Alexandr Alexandrovich <primakov.pro@yandex.ru>
Date: Sun, 23 Mar 2025 17:24:04 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=BF=D1=82=D0=B8=D0=BC=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B0=20=D0=B3=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20QR-=D0=BA=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=B0=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B5=20LessonDetail:=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE=D0=B1=D1=80=D0=B0=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=82=D0=BA=D0=B0=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=D0=B0?=
 =?UTF-8?q?=20=D0=BE=D0=BA=D0=BD=D0=B0=20=D0=B8=20=D1=83=D0=BB=D1=83=D1=87?=
 =?UTF-8?q?=D1=88=D0=B5=D0=BD=D0=B0=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D0=BE=D1=87=D0=B8=D1=81=D1=82=D0=BA=D0=B8=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B2=D0=B0=D1=81=D0=B0.=20=D0=9E=D0=B1=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
 =?UTF-8?q?=20=D0=B4=D0=BB=D1=8F=20QRCanvas=20=D0=B4=D0=BB=D1=8F=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B5=D1=81=D0=BF=D0=B5=D1=87=D0=B5=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=BA=D0=B2=D0=B0=D0=B4=D1=80=D0=B0=D1=82=D0=BD=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=BE=20=D1=81=D0=BE=D0=BE=D1=82=D0=BD=D0=BE=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D1=81=D1=82=D0=BE=D1=80=D0=BE=D0=BD=20=D0=B8=20?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=20=D0=BD=D0=B0=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=BD=D1=8B=D1=85=20=D1=83=D1=81=D1=82=D1=80=D0=BE=D0=B9?=
 =?UTF-8?q?=D1=81=D1=82=D0=B2=D0=B0=D1=85.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/lesson-details.tsx | 63 ++++++++++++++++++++++++++++--------
 src/pages/style.ts           | 16 +++++++++
 2 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/pages/lesson-details.tsx b/src/pages/lesson-details.tsx
index 87d83d4..c405320 100644
--- a/src/pages/lesson-details.tsx
+++ b/src/pages/lesson-details.tsx
@@ -72,17 +72,50 @@ const LessonDetail = () => {
 
   useEffect(() => {
     if (!isFetching && isSuccess) {
-      QRCode.toCanvas(
-        canvRef.current,
-        userUrl,
-        { width: 600 },
-        function (error) {
-          if (error) console.error(error)
-          console.log('success!')
-        },
-      )
+      const generateQRCode = () => {
+        if (!canvRef.current) return;
+        
+        // Получаем текущую ширину канваса, гарантируя квадратный QR-код
+        const canvas = canvRef.current;
+        const containerWidth = canvas.clientWidth;
+        
+        // Очищаем canvas перед новой генерацией
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Устанавливаем одинаковые размеры для ширины и высоты (1:1)
+        canvas.width = containerWidth;
+        canvas.height = containerWidth;
+        
+        QRCode.toCanvas(
+          canvas,
+          userUrl,
+          { 
+            width: containerWidth,
+            margin: 1 // Небольшой отступ для лучшей читаемости
+          },
+          function (error) {
+            if (error) console.error(error)
+            console.log('success!')
+          },
+        )
+      }
+      
+      // Генерируем QR-код
+      generateQRCode();
+      
+      // Перегенерируем при изменении размера окна
+      const handleResize = () => {
+        generateQRCode();
+      };
+      
+      window.addEventListener('resize', handleResize);
+      
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
     }
-  }, [isFetching, isSuccess])
+  }, [isFetching, isSuccess, userUrl])
 
   const studentsArr = useMemo(() => {
     let allStudents: (User & { present?: boolean })[] = [
@@ -146,10 +179,12 @@ const LessonDetail = () => {
             {t('journal.pl.common.people')}
           </Box>
         </VStack>
-        <Stack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' } }}>
-          <a href={userUrl}>
-            <QRCanvas ref={canvRef} />
-          </a>
+        <Stack spacing="8" direction={{ base: "column", md: "row" }}>
+          <Box flexShrink={0} alignSelf="center">
+            <a href={userUrl}>
+              <QRCanvas ref={canvRef} />
+            </a>
+          </Box>
           <StudentList>
             {isTeacher(user) && studentsArr.map((student) => (
               <UserCard
diff --git a/src/pages/style.ts b/src/pages/style.ts
index ea63001..2588042 100644
--- a/src/pages/style.ts
+++ b/src/pages/style.ts
@@ -24,10 +24,26 @@ export const StudentList = styled.ul`
   flex-direction: row;
   flex-wrap: wrap;
   gap: 8px;
+  
+  @media (max-width: 768px) {
+    height: auto;
+    max-height: 600px;
+    padding-right: 0;
+  }
 `
 
 export const QRCanvas = styled.canvas`
   display: block;
+  aspect-ratio: 1 / 1;
+  width: 450px;
+  min-width: 450px;
+  max-width: 100%;
+  height: auto;
+  
+  @media (max-width: 768px) {
+    width: 300px;
+    min-width: auto;
+  }
 `
 
 export const ErrorSpan = styled.span`