From bda182ec72ffc19a66f0222e4c29db19b5143397 Mon Sep 17 00:00:00 2001
From: EdMadd <martl.eichinger@gmail.com>
Date: Tue, 29 Oct 2024 15:01:09 +0100
Subject: [PATCH 1/2] Add "read more" button to MatchingStudent and
 StudentGroup

---
 src/pages/student/MatchingStudent.tsx |  8 ++++++--
 src/pages/student/StudentGroup.tsx    | 10 +++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pages/student/MatchingStudent.tsx b/src/pages/student/MatchingStudent.tsx
index dcd4a05dc..d775d003f 100644
--- a/src/pages/student/MatchingStudent.tsx
+++ b/src/pages/student/MatchingStudent.tsx
@@ -17,6 +17,8 @@ import SwitchLanguageButton from '../../components/SwitchLanguageButton';
 import { gql } from '../../gql';
 import ConfirmationModal from '@/modals/ConfirmationModal';
 import { Breadcrumb } from '@/components/Breadcrumb';
+import TruncatedText from '@/components/TruncatedText';
+import { Typography } from '@/components/Typography';
 
 type Props = {};
 const query = gql(`
@@ -140,8 +142,10 @@ const MatchingStudent: React.FC<Props> = () => {
                     <VStack paddingX={space['1']} maxWidth={ContainerWidth} width="100%" marginX="auto">
                         <Breadcrumb />
                         <Heading paddingBottom={space['0.5']}>{t('matching.request.check.title')}</Heading>
-                        <VStack space={space['0.5']}>
-                            <Text paddingBottom={space['0.5']}>{t('matching.request.check.content')}</Text>
+                        <VStack space={space['0.5']} paddingBottom={space['0.5']} alignItems={'flex-start'}>
+                            <TruncatedText asChild maxLines={2}>
+                                <Typography>{t('matching.request.check.content')}</Typography>
+                            </TruncatedText>
                         </VStack>
                         <NavigationTabs
                             tabs={[
diff --git a/src/pages/student/StudentGroup.tsx b/src/pages/student/StudentGroup.tsx
index a4edf8cab..3041b4f15 100644
--- a/src/pages/student/StudentGroup.tsx
+++ b/src/pages/student/StudentGroup.tsx
@@ -1,4 +1,4 @@
-import { Text, Heading, useTheme, VStack, Stack, Button, useBreakpointValue } from 'native-base';
+import { Heading, useTheme, VStack, Stack, Button, useBreakpointValue } from 'native-base';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import WithNavigation from '../../components/WithNavigation';
@@ -21,6 +21,8 @@ import { Subcourse } from '../../gql/graphql';
 import { useLayoutHelper } from '../../hooks/useLayoutHelper';
 import SwitchLanguageButton from '../../components/SwitchLanguageButton';
 import { Breadcrumb } from '@/components/Breadcrumb';
+import TruncatedText from '@/components/TruncatedText';
+import { Typography } from '@/components/Typography';
 
 const StudentGroup: React.FC = () => {
     const { data, loading } = useQuery(
@@ -201,9 +203,11 @@ const StudentGroup: React.FC = () => {
 
                     {!loading && (
                         <VStack space={space['1']}>
-                            <VStack space={space['0.5']}>
+                            <VStack space={space['0.5']} alignItems={'flex-start'}>
                                 <Heading>{t('matching.group.helper.title')}</Heading>
-                                <Text>{t('matching.group.helper.content')}</Text>
+                                <TruncatedText asChild maxLines={2}>
+                                    <Typography>{t('matching.group.helper.content')}</Typography>
+                                </TruncatedText>
                             </VStack>
                             <VStack>
                                 {locState && Object.keys(locState).length > 0 && (

From a510eaf374ccfca5a013049390df86a78bac336e Mon Sep 17 00:00:00 2001
From: EdMadd <martl.eichinger@gmail.com>
Date: Fri, 1 Nov 2024 16:31:43 +0100
Subject: [PATCH 2/2] Add TruncatedText and ContentContainerWidth to Matching
 and Group for student and pupils

---
 src/pages/pupil/Group.tsx             | 10 ++++++---
 src/pages/pupil/Matching.tsx          | 31 ++++++++++++++++-----------
 src/pages/student/MatchingStudent.tsx |  3 ++-
 src/pages/student/StudentGroup.tsx    |  7 +++++-
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/pages/pupil/Group.tsx b/src/pages/pupil/Group.tsx
index fad409188..54aa8de8e 100644
--- a/src/pages/pupil/Group.tsx
+++ b/src/pages/pupil/Group.tsx
@@ -1,4 +1,4 @@
-import { Text, Heading, useTheme, VStack, useBreakpointValue, Stack } from 'native-base';
+import { Heading, useTheme, VStack, useBreakpointValue, Stack } from 'native-base';
 import { useTranslation } from 'react-i18next';
 import WithNavigation from '../../components/WithNavigation';
 import NotificationAlert from '../../components/notifications/NotificationAlert';
@@ -16,6 +16,8 @@ import AllSubcourses from '../subcourse/AllSubcourses';
 import { Course_Category_Enum } from '../../gql/graphql';
 import SwitchLanguageButton from '../../components/SwitchLanguageButton';
 import { Breadcrumb } from '@/components/Breadcrumb';
+import TruncatedText from '@/components/TruncatedText';
+import { Typography } from '@/components/Typography';
 
 type Props = {};
 
@@ -247,9 +249,11 @@ const PupilGroup: React.FC<Props> = () => {
                     <VStack paddingX={space['1']} marginBottom={space['1']} marginX="auto" width="100%" maxWidth={ContainerWidth}>
                         <Breadcrumb />
                         <VStack space={space['1']}>
-                            <VStack space={space['0.5']} maxWidth={ContentContainerWidth}>
+                            <VStack space={space['0.5']} maxWidth={ContentContainerWidth} alignItems={'flex-start'} marginBottom={space['0.5']}>
                                 <Heading>{t('matching.group.pupil.title')}</Heading>
-                                <Text marginBottom={space['0.5']}>{t('matching.group.pupil.content')}</Text>
+                                <TruncatedText asChild maxLines={2}>
+                                    <Typography>{t('matching.group.pupil.content')}</Typography>
+                                </TruncatedText>
                             </VStack>
 
                             <VStack maxWidth={ContentContainerWidth} marginBottom={space['1']}>
diff --git a/src/pages/pupil/Matching.tsx b/src/pages/pupil/Matching.tsx
index 470173d61..65db3c8e7 100644
--- a/src/pages/pupil/Matching.tsx
+++ b/src/pages/pupil/Matching.tsx
@@ -19,6 +19,8 @@ import DisableableButton from '../../components/DisablebleButton';
 import { DEACTIVATE_PUPIL_MATCH_REQUESTS } from '../../config';
 import ConfirmationModal from '@/modals/ConfirmationModal';
 import { Breadcrumb } from '@/components/Breadcrumb';
+import TruncatedText from '@/components/TruncatedText';
+import { Typography } from '@/components/Typography';
 
 type Props = {};
 
@@ -112,11 +114,6 @@ const Matching: React.FC<Props> = () => {
         return data?.me?.pupil?.matches.filter((match) => match.dissolved === true);
     }, [data?.me?.pupil?.matches]);
 
-    const ContainerWidth = useBreakpointValue({
-        base: '100%',
-        lg: sizes['containerWidth'],
-    });
-
     const ContentContainerWidth = useBreakpointValue({
         base: '100%',
         lg: sizes['contentContainerWidth'],
@@ -148,15 +145,25 @@ const Matching: React.FC<Props> = () => {
                     </Stack>
                 }
             >
-                <VStack space={space['0.5']} paddingX={space['1']} width="100%" maxWidth={ContainerWidth}>
+                <VStack
+                    space={space['0.5']}
+                    paddingX={space['1']}
+                    width="100%"
+                    maxWidth={ContentContainerWidth}
+                    alignItems={'flex-start'}
+                    paddingBottom={space['0.5']}
+                >
                     <Breadcrumb />
                     <Heading paddingBottom={space['0.5']}>{t('matching.request.check.title')}</Heading>
-                    <Text maxWidth={ContentContainerWidth} paddingBottom={space['0.5']}>
-                        {t('matching.blocker.firstContent')}{' '}
-                        <Link style={{ color: colors.primary[900], textDecoration: 'underline' }} target="_blank" to="/hilfebereich">
-                            {t('moreInfoButton')}
-                        </Link>
-                    </Text>
+                    <TruncatedText asChild maxLines={2}>
+                        <Typography>
+                            {t('matching.blocker.firstContent')}
+                            <br />
+                            <Link style={{ color: colors.primary[900], textDecoration: 'underline' }} target="_blank" to="/hilfebereich">
+                                {t('moreInfoButton')}
+                            </Link>
+                        </Typography>
+                    </TruncatedText>
                 </VStack>
                 <NavigationTabs
                     tabs={[
diff --git a/src/pages/student/MatchingStudent.tsx b/src/pages/student/MatchingStudent.tsx
index d775d003f..c4455a802 100644
--- a/src/pages/student/MatchingStudent.tsx
+++ b/src/pages/student/MatchingStudent.tsx
@@ -142,7 +142,7 @@ const MatchingStudent: React.FC<Props> = () => {
                     <VStack paddingX={space['1']} maxWidth={ContainerWidth} width="100%" marginX="auto">
                         <Breadcrumb />
                         <Heading paddingBottom={space['0.5']}>{t('matching.request.check.title')}</Heading>
-                        <VStack space={space['0.5']} paddingBottom={space['0.5']} alignItems={'flex-start'}>
+                        <VStack space={space['0.5']} paddingBottom={space['0.5']} alignItems={'flex-start'} maxWidth={ContentContainerWidth}>
                             <TruncatedText asChild maxLines={2}>
                                 <Typography>{t('matching.request.check.content')}</Typography>
                             </TruncatedText>
@@ -199,6 +199,7 @@ const MatchingStudent: React.FC<Props> = () => {
                                                                         state: { edit: true },
                                                                     })
                                                                 }
+                                                                key={i}
                                                             />
                                                         ))) || <AlertMessage content={t('matching.request.check.noRequestsTutor')} />}
                                                 </Flex>
diff --git a/src/pages/student/StudentGroup.tsx b/src/pages/student/StudentGroup.tsx
index 3041b4f15..30069911c 100644
--- a/src/pages/student/StudentGroup.tsx
+++ b/src/pages/student/StudentGroup.tsx
@@ -121,6 +121,11 @@ const StudentGroup: React.FC = () => {
         lg: sizes['containerWidth'],
     });
 
+    const ContentContainerWidth = useBreakpointValue({
+        base: '100%',
+        lg: sizes['contentContainerWidth'],
+    });
+
     const ButtonContainer = useBreakpointValue({
         base: '100%',
         lg: sizes['desktopbuttonWidth'],
@@ -203,7 +208,7 @@ const StudentGroup: React.FC = () => {
 
                     {!loading && (
                         <VStack space={space['1']}>
-                            <VStack space={space['0.5']} alignItems={'flex-start'}>
+                            <VStack space={space['0.5']} alignItems={'flex-start'} maxWidth={ContentContainerWidth}>
                                 <Heading>{t('matching.group.helper.title')}</Heading>
                                 <TruncatedText asChild maxLines={2}>
                                     <Typography>{t('matching.group.helper.content')}</Typography>