hamburger menu improved. dragging behaviour of dnd setting on touch screens fixed.

src/core/components/dnd/draggable.tsx

@@ -25,6 +25,7 @@ export function Draggable({
   return (
     <div
       style={{
+        touchAction: "none",
         transform: transform
           ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
           : undefined,

src/core/components/dnd/wrapper_dnd_context.tsx

@@ -28,6 +28,7 @@ export function WrapperDndContext({
 }) {
   return (
     <DndContext
+      modifiers={[]}
       onDragEnd={(e) => {
         const blankId = e.over?.data.current?.blankId;
         if (blankId) {

src/features/activity/view/index.tsx

@@ -9,7 +9,7 @@ import { TypeInBlanksExercise } from "./type_in_blanks_exercise";
 
 export function View() {
   return (
-    <article>
+    <article style={{ overflow: "hidden" }}>
       <ActivityBody />
       <Exercise />
       <ActivityFooter />

src/features/app_bar/app_bar.module.scss

@@ -37,14 +37,16 @@
 
   .menu-button {
     display: none;
-    border: 2px solid black;
-    border-radius: 5px;
     background-color: transparent;
-    width: 2.5rem;
-    aspect-ratio: 1;
-    padding: 0;
+    // aspect-ratio: 1;
+    // width: 2.5rem;
+    // border-radius: 5px;
+    // border: 2px solid black;
+    // padding: 0;
 
     svg {
+      color: black;
+      font-size: 2.5rem;
       vertical-align: middle;
     }
   }

src/features/theme_page/view/tab_panels/index.tsx

@@ -6,9 +6,7 @@ import {
   TaskAltRounded,
 } from "@mui/icons-material";
 import { BaseViewModel } from "../../model/base_view_model";
-import { useEffect, useRef, useState } from "react";
 import IActivity from "@/lib/activity/activity";
-import createLocalExerciseRepository from "@/lib/repositories/local_exercise_repository/local_exercise_repository_implementation";
 import ILocalExercise from "@/lib/repositories/local_exercise_repository/local_exercise";
 
 export function TabPanels() {
@@ -70,7 +68,7 @@ export function ActivitiesContainer({
                   <h3>{title}</h3>
                 </div>
                 <div className={styles["right-group"]}>
-                  <span>
+                  <span className={styles["grade"]}>
                     {localExerciseData && `%${localExerciseData.grade}`}
                   </span>
                   <button

src/features/theme_page/view/tab_panels/styles.module.scss

@@ -40,13 +40,13 @@
   .left-group {
     display: flex;
     align-items: center;
-    column-gap: 1rem;
+    column-gap: 1.2rem;
 
     h3 {
       color: gv.$primary-color;
       font-weight: 600;
       font-size: 1.3em;
-      padding-right: 1rem;
+      padding-right: 1.5rem;
     }
 
     svg {
@@ -57,14 +57,18 @@
 
   .right-group {
     display: flex;
-    column-gap: 4rem;
+    width: 25%;
+    flex-shrink: 0;
+    min-width: 10.5rem;
+    justify-content: space-between;
     align-items: center;
 
-    span {
+    .grade {
       color: gv.$primary-color;
       opacity: 0.8;
       font-weight: 700;
       font-size: 1.5rem;
+      flex-shrink: 0;
     }
   }
 }