Mobile editor layout (vs desktop)
قراءة 3 دقيقة
A phone screen is ~10% of a desktop's — shrinking the desktop UI doesn't work. Slima on mobile is a redesigned editor: bottom navigation + sheets replace the side panels. This article compares to desktop; exact mobile elements may vary by device.
Mobile vs desktop
| Element | Desktop | Mobile |
|---|---|---|
| Activity bar | Far-left vertical strip | Folded into "More" sheet |
| Left panel (file tree) | Always visible, resizable | Bottom sheet swipes up |
| Right panel (AI Coach / Notes) | Always visible | Bottom sheet swipes up |
| Editor area | Centre, one of 3 columns | Full-screen (after panels collapse) |
| Format toolbar | Top of the editor | Floats above the on-screen keyboard |
| Sync / word count | Bottom strip | Folded into top header + More sheet |
Mobile-specific elements
Top mini header
- Left: ← back to shelf
- Centre: current chapter title
- Right: ⋯ more / settings
No toolbar at the top — the toolbar lives at the bottom, attached to the keyboard.
Editor area (centre, the largest region)
- Same Markdown editor as desktop, larger default font (phones are usually closer to the eye)
- No right-click → long-press selects and shows a context menu
- Inline AI suggestion / smart enter still work
Bottom nav
Four large buttons at the bottom (exact icons vary by version; typical contents):
- 📖 Chapter list sheet
- ✏️ Editor
- 💬 AI Coach sheet
- ⋯ More sheet (settings / sync / word count)
What's in each sheet
- Chapter sheet: all files in the current book + reorder / add / rename / search
- AI Coach sheet: same conversation UI as desktop
- More sheet: preferences / sync status / word counts / export / etc.
PWA differences
If installed as a PWA, the mobile experience is closer to a native app — launcher icon, offline support.
Related
Was this helpful?