Issue task PS-3899 : UI is breaking of Teacher app added unnecessary …

…horizontal scroll on windows browsers

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;
 }

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;
 }