Mobile Layout

On screens narrower than 768px, the assistant switches from a 400px sidebar to a full-width overlay that slides in from the right. The desktop sidebar behavior is unchanged.

Responsive Strategy

The AssistantPanel component uses Tailwind’s md: breakpoint (768px) to switch between two layout modes:

Viewport	Layout	Position	Width	Backdrop
< 768px	Overlay	fixed	100%	Yes (tap to close)
≥ 768px	Sidebar	relative	400px	No

On mobile, the panel renders as a fixed overlay with a slide transition. On desktop, it remains the original width-animated sidebar that pushes content.

Panel Rendering

The panel uses conditional Tailwind classes based on the is_open prop and viewport width:

// Mobile: fixed full-width overlay with slide transform
// Desktop: relative 400px sidebar with width transition
div {
    class: if props.is_open {
        "fixed inset-y-0 right-0 w-full z-40 transform translate-x-0
         transition-transform duration-300
         md:relative md:w-[400px] md:transform-none
         md:transition-all md:duration-300 md:z-20"
    } else {
        "fixed inset-y-0 right-0 w-full z-40 transform translate-x-full
         transition-transform duration-300
         md:relative md:w-0 md:transform-none
         md:transition-all md:duration-300"
    },
}

Mobile (< 768px): Uses translate-x-0 (open) and translate-x-full (closed) for a smooth slide-in from the right edge. Position is fixed to overlay the entire viewport.

Desktop (≥ 768px): The md: overrides switch to relative positioning with w-[400px] / w-0 width transitions — the same behavior as before this change.

Backdrop

A MobileDrawerBackdrop component renders behind the panel on mobile to allow tap-to-close:

MobileDrawerBackdrop {
    is_open: props.is_open,
    on_close: move |_| view_mode.set(AssistantViewMode::Closed),
}

The backdrop is a semi-transparent overlay that captures taps. It only renders on viewports below the md breakpoint.

Toggle Button

The assistant trigger button (the sparkle icon in the header) uses responsive sizing for accessible touch targets:

Viewport	Size	Rationale
Mobile	44 × 44px	WCAG AAA minimum touch target
Desktop	36 × 36px	Standard icon button size

Aurora Glow Animation

The toggle button features an animated glow effect with separate light and dark mode variants:

Dark Mode

State	Animation	Duration	Effect
Idle	assistant-aurora-orbit	6s loop	Orbital glow cycling through 4 directional phases
Hover	assistant-golden-hour	3s loop	Radial pulse with scale(1.12) elastic transform
Active	—	instant	scale(0.96) press feedback

Light Mode

Light mode uses the same keyframes with boosted opacities (~2×) for visibility against light backgrounds:

State	Animation	Opacity Multiplier
Idle	assistant-aurora-orbit-light	~2× (0.28 → 0.50)
Hover	assistant-golden-hour-light	~2× boosted

Light mode targets the [data-theme="light"] attribute selector.

Colors

The glow uses amber tones:

• Primary: rgb(245 158 11) (Amber 500)
• Warmth accent: rgb(180 130 60) (darker amber)

Reduced Motion

When prefers-reduced-motion is active:

• Animations are replaced with a static glow
• Hover scale reduces from 1.12 to 1.06
• Transitions switch to instant

File Reference

File	Change
components/assistant_panel_component.rs	Responsive fixed/relative layout with transform transitions
components/mobile_drawer_backdrop.rs	Backdrop with is_open + on_close handler
components/assistant_provider_component.rs	Toggle button responsive sizing
tailwind.css	Aurora glow keyframes for dark and light modes

All paths relative to src/mods/assistant/.