Communication: Fix content overflow in expanded thread view (#9474)

ls1intum · Oct 27, 2024 · 981fe87 · 981fe87
1 parent 041d5c9
commit 981fe87
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 31 deletions.
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
@@ -62,10 +62,7 @@
                     <jhi-course-wide-search (openThread)="postInThread = $event" [courseWideSearchConfig]="courseWideSearchConfig" />
                 }
             </div>
-            <div
-                class="communication-answer-message-wrap col flex-grow-1 justify-end px-0 scrollable-content"
-                [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'is-answer-thread-open': !!postInThread }"
-            >
+            <div class="scrollable-content" [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'is-answer-thread-open': !!postInThread }">
                 @if (!!postInThread) {
                     <jhi-conversation-thread-sidebar
                         [activeConversation]="activeConversation ?? postInThread.conversation!"

diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss b/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss
@@ -25,6 +25,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod));
+    flex-wrap: wrap;
 
     &.content-height-dev {
         max-height: calc(100vh - var(--header-height) - var(--message-input-height-dev));
@@ -42,12 +43,7 @@
 }
 
 .communication-message-wrap {
-    min-width: 200px;
-}
-
-.communication-answer-message-wrap {
-    max-width: min-content;
-    display: flex;
+    min-width: 30%;
 }
 
 @include media-breakpoint-down(sm) {
@@ -92,15 +88,6 @@
         display: none;
     }
 
-    .communication-answer-message-wrap {
-        max-width: 100%;
-        display: none;
-    }
-
-    .communication-answer-message-wrap.is-answer-thread-open {
-        display: flex;
-    }
-
     .communication-message-wrap {
         max-width: 100%;
     }

diff --git a/...nversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss b/...nversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss
@@ -3,26 +3,28 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
-$draggable-width: 15px;
-$thread-section-card-min-width: 420px;
-
 .postings-container {
     display: flex;
     height: 100%;
     margin-left: auto;
+    min-width: 30%;
+    max-width: 100%;
 
     .back-instruction {
         font-size: 12px;
     }
 }
 
 .expanded-thread {
-    width: calc(#{$draggable-width} + #{$thread-section-card-min-width});
+    display: flex;
+    flex-grow: 1;
+    min-width: 30%;
+    max-width: 100%;
 
     .scrollbar {
         position: relative;
         max-height: 1000px;
-        overflow: auto;
+        overflow-x: hidden;
     }
 
     .wrapper-scroll-y {
@@ -34,12 +36,12 @@ $thread-section-card-min-width: 420px;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        min-width: $draggable-width;
+        min-width: 1.5%;
+        max-width: 1.5%;
     }
 
     .card {
         width: inherit;
-        min-width: $thread-section-card-min-width;
 
         .card-header {
             justify-content: space-between;
@@ -62,7 +64,6 @@ $thread-section-card-min-width: 420px;
 
 .collapsed-thread {
     display: flex;
-    width: 38px;
     justify-content: space-between;
     flex-flow: column;
     margin-left: auto;

diff --git a/...conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.ts b/...conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.ts
@@ -62,8 +62,8 @@ export class ConversationThreadSidebarComponent implements AfterViewInit {
                 modifiers: [
                     // Set maximum width
                     interact.modifiers!.restrictSize({
-                        min: { width: 435, height: 0 },
-                        max: { width: 600, height: 4000 },
+                        min: { width: window.innerWidth * 0.3, height: 0 },
+                        max: { width: window.innerWidth, height: 0 },
                     }),
                 ],
                 inertia: true,

diff --git a/.../posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html b/.../posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex gap-2 fs-xx-small">
+<div class="d-flex flex-wrap gap-2 fs-xx-small">
     @for (reactionMetaData of reactionMetaDataMap | keyvalue; track reactionMetaData) {
         <div>
             <button

diff --git a/...p/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html b/...p/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex gap-2 fs-xx-small">
+<div class="d-flex flex-wrap gap-2 fs-xx-small">
     @if (!isCommunicationPage) {
         @if (sortedAnswerPosts.length) {
             <!-- collapse answers -->

diff --git a/...rsations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.spec.ts b/...rsations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.spec.ts
@@ -52,4 +52,16 @@ describe('ConversationThreadSidebarComponent', () => {
         component.activeConversation = conversation;
         expect(component.hasChannelModerationRights).toBe(hasModerationRights);
     });
+
+    it('should set min and max width for the resizable thread section', () => {
+        const expandedThreadElement = fixture.debugElement.nativeElement.querySelector('.expanded-thread');
+        const minWidth = window.innerWidth * 0.3;
+        const maxWidth = window.innerWidth;
+
+        expandedThreadElement.style.width = `${minWidth}px`;
+        expect(parseFloat(expandedThreadElement.style.width)).toBeGreaterThanOrEqual(minWidth);
+
+        expandedThreadElement.style.width = `${maxWidth}px`;
+        expect(parseFloat(expandedThreadElement.style.width)).toBeLessThanOrEqual(maxWidth);
+    });
 });