Mobile toast redesign

[jzgom067]

This PR reworks the toasts on mobile into a notification-style layout. This aims to take up less space on mobile where screen space is already scarce.

New Toast Layout

Instead of toasts on mobile appearing on the bottom right, they now appear on the top over the header. In addition, when multiple toasts are shown, they are stacked with the most recent in the front.

Toasts that are not the most recent have their duration reset, so when they make it back to the front they still show for their full duration at once.

The mobile toasts also animate from the top, which means that they are closed with a swipe up instead of right.

Cleaned Up Animations

The tailwind.css file had a few unused animations, which have been removed. The file has also been reordered a bit, and the toast animations were renamed for their purpose.

[coderabbitai]

Walkthrough

This PR adds mobile-specific stacking behavior to the toast notification system. BaseToast gains a stackIndex prop that drives mobile-only positioning, scaling, background blending, content visibility, and a duration/progress-bar reset when stack position changes. ToastProvider detects mobile via useCheckMobile, adjusts swipe direction and viewport layout accordingly, computes each toast's stackIndex, passes it to BaseToast, and extends the pause condition to account for non-top mobile toasts. Tailwind CSS animation keyframes were reorganized, with slide-and-fade-out variables reintroduced and new toast-specific slide/swipe keyframes added, replacing prior slideUp/slideDown definitions.

Changes

Cohort / File(s)	Summary
Mobile toast stacking — frontend/src/features/system-feedback/toast/base.tsx	Added stackIndex prop, mobile detection, reset-on-stack-change logic, and mobile-specific rendering (positioning, scale, z-index, background blending, content visibility).
Mobile toast stacking — frontend/src/features/system-feedback/toast/provider.tsx	Added mobile detection, conditional swipe direction/viewport layout, per-toast stackIndex computation, updated pause condition, and prop wiring to BaseToast.
Mobile toast stacking — frontend/src/styles/tailwind.css	Reorganized animation keyframes: removed old fade-out set, reintroduced slide-and-fade-out variables, added new toast-specific slide/swipe keyframes replacing slideUp/slideDown.

Sequence Diagram(s)

sequenceDiagram
  participant ToastProvider
  participant BaseToast
  ToastProvider->>ToastProvider: compute stackIndex per toast
  ToastProvider->>BaseToast: pass stackIndex, isPaused
  BaseToast->>BaseToast: detect stackIndex change (mobile)
  BaseToast->>BaseToast: reset remainingTime, resetCount
  BaseToast->>BaseToast: render position/scale/z-index by stackIndex

Loading

Related issues: None specified.

Related PRs: None specified.

Suggested labels: frontend, ui, enhancement

Suggested reviewers: None specified.

Poem:
A rabbit stacks its toasts with care,
On mobile screens they fade with flair,
StackIndex tells each one its place,
Scaling back, then front to face,
Keyframes new replace the old—
A tidy pile, both brave and bold. 🐰📱

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Biome (2.5.1)

frontend/src/styles/tailwind.css

File contains syntax errors that prevent linting: Line 1: Tailwind-specific syntax is disabled.; Line 4: Tailwind-specific syntax is disabled.; Line 84: Tailwind-specific syntax is disabled.

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 0701d883-01ea-4faa-ac95-e0a9360ce27f

📥 Commits

Reviewing files that changed from the base of the PR and between 81f96e8 and 9d4b2cf.

📒 Files selected for processing (3)

• frontend/src/features/system-feedback/toast/base.tsx
• frontend/src/features/system-feedback/toast/provider.tsx
• frontend/src/styles/tailwind.css

[mirmirmirr]

[nitpick] There seems to be a bit of a delay on the animation of the toasts coming forward. Is it possible to make this smoother?

ScreenRecording_07-18-2026.11-42-06_1.MP4