Merge pull request #83 from stamford-syntax-club/ana/card-fixes

Review Cards update

Author: NayHtetKyaw

apps/web/components/ui/cards/course-card.tsx

@@ -27,7 +27,7 @@ export function CourseCard({
 						{/* <Badge className="min-w-fit" color="blue">
 							IT
 						</Badge> */}
-						<IconBook />
+						<IconBook className="flex-shrink-0" />
 
 						<Text title={full_name} component="div" truncate="end">
 							{full_name}

apps/web/components/ui/cards/my-review-card.tsx

@@ -14,7 +14,7 @@ export function MyReviewCard({ cardData }: { cardData: Review }): JSX.Element {
 		<div className="col-span-12 sm:col-span-6 xl:col-span-4">
 			<Card
 				bg="dark.7"
-				className="bg-transparent shadow-sm transition-colors duration-150 hover:border-gray-400"
+				className="bg-transparent shadow-sm transition-colors duration-150 hover:border-gray-400 h-full	"
 				padding="md"
 				radius="md"
 				withBorder

apps/web/components/ui/review-card.tsx

@@ -35,7 +35,22 @@ const getStatusColor = (status: string): string => {
 	}
 };
 
+//in case the desciption contian no space, to break long words
+const breakLongWords = (text: string, maxLength: number = 18): string => {
+	return text
+		.split(" ")
+		.map((word) => {
+			if (word.length > maxLength) {
+				return word.match(new RegExp(".{1," + maxLength + "}", "g"))?.join(" ") ?? word;
+			}
+			return word;
+		})
+		.join(" ");
+};
+
 export function ReviewCard({ review }: ReviewCardProps): JSX.Element {
+	const formattedDescription = breakLongWords(review.description);
+
 	return (
 		<Card radius="md" shadow="sm">
 			<Flex direction="row" gap="lg" justify="center">
@@ -60,7 +75,7 @@ export function ReviewCard({ review }: ReviewCardProps): JSX.Element {
 					</Text>
 					<Spoiler maxHeight={75} showLabel="Show more" hideLabel="Hide">
 						<TypographyStylesProvider mt="md">
-							<ReactMarkdown>{review.description}</ReactMarkdown>
+							<ReactMarkdown>{formattedDescription}</ReactMarkdown>
 						</TypographyStylesProvider>
 					</Spoiler>
 				</Flex>
@@ -75,14 +90,16 @@ export function MyReviewCard({ review, onEditReview, onDeleteReview }: ReviewCar
 	const [openedEdit, { open: openEdit, close: closeEdit }] = useDisclosure(false);
 	const [openedDelete, { open: openDelete, close: closeDelete }] = useDisclosure(false);
 
+	const formattedDescription = breakLongWords(review.description);
+
 	return (
 		<>
 			<Card
 				bg="gray.9"
 				padding="md"
 				radius="md"
 				withBorder
-				className={`border-${getStatusColor(review.status)}-500`}
+				className={`border-${getStatusColor(review.status)}-500 break-words`}
 			>
 				<Flex direction="row" gap="md" justify="center">
 					{/* user profile and badges */}
@@ -118,7 +135,7 @@ export function MyReviewCard({ review, onEditReview, onDeleteReview }: ReviewCar
 						</Text>
 						<Spoiler maxHeight={75} showLabel="Show more" hideLabel="Hide">
 							<TypographyStylesProvider mt="sm">
-								<ReactMarkdown>{review.description}</ReactMarkdown>
+								<ReactMarkdown>{formattedDescription}</ReactMarkdown>
 							</TypographyStylesProvider>
 						</Spoiler>
 					</Flex>

apps/web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbo",