Feat: fixed mobile dnd and styles

src/components/EditTierModal.tsx

@@ -1,14 +1,19 @@
 import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import useStore from '../store';
-
 export const EditTierModal = () => {
   const [tierLevel, setTierLevel, editTierLevel] = useStore(
     useShallow(state => [state.editingTierLevel, state.setEditingTierLevel, state.editTierLevelName]),
   );
   const [newName, setNewName] = useState('');
   useEffect(() => {
-    if (tierLevel) setNewName(tierLevel.name);
+    if (tierLevel) {
+      setNewName(tierLevel.name);
+      document.body.style.overflow = 'hidden';
+    } else document.body.style.overflow = 'auto';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
   }, [tierLevel]);
   return (
     <div
@@ -20,7 +25,7 @@ export const EditTierModal = () => {
       }}
     >
       <div
-        className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex w-2/5 h-1/4 bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-row gap-4 justify-center items-center text-white border-white border-2`}
+        className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex md:w-2/5 w-5/6 h-1/4 bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-row gap-4 justify-center items-center text-white border-white border-2`}
         onClick={e => {
           e.preventDefault();
           e.stopPropagation();

src/components/Tier.scss

@@ -1,5 +1,7 @@
 .tier_name:hover {
+  @media(min-width: 768px) {
     button {
       opacity: 1;
     }
   }
+}

src/components/Tier.tsx

@@ -49,7 +49,7 @@ export const Tier = ({ color, name, textColor, id }: TierProps) => {
           }}
         >
           <button
-            className='absolute right-[5%] top-[5%] opacity-0 transition duration-250 ease-in-out'
+            className='absolute right-[5%] top-[5%] md:opacity-0 transition duration-250 ease-in-out'
             onClick={() => {
               setEditingTierLevel({ name, color, textColor, id });
             }}

src/components/TierModal.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useShallow } from 'zustand/shallow';
 import useStore from '../store';
 import { TierModalCategory } from './TierModalCategory';
@@ -5,11 +6,19 @@ import { TierModalCategory } from './TierModalCategory';
 export const TierModal = () => {
   const [modalOpen, tierLevels] = useStore(useShallow(state => [state.tierLevelsModalOpen, state.tierLevels]));
 
+  useEffect(() => {
+    if (modalOpen) document.body.style.overflow = 'hidden';
+    else document.body.style.overflow = 'auto';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [modalOpen]);
+
   return (
     <div
       className={`fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] ${
         modalOpen ? 'flex' : 'hidden'
-      } min-w-[300px] md:w-[70vw] md:h-1/4 h-[90vh] bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-col md:flex-row gap-4 justify-center items-center text-white border-white border-2`}
+      } min-w-[300px] md:w-[70vw] md:h-1/4 h-[90vh] bg-[#1e2324] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-col md:flex-row gap-4 justify-center items-center text-white border-white border-2`}
     >
       {tierLevels.map(tier_level => (
         <TierModalCategory name={tier_level.name} color={tier_level.color} textColor={tier_level.textColor} />