short lesson name

src/pages/attendance/attendance.tsx

@@ -1,11 +1,10 @@
 import React, { useMemo } from 'react'
 import { useParams } from 'react-router-dom'
-import styled from '@emotion/styled'
+import { Box, Heading, Tooltip, Text } from '@chakra-ui/react'
+import dayjs from 'dayjs'
 
 import { api } from '../../__data__/api/api'
 import { PageLoader } from '../../components/page-loader/page-loader'
-import { Box, Container, Heading } from '@chakra-ui/react'
-import dayjs from 'dayjs'
 
 export const Attendance = () => {
   const { courseId } = useParams()
@@ -69,14 +68,22 @@ export const Attendance = () => {
             {attendance.map((lesson, index) => (
               <tr key={lesson.name}>
                 <td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
-                <td>{lesson.name}</td>
+                <td>{<ShortText text={lesson.name} />}</td>
+
                 {data.students.map((st) => {
                   const wasThere =
                     lesson.students.findIndex((u) => u.sub === st.sub) !== -1
-                  return <td style={{
+                  return (
+                    <td
+                      style={{
                         textAlign: 'center',
                         backgroundColor: wasThere ? '#8ef78a' : '#e09797',
-                  }} key={st.sub}>{wasThere ? '+' : '-'}</td>
+                      }}
+                      key={st.sub}
+                    >
+                      {wasThere ? '+' : '-'}
+                    </td>
+                  )
                 })}
               </tr>
             ))}
@@ -86,3 +93,17 @@ export const Attendance = () => {
     </Box>
   )
 }
+
+const ShortText = ({ text }: { text: string }) => {
+  const needShortText = text.length > 20
+
+  if (needShortText) {
+    return (
+      <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+        <Text>{text.slice(0, 20)}...</Text>
+      </Tooltip>
+    )
+  }
+
+  return text
+}