Toast positions for sm devices

src/lib/components/Toast.svelte

@@ -78,7 +78,8 @@
     if (mounted && toast) {
       toast?.onEnter?.(callbackProps)
       if (toast.target) {
-        const element = qs(toast.target)
+        const query = (window.innerWidth <= 900 && toast.mobileTarget) || toast.target
+        const element = qs(query)
 
         if (element) {
           const style = getComputedStyle(element)
@@ -218,14 +219,6 @@
   display: grid
   grid-template-columns: auto 1fr
 
-  &.top
-    top: 0
-    bottom: auto
-
-  &.right
-    right: 0
-    left: auto
-
 .toast-img
   width: 35px
   display: flex
@@ -266,6 +259,15 @@
   .toast-wrapper
     font-size: 0.875rem
 
+  .toast
+    &.top
+      top: 0
+      bottom: auto
+
+    &.right
+      right: 0
+      left: auto
+
   .toast-button
     font-size: 1rem
 

src/lib/data/toasts/tips.ts

@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { gameSettings } from "$lib/stores/state"
+import { gameSettings, userState } from "$lib/stores/state"
 
 import type { Toast } from "./types"
 
@@ -13,6 +13,7 @@ export const tips: Toast[] = [
     img: "guide.png",
     title: "Tip: Make a move",
     target: "#food-menu-wrapper",
+    mobilePosition: "bottom right",
     message:
       "Click the buttons here to pick up a food item, then click a square on your farm to swap them.",
     button: "Next"
@@ -24,6 +25,8 @@ export const tips: Toast[] = [
     img: "guide.png",
     title: "Tip: Undo your moves",
     target: "header .button-undo",
+    mobileTarget: "#mobile-menu .button-undo",
+    mobilePosition: "bottom right",
     message: `Did you know you can use this button to undo your last move? You have up to ${$gameSettings.undoLimit} undos per game, so use them wisely!`,
     button: "Next"
   },
@@ -33,9 +36,22 @@ export const tips: Toast[] = [
     next: "tip-4",
     img: "guide.png",
     target: ".food-items-grid",
+    mobilePosition: "bottom right",
     title: "Tip: Optimise your land use",
     message:
       "The best foods to add are the ones that will give you the most calories per hectare. Swap them out with the lowest calorie per hectare foods you have on your farm.",
+    onEnter: () => {
+      userState.update(($u) => {
+        $u.isMobileTablesOpen = true
+        return $u
+      })
+    },
+    onDismiss: () => {
+      userState.update(($u) => {
+        $u.isMobileTablesOpen = false
+        return $u
+      })
+    },
     button: "Next"
   },
   {

src/lib/data/toasts/types.ts

@@ -20,6 +20,7 @@ export type Toast = {
   button?: string
   target?: string
   next?: string | number
+  mobileTarget?: string
   mobilePosition?: "top left" | "top right" | "bottom left" | "bottom right"
   task?: (props: CallBackProps) => boolean
   trigger?: (props: CallBackProps) => boolean