Skip to content

Credit College

School Administrator

All sections
Ask Otto AI
Help

What is this page?

Responsive shell

Role aware

This page proves dense desktop patterns and 390 px mobile-safe navigation for student, instructor, and staff contexts.

Audience
Administrator
Current limits
The controls are visual proof only. They do not submit work, open native mobile apps, or store layout preferences.

Related Otto Guide links

Review responsive patternstaskMobile and responsive referencereferenceMobile app guide areaconceptOpen reference page placeholder

Support request boundary

Use Sev3 if a mobile proof overflows; use Sev4 for density or scanning feedback. This panel does not submit a support case.

Sev1: Critical outage or data-risk emergency

Target: 1-hour response, 24/7 paging during pilot

Sev2: Major workflow blocked

Target: 4 business hours

Sev3: Standard product question or non-urgent issue

Target: 1 business day

Sev4: How-to, cosmetic, or future enhancement

Target: 2 business days

These preview controls are placeholders. Real AI answers, search, walkthroughs, and support submission come in later tickets.

Notifications5

Static proof preview

Real notification feeds, delivery, and preferences arrive in a later ticket.

Sam Director

Sam Director

sam.director@otto-fixture.test

Switch local proof role

StudentInstructorSchool Administrator

This changes only the local shell proof. Production role changes remain server-validated future work.

Search is a keyboard-focusable skeleton. No real index or permissioned search results are implemented in this ticket.

Local responsive shell proof

Responsive Shell

Reusable responsive layouts, staff-friendly dense desktop patterns, and role-aware mobile tabs for 390 px review.

Otto Fixture Credit College

School Administrator · Sam Director

Responsive primitives stay dense, scannable, and mobile-safe.

These primitives are proof-only, but they are shaped for future staff workspaces, student dashboards, settings pages, and screenshot automation.

App shellSettingsBrandingMarketing

Queue pattern

Scroll within the panel instead of forcing page-wide overflow.

Dense

R2T4 return review

Finance · Due in 3 days

Open

Tour follow-up batch

Admissions · 12 leads

Open

Transcript hold decision

Registrar · Needs review

Blocked

BPPE evidence checklist

Compliance · 8 items

Open

Summary/detail pattern

Desktop can show metrics, detail, and actions together. Phone stacks the same information without hiding the next action.

No workflow
Open tasks
28
Due today
9
Blocked
3
Ready mobile
390 px

Action toolbar

Actions wrap instead of shrinking text into unreadable buttons.

Stable panes

List/detail layouts use `minmax(0, 1fr)` so long labels stay inside their panes.

Role-aware mobile tab examples

Tabs are presentation and routing hints only. Server authorization and RLS remain the real access controls.

Local proof

AI

Ask Otto remains visibly AI

Responsive proof

Sources
Mobile tabs can place Ask Otto in a high-value slot, but every AI surface keeps the Otto teal treatment and AI label.

Boundaries for Ticket 016

This route proves responsive shell patterns only. Native apps, PWA install polish, push, offline cache, camera QR, real inboxes, real calendars, and module workflows remain later tickets.