Handle long descriptions (#228)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Event/EventFormFields.tsx

@@ -291,7 +291,17 @@ export default function EventFormFields({
             size="small"
             margin="dense"
             multiline
-            rows={2}
+            minRows={2}
+            maxRows={10}
+            sx={{
+              "& .MuiInputBase-root": {
+                maxHeight: "33%",
+                overflowY: "auto",
+              },
+              "& textarea": {
+                resize: "vertical",
+              },
+            }}
           />
         </FieldWithLabel>
       )}

src/components/Event/InfoRow.tsx

@@ -62,7 +62,14 @@ export function InfoRow({
   content,
 }: InfoRowProps) {
   return (
-    <Box style={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
+    <Box
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        marginBottom: 1,
+      }}
+    >
       {icon}
       {content ? (
         content
@@ -70,7 +77,13 @@ export function InfoRow({
         <Typography
           variant="body2"
           color={error ? "error" : "textPrimary"}
-          style={{ wordBreak: "break-word" }}
+          style={{
+            wordBreak: "break-word",
+            whiteSpace: "pre-line",
+            maxHeight: "33vh",
+            overflowY: "auto",
+            width: "100%",
+          }}
         >
           {data ? (
             <Link

src/features/Events/EventModal.tsx

@@ -490,7 +490,17 @@ function EventPopover({
             size="small"
             margin="dense"
             multiline
-            rows={2}
+            minRows={2}
+            maxRows={10}
+            sx={{
+              "& .MuiInputBase-root": {
+                maxHeight: "33%",
+                overflowY: "auto",
+              },
+              "& textarea": {
+                resize: "vertical",
+              },
+            }}
           />
         </FieldWithLabel>
       )}