From d903d6b0f0970c18f032c3a9b5c6a1fdb80f2c5e Mon Sep 17 00:00:00 2001
From: "Schwinghammer, Max" <max.schwinghammer@vaillant-group.com>
Date: Tue, 11 Jun 2024 18:14:04 +0200
Subject: [PATCH 1/2] Fix: Adapt comment for longer texts

---
 src/main/web/src/organisms/comment/Comment.css | 8 +++-----
 src/main/web/src/organisms/comment/Comment.tsx | 8 +++++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/main/web/src/organisms/comment/Comment.css b/src/main/web/src/organisms/comment/Comment.css
index d300f29d..05a47a07 100644
--- a/src/main/web/src/organisms/comment/Comment.css
+++ b/src/main/web/src/organisms/comment/Comment.css
@@ -1,7 +1,6 @@
 .comment {
   background-color: var(--component-grey);
   border-radius: var(--border-radius);
-  height: auto;
   margin-top: 10px;
   margin-left: 20px;
   margin-right: 20px;
@@ -22,10 +21,9 @@
 }
 
 .comment-text {
-  position: absolute;
-  top: 20px;
-  left: 18%;
-  width: 60%;
+  position: relative;
+  left: 20px;
+  width: 800px;
   font-size: var(--headline-font-size);
   font-weight: var(--normal-font-weight);
 }
diff --git a/src/main/web/src/organisms/comment/Comment.tsx b/src/main/web/src/organisms/comment/Comment.tsx
index f463f974..a9f00a06 100644
--- a/src/main/web/src/organisms/comment/Comment.tsx
+++ b/src/main/web/src/organisms/comment/Comment.tsx
@@ -90,12 +90,12 @@ export const Comment: React.FC<CommentProps> = (props: CommentProps) => {
       }
     };
     document.addEventListener('keydown', handleEsc);
-    return () => {
+    return (): void => {
       document.removeEventListener('keydown', handleEsc);
     };
   }, [reportOpen, handleClose]);
 
-  useEffect(() => {
+  useEffect((): void => {
     const fetchUserId = async () => {
       const id = await getUserIdByAccountId(accountId);
       setUserId(id);
@@ -116,7 +116,9 @@ export const Comment: React.FC<CommentProps> = (props: CommentProps) => {
             </Link>
             <div className="comment-author-date">{formattedTime}</div>
           </div>
-          <div className="comment-text">{text}</div>
+          <div className="comment-text-wrapper">
+            <div className="comment-text">{text}</div>
+          </div>
         </div>
 
         <div className="comment-interaction">

From f48a6466920b5d84851f6d5682ae577d67267a2a Mon Sep 17 00:00:00 2001
From: "Schwinghammer, Max" <max.schwinghammer@vaillant-group.com>
Date: Tue, 11 Jun 2024 18:40:25 +0200
Subject: [PATCH 2/2] Fix: Adapt comment for longer texts

---
 src/main/web/src/organisms/comment/Comment.css | 1 +
 src/main/web/src/organisms/comment/Comment.tsx | 4 +---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/main/web/src/organisms/comment/Comment.css b/src/main/web/src/organisms/comment/Comment.css
index 05a47a07..4bf03cdf 100644
--- a/src/main/web/src/organisms/comment/Comment.css
+++ b/src/main/web/src/organisms/comment/Comment.css
@@ -13,6 +13,7 @@
   display: flex;
   flex-direction: row;
   gap: 20px;
+  align-items: center;
 }
 
 .comment-text, .comment-author-date {
diff --git a/src/main/web/src/organisms/comment/Comment.tsx b/src/main/web/src/organisms/comment/Comment.tsx
index a9f00a06..99276513 100644
--- a/src/main/web/src/organisms/comment/Comment.tsx
+++ b/src/main/web/src/organisms/comment/Comment.tsx
@@ -116,9 +116,7 @@ export const Comment: React.FC<CommentProps> = (props: CommentProps) => {
             </Link>
             <div className="comment-author-date">{formattedTime}</div>
           </div>
-          <div className="comment-text-wrapper">
-            <div className="comment-text">{text}</div>
-          </div>
+          <div className="comment-text">{text}</div>
         </div>
 
         <div className="comment-interaction">