fix: scroll freeze

Author: HYACCCINT

client/web/angular-customer-app/src/app/chatbot/chatbot.component.html

@@ -18,19 +18,24 @@
     <div class="order-bar">
       <mat-expansion-panel
         class="order-expansion-panel"
-        [expanded]="chatService.order().length > 0" >
+        [expanded]="chatService.order().length > 0"
+      >
         <mat-expansion-panel-header class="order-panel-header">
           <mat-panel-title class="order-title-in-header">
-            Your order 
-            @if (chatService.order().length > 0) {
-              <span>({{ chatService.order().length }} item{{ chatService.order().length === 1 ? '' : 's' }})</span>
+            Your order @if (chatService.order().length > 0) {
+            <span
+              >({{ chatService.order().length }} item{{
+                chatService.order().length === 1 ? "" : "s"
+              }})</span
+            >
             }
           </mat-panel-title>
         </mat-expansion-panel-header>
-    
+
         <div class="order-details-content">
           <div class="order-text-actual">
-            {{ currentOrder() }} </div>
+            {{ currentOrder() }}
+          </div>
         </div>
       </mat-expansion-panel>
     </div>
@@ -69,25 +74,23 @@
         </div>
         } }
       </div>
-
-      <div class="suggestions-container">
-        <div class="quick-replies">
-          @for (response of chatService.suggestedResponses(); track response;
-          let index = $index) {
-          <button
-            mat-stroked-button
-            class="quick-reply-chip"
-            (click)="ask(response)"
-          >
-            <mat-icon fontSet="material-symbols-outlined"
-              >prompt_suggestion</mat-icon
-            >{{ response }}
-          </button>
-          }
-        </div>
+    </div>
+    <div class="suggestions-container">
+      <div class="quick-replies">
+        @for (response of chatService.suggestedResponses(); track response; let
+        index = $index) {
+        <button
+          mat-stroked-button
+          class="quick-reply-chip"
+          (click)="ask(response)"
+        >
+          <mat-icon fontSet="material-symbols-outlined"
+            >prompt_suggestion</mat-icon
+          >{{ response }}
+        </button>
+        }
       </div>
     </div>
-
     <form class="chat-input-bar" (ngSubmit)="ask()">
       @if (chatService.error()) {
       <pre class="error-message">{{ chatService.error()?.text }}</pre>

client/web/angular-customer-app/src/app/chatbot/chatbot.component.scss

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+ @use "sass:color";
 
  $primary-font-color: #333;
  $secondary-font-color: #555;
@@ -56,15 +57,15 @@
    flex-direction: column;
    align-items: center;
    height: 100%;
-   width: 100%;
+   width: 100%;  
  }
 
  .centered-chat-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
-   height: 100%;
+   height: 100%; 
  }
 
  .order-bar {
@@ -77,7 +78,7 @@
    .order-display-container {
      display: flex;
      align-items: center;
-     background-color: darken($background-color-page, 3%);
+     background-color: color.adjust($background-color-page, $lightness: -5%);
      border: 1px solid $border-color-light;
      border-radius: 24px;
      padding: 6px 16px;
@@ -89,36 +90,34 @@
        position: absolute;
        top: -10px;
        left: 15px;
-       background-color: darken($background-color-page, 3%);
+       background-color: color.adjust($background-color-page, $lightness: -5%);
        padding: 0 4px;
        font-weight: 500;
      }
 
      .order-text {
        flex-grow: 1;
        font-size: 1em;
-       padding: 8px;
+       padding: 8px 0;
        min-height: 24px;
        line-height: 1.5;
      }
    }
  }
 
  .chat-content-area {
-   flex-grow: 1;
+   flex: 1 0 0;
    display: flex;
    flex-direction: column;
    padding: 16px 24px 0;
    width: 100%;
    box-sizing: border-box;
-   overflow: hidden;
+   overflow-y: scroll;
  }
 
  .messages {
-   flex-grow: 1;
    display: flex;
    flex-direction: column-reverse;
-   overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 16px;
 
@@ -228,7 +227,7 @@
      color: $secondary-font-color;
      margin: 16px 0;
      span {
-       background-color: darken($background-color-page, 5%);
+       background-color: color.adjust($background-color-page, $lightness: -5%);
        padding: 4px 12px;
        border-radius: 12px;
      }
@@ -291,7 +290,7 @@
          font-size: 0.8em;
          padding: 3px 8px;
          border-radius: 8px;
-         color: darken($primary-font-color, 10%);
+         color: color.adjust($primary-font-color, $lightness: -10%);
          &.special {
            background-color: $tag-special-bg;
          }
@@ -328,8 +327,8 @@
      }
 
      &:hover {
-       background-color: darken(white, 3%);
-       border-color: darken($border-color-light, 5%);
+       background-color: color.adjust(white, $lightness: -5%);
+       border-color: color.adjust($border-color-light, $lightness: -5%);
      }
    }
  }
@@ -428,7 +427,7 @@
        color: $add-btn-icon-color;
      }
      &:hover:not(:disabled) {
-       background-color: darken($add-btn-bg, 5%);
+       background-color: color.adjust($add-btn-bg, $lightness: -5%);
      }
    }
 
@@ -439,7 +438,7 @@
        color: $send-btn-icon-color;
      }
      &:hover:not(:disabled) {
-       background-color: darken($send-btn-bg, 8%);
+       background-color: color.adjust($send-btn-bg, $lightness: -10%);
      }
    }