improve mobile layout and tour overlay

src/components/Accordion.module.css

@@ -71,7 +71,8 @@
 
 @media (pointer: coarse) {
   .Trigger {
-    padding-top: 12px;
-    padding-bottom: 12px;
+    font-size: 13px;
+    padding: 12px 10px;
+    gap: 6px;
   }
 }

src/components/ExitTourButton.module.css

@@ -14,8 +14,9 @@
 
 @media (max-width: 799px) {
   .Button {
-    padding-right: 6px;
-    margin: 0 10px 0 0;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin: 0 6px 0 0;
   }
 
   .Button .ButtonLabel {

src/components/InspectorControls.module.css

@@ -130,9 +130,10 @@
 
 .CloseSidebarButton {
   composes: Button from "./Button.module.css";
-  margin: 12px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  font-size: 15px;
+  margin: 20px 12px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 @media (min-width: 900px) {

src/components/KeyboardOverlay.tsx

@@ -367,16 +367,23 @@ function DemoOverlay() {
 }
 
 function TourOverlay() {
+  const isLastStop = useCameraTour(
+    (s) =>
+      s.animation != null &&
+      s.animation.currentIndex >= s.animation.targets.length - 1,
+  );
   return (
     <>
       <div className={styles.Column}>
         <div className={styles.Row}>
-          <Key
-            action="nextStop"
-            label="Skip to next stop"
-            input={<PiMouseLeftClickFill className={styles.MouseIcon} />}
-            labelPosition="right"
-          />
+          {!isLastStop && (
+            <Key
+              action="nextStop"
+              label="Skip to next stop"
+              input={<PiMouseLeftClickFill className={styles.MouseIcon} />}
+              labelPosition="right"
+            />
+          )}
           <Key
             action="exitTour"
             label="Exit tour"