Minor css fixes

src/apps/path-finder/components/modal-icon/modal-content.tsx

@@ -43,7 +43,7 @@ export const mazeAlgoInfo = [
         `,
   },
   {
-    id: 5,
+    id: 6,
     heading: 'Binary tree algorithm',
     content: `
           The binary tree algorithm is a simple method for generating mazes. 
@@ -52,31 +52,31 @@ export const mazeAlgoInfo = [
         `,
   },
   {
-    id: 6,
+    id: 7,
     heading: ' Ellers Algorithm',
     content: `      
           Eller's algorithm works by iteratively generating one row of the maze at a time, which makes it particularly efficient in terms of memory usage. 
           It's also notable for its ability to generate mazes with horizontal passages that span the entire width of the maze.
         `,
   },
   {
-    id: 7,
+    id: 8,
     heading: 'Sidewinder Algorithm',
     content: `
           The Sidewinder algorithm is a relatively simple and efficient for generating mazes.
           It is named after the sidewinder snake due to the pattern it creates in the maze.
           The algorithm primarily works by carving passages either horizontally or vertically, resulting in a maze with a strong bias towards corridors that are mostly horizontal or mostly vertic`,
   },
   {
-    id: 8,
+    id: 9,
     heading: 'Labyrinth Algorithm',
     content: `
           The Labyrinth algorithm is a maze generation algorithm that works by creating a grid of cells and carving passages between them.
           It is a simple and efficient algorithm that can generate mazes of varying complexity.
         `,
   },
   {
-    id: 9,
+    id: 10,
     heading: 'Random Algorithm',
     content: `
           The Random algorithm is a simple maze generation algorithm that works by randomly placing the walls in the grid.

src/apps/path-finder/components/modal-icon/modals.module.scss

@@ -1,6 +1,6 @@
 @use '/src/host/styles/theme';
 
-.mainModal {
+.infoButton {
   display: none;
 }
 
@@ -81,8 +81,8 @@
 }
 
 @media (width >= 1200px) {
-  .mainModal {
-    display: block;
+  .infoButton {
+    display: inline-block;
   }
 }
 

src/apps/path-finder/components/modal-icon/modals.tsx

@@ -18,7 +18,11 @@ const Modals = ({ content }: Props) => {
   };
 
   return (
-    <div className={classes.mainModal}>
+    <>
+      <button onClick={handleShowModal} className={classes.infoButton}>
+        <Info size={20} />
+      </button>
+
       <dialog ref={dialogRef} className={classes.dialog}>
         <button onClick={handleCloseModal} className={classes.closeButton}>
           <X />
@@ -33,11 +37,7 @@ const Modals = ({ content }: Props) => {
           ))}
         </div>
       </dialog>
-
-      <button onClick={handleShowModal} className={classes.infoButton}>
-        <Info />
-      </button>
-    </div>
+    </>
   );
 };