From 882ea06cc82e0d5e4a191d0c463cf59493593370 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Fri, 14 Feb 2025 18:45:00 +0530
Subject: [PATCH 1/2] Issue task PS-3899 : UI is breaking of Teacher app added
 unnecessary horizontal scroll on windows browsers

---
 .../asq-options/asq-options.component.html    | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html
index eab954ab..9c390a22 100644
--- a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html
+++ b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html
@@ -1,18 +1,31 @@
 <ng-container *ngIf="optionsShuffled && (layout === 'VERTICAL' || layout === 'DEFAULT')">
-  <div id="dragdropSpace" cdkDropList [cdkDropListData]="shuffledOptions" class="asq-horizontal-list" (cdkDropListDropped)="onDrop($event)">
-    <div class="asq-horizontal-box" *ngFor="let option of shuffledOptions" cdkDrag cdkDragBoundary="#dragdropSpace">
-      <div [innerHTML]="option.label"></div>
-      <quml-reorder></quml-reorder>
+  <div id="dragdropSpace" cdkDropList [cdkDropListData]="shuffledOptions" class="vertical-list" (cdkDropListDropped)="onDrop($event)">
+    <div class="box vertical-box" *ngFor="let option of shuffledOptions" cdkDrag>
+      <div class="content">
+        <div class="mt-1r" [innerHTML]="option.label"></div>
+      </div>
+      <div class="drag-handle" style="display: flex; align-items: center;">
+        <quml-reorder></quml-reorder>
+      </div>
     </div>
   </div>
 </ng-container>
-<ng-container *ngIf="optionsShuffled && (layout === 'HORIZONTAL')">
+
+
+
+<ng-container *ngIf="optionsShuffled && layout === 'HORIZONTAL'">
   <div id="dragdropSpace" cdkDropList cdkDropListOrientation="horizontal" [cdkDropListData]="shuffledOptions" class="horizontal-list" (cdkDropListDropped)="onDrop($event)">
-    <div class="asq-vertical-box" *ngFor="let option of shuffledOptions" cdkDrag cdkDragBoundary="#dragdropSpace">
-      <div class="drag-handle">
+    <div class="box horizontal-box" *ngFor="let option of shuffledOptions" cdkDrag>
+      <div class="content">
+        <div class="mt-1r" [innerHTML]="option.label"></div>
+      </div>
+      <div  class="drag-handle" style="display: flex; align-items: center;">
         <quml-reorder></quml-reorder>
       </div>
-      <div [innerHTML]="option.label"></div>
     </div>
   </div>
 </ng-container>
+
+
+
+

From b28dd9a49664b793833d6c0d1605037cd9b559e6 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Fri, 14 Feb 2025 18:47:19 +0530
Subject: [PATCH 2/2] Issue task PS-3899 : UI is breaking of Teacher app added
 unnecessary horizontal scroll on windows browsers

---
 .../asq-options/asq-options.component.scss    | 77 ++++++++++++++++++-
 .../mtf-options/mtf-options.component.scss    |  2 +-
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss
index 41b0ccb6..0f7fb264 100644
--- a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss
+++ b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss
@@ -90,7 +90,7 @@ height: 100vh;
 }
 .drag-handle{
   position: absolute;
-  top: 5px;
+  top: 15px;
   right: 5px;
   cursor: move;
 }
@@ -109,4 +109,79 @@ height: 100vh;
 .horizontal-list{
   padding:0px;
 }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* General Box Styles */
+.box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // width: 250px;
+  width: 90%;
+  cursor: grab;
+  height: 60px;
+  padding: 12px;
+  border-left: 5px solid #99bcd8;
+    border-right: 1px solid black;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  border-radius: 8px;
+  background: white;
+  // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+  // transition: transform 0.2s ease-in-out;
+  position: relative;
+}
+
+/* Restricting drag to within the box */
+.box cdkDrag {
+  width: 100%;
+  height: 100%;
+}
+
+/* Prevent dragging outside the box */
+.cdk-drag-preview {
+  max-height: 60px;
+}
+
+/* List Styles */
+.vertical-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width:100%;
+  align-items: center;
+}
+
+.horizontal-list {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+/* Drag Handle Styling */
+.drag-handle {
+  cursor: grab;
+  font-size: 18px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.mt-1r {
+  padding-top: 1rem !important;
 }
\ No newline at end of file
diff --git a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss
index 4b80d099..f3c0b23a 100644
--- a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss
+++ b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss
@@ -164,7 +164,7 @@ p {
   align-items: center;
   gap: 20px;
   padding: 30px;
-  background: #f0f0f0;
+  // background: #f0f0f0;
   border-radius: 20px;
 }