From 801c1c90bf7f5b0a7758cb549ebd773fefa1c886 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Sat, 26 Oct 2024 16:52:22 +0200
Subject: [PATCH] refactor styling

---
 .../course-conversations.component.html       |  5 +----
 .../course-conversations.component.scss       |  6 +-----
 ...conversation-thread-sidebar.component.scss | 19 +++++++++----------
 .../conversation-thread-sidebar.component.ts  |  4 ++--
 .../answer-post-reactions-bar.component.html  |  2 +-
 .../post-reactions-bar.component.html         |  2 +-
 6 files changed, 15 insertions(+), 23 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
index 113ab1ca1cd8..1e7b44fa6fb7 100644
--- 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
index 57b7f4b0d2f8..a8d2c8291ccd 100644
--- 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));
@@ -45,11 +46,6 @@
     min-width: 200px;
 }
 
-.communication-answer-message-wrap {
-    max-width: min-content;
-    display: flex;
-}
-
 @include media-breakpoint-down(sm) {
     .communication-content-sidebar {
         position: absolute;
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss b/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss
index a3bda3fff59a..f18dd5b4c72e 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss
@@ -3,14 +3,12 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
-$draggable-width: 15px;
-$thread-section-card-min-width: 420px;
-$thread-section-card-max-width: 540px;
-
 .postings-container {
     display: flex;
     height: 100%;
     margin-left: auto;
+    min-width: 30%;
+    max-width: 100%;
 
     .back-instruction {
         font-size: 12px;
@@ -18,12 +16,15 @@ $thread-section-card-max-width: 540px;
 }
 
 .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 {
@@ -35,13 +36,12 @@ $thread-section-card-max-width: 540px;
         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;
-        max-width: $thread-section-card-max-width;
 
         .card-header {
             justify-content: space-between;
@@ -64,7 +64,6 @@ $thread-section-card-max-width: 540px;
 
 .collapsed-thread {
     display: flex;
-    width: 38px;
     justify-content: space-between;
     flex-flow: column;
     margin-left: auto;
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.ts
index 40f1dc298d6c..2307a9f9d182 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.ts
+++ b/src/main/webapp/app/overview/course-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/src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html b/src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html
index 8819002acd4d..b262d884fd29 100644
--- a/src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html
+++ b/src/main/webapp/app/shared/metis/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/src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html b/src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html
index d3ead68a6c0c..b17e24a46149 100644
--- a/src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html
+++ b/src/main/webapp/app/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 -->