e2e selector fixes

cypress/e2e/path-finder/home.cy.ts

@@ -6,7 +6,8 @@ describe('path finder', () => {
   });
 
   it('should verify page header', () => {
-    cy.get('[data-testid="navbar"]').should('contain.html', 'Path Finder');
+    cy.get('[data-testid="title"]').should('be.visible');
+    cy.get('[data-testid="title"]').should('contain.html', 'Path Finder');
   });
 
   it('should verify the maze dropdowns', () => {

cypress/e2e/sorting-visualizer/home.cy.ts

@@ -4,9 +4,9 @@ describe('landing page', () => {
   });
 
   it('should verify sorting', () => {
-    cy.get('[data-testid="navbar"]').should('be.visible');
+    cy.get('[data-testid="title"]').should('be.visible');
 
-    cy.get('[data-testid="navbar"]').should(
+    cy.get('[data-testid="title"]').should(
       'contain.html',
       'Sorting Visualizer'
     );

src/apps/path-finder/components/app-tour/app-tour.module.scss

@@ -0,0 +1,13 @@
+@use '/src/host/styles/theme';
+
+.tour {
+  border: 1px solid theme.$base;
+  padding: 2px 4px;
+  display: none;
+}
+
+@media (width >= 1024px) {
+  .tour {
+    display: block;
+  }
+}

src/apps/path-finder/components/app-tour/app-tour.tsx

@@ -1,5 +1,6 @@
-import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
 import { useSetState } from 'react-use';
+import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
+import classes from './app-tour.module.scss';
 import mazeVideo from '/assets/maze.mp4';
 import pathVideo from '/assets/path.mp4';
 
@@ -99,10 +100,7 @@ function AppTour() {
         />
       </div>
 
-      <button
-        onClick={handleClickStart}
-        className="border border-gray-400 rounded px-1 mx-2 hover:border-gray-500"
-      >
+      <button onClick={handleClickStart} className={classes.tour}>
         Take Tour
       </button>
     </>

src/apps/path-finder/components/cell-info/cell-info.module.scss

@@ -1,4 +1,5 @@
 @use '/src/host/styles/theme';
+
 .cellInfo {
   display: none;
   gap: 20px;
@@ -41,4 +42,3 @@
     display: flex;
   }
 }
-