sanctum-web Layout Redesign

Date: 2026-04-22
Repo: git.mithraic.cloud/ad3laid3/sanctum-web
Base: stoatchat/for-web (Solid.js + Vite + TypeScript)

Goal

Fork the Stoat web frontend and fix its layout proportions so the app feels native on desktop and works properly as a PWA. The message area should dominate the screen. Nothing in the API, auth, or business logic layer is changed.

Layout

The root shell is rebuilt as a four-column CSS Grid:

[server icons 65px] [channels 240px] [messages 1fr] [members 240px]

Panel	Width	Behaviour
Server icon sidebar	65px fixed	Icon-only, scrollable, always visible
Channel list	240px default	User-resizable, collapsible
Message area	fills remaining space (1fr)	Message list + pinned input at bottom
Member list	240px	Collapsible, hidden by default on narrow viewports

Scope

Changed:

Root layout shell component — CSS replaced with proper grid
Global CSS spacing/sizing tokens that cause proportion issues

Not changed:

API client
WebSocket layer
Auth flow
Message rendering components
Channel/server/member components
Any business logic

Build & Deployment

Repo: git.mithraic.cloud/ad3laid3/sanctum-web
CI: Forgejo Actions — pnpm build on push to main, rsync dist/ to VPS
Serves at: mithraic.space/app (replaces current for-web output, no Caddy changes)
Sanctum desktop app picks up the new frontend automatically on next launch

Out of Scope

Tauri desktop wrapper (separate project, builds on this frontend)
Feature additions beyond layout fixes
Mobile/responsive breakpoints beyond basic collapse behaviour
Rebranding (keep existing Stoat/Revolt dark aesthetic)

1.7 KiB Raw Blame History