chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add mobile responsiveness, design consistency, and micro-interactions

Browse Source 
- Add mobile hamburger menu with slide-out nav drawer (AppLayout)
- Make modals responsive: full-width on mobile, slide-up animation
- Scratchpad becomes full-screen overlay on mobile with backdrop
- Folder sidebar hidden on mobile, opens as slide-over drawer
- Tree editor shows "Desktop Required" gate on mobile
- Stack action buttons vertically on mobile (sessions, detail pages)
- Increase touch targets throughout (buttons, close icons)
- Add CSS animations: fade-in, slide-in-left, scale-in, btn-press
- Add card hover lift effect and consistent border highlights
- Standardize page padding (px-4 py-6 sm:px-6 sm:py-8)
- Responsive headings (text-2xl sm:text-3xl)
- CustomStepModal goes full-screen on mobile
- Tighten auth page spacing on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-06 01:58:39 -05:00
parent cf6d8bd57b
commit 90ff25003d
14 changed files with 395 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/pages/SettingsPage.tsx
View File

@@ -9,11 +9,11 @@ export function SettingsPage() {
const { theme } = useThemeStore()
return (
<div className="container mx-auto px-4 py-8">
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-8">
<div className="flex items-center gap-3">
<Settings className="h-8 w-8 text-primary" />
<h1 className="text-3xl font-bold text-foreground">Settings</h1>
<h1 className="text-2xl font-bold text-foreground sm:text-3xl">Settings</h1>
</div>
<p className="mt-2 text-muted-foreground">
Manage your application preferences
@@ -22,14 +22,14 @@ export function SettingsPage() {
<div className="max-w-2xl space-y-6">
{/* Appearance Section */}
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
<div className="rounded-lg border border-border bg-card p-4 shadow-sm sm:p-6">
<h2 className="text-lg font-semibold text-card-foreground">Appearance</h2>
<p className="mt-1 text-sm text-muted-foreground">
Customize how ResolutionFlow looks on your device
</p>
<div className="mt-4">
<label className="block text-sm font-medium text-card-foreground">
<label className="block font-label text-sm font-medium text-card-foreground">
Theme
</label>
<p className="text-sm text-muted-foreground">
@@ -42,7 +42,7 @@ export function SettingsPage() {
</div>
{/* Export Preferences Section */}
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
<div className="rounded-lg border border-border bg-card p-4 shadow-sm sm:p-6">
<h2 className="text-lg font-semibold text-card-foreground">Export Preferences</h2>
<p className="mt-1 text-sm text-muted-foreground">
Configure default settings for session exports
@@ -51,7 +51,7 @@ export function SettingsPage() {
<div className="mt-4">
<label
htmlFor="export-format"
className="block text-sm font-medium text-card-foreground"
className="block font-label text-sm font-medium text-card-foreground"
>
Default Export Format
</label>
@@ -76,7 +76,7 @@ export function SettingsPage() {
</div>
{/* About Section */}
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
<div className="rounded-lg border border-border bg-card p-4 shadow-sm sm:p-6">
<h2 className="text-lg font-semibold text-card-foreground">About</h2>
<p className="mt-1 text-sm text-muted-foreground">
ResolutionFlow - Decision Tree Platform