Design Brand Mobile Admin Frontend

Purple Rebrand, Admin Corrections & Mobile Layout Overhaul

GroupGPT Team

Every teal accent is replaced with GroupGPT's brand purple #742fff, admins gain a right-click message correction UI, and mobile layout gets dvh viewport fixes for iOS Safari.

Right-Click Correction UI

Admin users now see a context menu when right-clicking any message. The menu offers a "Correct" action that opens a panel where the admin can enter the intended response — the corrected text is stored as training signal (sent via corrections route). This is a human-in-the-loop feedback mechanism for improving AI quality over time.

Purple Rebrand

Every instance of the teal accent color (#6B8C99) was replaced with GroupGPT's new brand purple (#6450dc). This touched CSS across roughly a dozen components — buttons, borders, hover states, focus rings, and selected states in the room sidebar.

Mobile Layout Overhaul

Several mobile-specific CSS issues were fixed:

  • Switched from 100vh to 100dvh to handle the iOS Safari chrome correctly (prevents content being hidden behind the address bar).
  • Applied 550px breakpoints more consistently across the chat and sidebar layouts.
  • Touch targets on buttons were enlarged to meet minimum tap-target guidelines.

Why it matters

The teal color was visually inconsistent with the brand direction established by the logo. The purple pass made the app feel cohesive. The mobile fixes were required before sharing with non-desktop users.