Skip to content

Commit ea9b07c

Browse files
risunCodeclaude
risunCode
and
claude
committed
ui: make app detail modal more compact and responsive
- Reduce modal height (max-h-[85vh] with scroll) - Smaller header (12px icon, base font size) - Compact badges (rounded-md, smaller padding) - Tighter info grid (2px gap, smaller padding) - Smaller action buttons (16px icons, 2.5px padding) - Better space utilization for mobile devices - Improve overall responsive layout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent a7f3013 commit ea9b07c

1 file changed

Lines changed: 39 additions & 39 deletions

File tree

‎web/src/components/apps/AppDetailSheet.tsx‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -95,43 +95,43 @@ export default function AppDetailSheet({ isOpen, onClose, app }: AppDetailSheetP
9595
return (
9696
<>
9797
<div className="modal-overlay" onClick={onClose} style={{ zIndex: 999 }}>
98-
<div className="modal-content max-w-lg" onClick={e => e.stopPropagation()}>
98+
<div className="modal-content max-w-md max-h-[85vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
9999
{/* Header */}
100-
<div className="flex items-start gap-4 mb-6">
100+
<div className="flex items-start gap-3 mb-4">
101101
{/* App Icon */}
102-
<div className="w-16 h-16 flex-shrink-0">
102+
<div className="w-12 h-12 flex-shrink-0">
103103
{app.iconBase64 ? (
104104
<img
105105
src={`data:image/png;base64,${app.iconBase64}`}
106106
alt={app.appName}
107-
className="w-full h-full object-cover rounded-2xl"
107+
className="w-full h-full object-cover rounded-xl"
108108
/>
109109
) : (
110-
<div className="w-full h-full rounded-2xl bg-surface flex items-center justify-center">
111-
<Package size={32} className="text-text-muted" />
110+
<div className="w-full h-full rounded-xl bg-surface flex items-center justify-center">
111+
<Package size={24} className="text-text-muted" />
112112
</div>
113113
)}
114114
</div>
115115

116116
{/* App Info */}
117117
<div className="flex-1 min-w-0">
118-
<h2 className="text-lg font-bold text-text-primary truncate">{app.appName}</h2>
118+
<h2 className="text-base font-bold text-text-primary truncate">{app.appName}</h2>
119119
<p className="text-xs text-text-muted font-mono truncate">{app.packageName}</p>
120-
<div className="flex items-center gap-2 mt-2">
121-
<span className="text-xs px-2 py-0.5 rounded-full bg-surface text-text-secondary">
120+
<div className="flex items-center gap-1.5 mt-1.5">
121+
<span className="text-xs px-1.5 py-0.5 rounded-md bg-surface text-text-secondary">
122122
v{app.versionName}
123123
</span>
124124
{app.isSystemApp ? (
125-
<span className="text-xs px-2 py-0.5 rounded-full bg-text-muted/10 text-text-muted">
126-
System App
125+
<span className="text-xs px-1.5 py-0.5 rounded-md bg-text-muted/10 text-text-muted">
126+
System
127127
</span>
128128
) : (
129-
<span className="text-xs px-2 py-0.5 rounded-full bg-success/10 text-success">
130-
User App
129+
<span className="text-xs px-1.5 py-0.5 rounded-md bg-success/10 text-success">
130+
User
131131
</span>
132132
)}
133133
{app.isFrozen && (
134-
<span className="text-xs px-2 py-0.5 rounded-full bg-info/10 text-info">
134+
<span className="text-xs px-1.5 py-0.5 rounded-md bg-info/10 text-info">
135135
Frozen
136136
</span>
137137
)}
@@ -141,14 +141,14 @@ export default function AppDetailSheet({ isOpen, onClose, app }: AppDetailSheetP
141141
{/* Close Button */}
142142
<button
143143
onClick={onClose}
144-
className="w-8 h-8 rounded-lg bg-surface flex items-center justify-center hover:bg-surface-hover transition-colors"
144+
className="w-7 h-7 rounded-lg bg-surface flex items-center justify-center hover:bg-surface-hover transition-colors"
145145
>
146-
<X size={16} className="text-text-muted" />
146+
<X size={14} className="text-text-muted" />
147147
</button>
148148
</div>
149149

150150
{/* Info Grid */}
151-
<div className="grid grid-cols-2 gap-3 mb-6">
151+
<div className="grid grid-cols-2 gap-2 mb-4">
152152
<InfoItem
153153
icon={HardDrive}
154154
label="App Size"
@@ -187,28 +187,28 @@ export default function AppDetailSheet({ isOpen, onClose, app }: AppDetailSheetP
187187

188188
{/* Background State Section */}
189189
{app.backgroundOps && (
190-
<div className="mb-6">
190+
<div className="mb-4">
191191
<button
192192
onClick={() => setShowBackgroundOps(!showBackgroundOps)}
193-
className="w-full flex items-center justify-between p-3 rounded-xl bg-surface hover:bg-surface-hover transition-colors"
193+
className="w-full flex items-center justify-between p-2.5 rounded-lg bg-surface hover:bg-surface-hover transition-colors"
194194
>
195195
<div className="flex items-center gap-2">
196-
<ShieldAlert size={16} className="text-text-secondary" />
196+
<ShieldAlert size={14} className="text-text-secondary" />
197197
<span className="text-sm font-medium text-text-primary">Background State</span>
198198
</div>
199199
{showBackgroundOps ? (
200-
<ChevronUp size={16} className="text-text-muted" />
200+
<ChevronUp size={14} className="text-text-muted" />
201201
) : (
202-
<ChevronDown size={16} className="text-text-muted" />
202+
<ChevronDown size={14} className="text-text-muted" />
203203
)}
204204
</button>
205205

206206
{showBackgroundOps && (
207-
<div className="mt-2 p-4 rounded-xl bg-surface space-y-3 animate-slide-down">
207+
<div className="mt-2 p-3 rounded-lg bg-surface space-y-2 animate-slide-down">
208208
<div className="flex justify-between items-center">
209-
<span className="text-sm text-text-secondary">RUN_IN_BACKGROUND</span>
209+
<span className="text-xs text-text-secondary">RUN_IN_BACKGROUND</span>
210210
<span className={cn(
211-
"text-sm font-medium",
211+
"text-xs font-medium",
212212
app.backgroundOps.runInBackground === 'allow' ? 'text-success' :
213213
app.backgroundOps.runInBackground === 'deny' ? 'text-error' :
214214
'text-warning'
@@ -217,17 +217,17 @@ export default function AppDetailSheet({ isOpen, onClose, app }: AppDetailSheetP
217217
</span>
218218
</div>
219219
<div className="flex justify-between items-center">
220-
<span className="text-sm text-text-secondary">RUN_ANY_IN_BACKGROUND</span>
220+
<span className="text-xs text-text-secondary">RUN_ANY_IN_BACKGROUND</span>
221221
<span className={cn(
222-
"text-sm font-medium",
222+
"text-xs font-medium",
223223
app.backgroundOps.runAnyInBackground === 'allow' ? 'text-success' :
224224
app.backgroundOps.runAnyInBackground === 'deny' ? 'text-error' :
225225
'text-warning'
226226
)}>
227227
{app.backgroundOps.runAnyInBackground}
228228
</span>
229229
</div>
230-
<p className="text-xs text-text-muted italic">
230+
<p className="text-xs text-text-muted italic pt-1">
231231
This value may reset itself, this is normal.
232232
</p>
233233
</div>
@@ -236,8 +236,8 @@ export default function AppDetailSheet({ isOpen, onClose, app }: AppDetailSheetP
236236
)}
237237

238238
{/* Quick Actions */}
239-
<div className="space-y-3">
240-
<h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
239+
<div className="space-y-2.5">
240+
<h3 className="text-xs font-semibold text-text-muted uppercase tracking-wide">
241241
Quick Actions
242242
</h3>
243243

@@ -322,7 +322,7 @@ export default function AppDetailSheet({ isOpen, onClose, app }: AppDetailSheetP
322322
</div>
323323

324324
{/* Secondary Actions - 2 columns */}
325-
<div className="grid grid-cols-2 gap-2 pt-2">
325+
<div className="grid grid-cols-2 gap-2 pt-1">
326326
{/* App Info */}
327327
<ActionButton
328328
icon={Info}
@@ -394,12 +394,12 @@ interface InfoItemProps {
394394

395395
function InfoItem({ icon: Icon, label, value, valueClass }: InfoItemProps) {
396396
return (
397-
<div className="p-3 rounded-xl bg-surface col-span-2">
398-
<div className="flex items-center gap-2 mb-1">
399-
<Icon size={12} className="text-text-muted" />
397+
<div className="p-2 rounded-lg bg-surface">
398+
<div className="flex items-center gap-1.5 mb-0.5">
399+
<Icon size={11} className="text-text-muted" />
400400
<span className="text-xs text-text-muted">{label}</span>
401401
</div>
402-
<p className={cn('text-sm font-medium', valueClass || 'text-text-primary')}>
402+
<p className={cn('text-sm font-medium truncate', valueClass || 'text-text-primary')}>
403403
{value}
404404
</p>
405405
</div>
@@ -437,18 +437,18 @@ function ActionButton({
437437
onClick={onClick}
438438
disabled={disabled || loading}
439439
className={cn(
440-
'flex flex-col items-center justify-center gap-1.5 p-3 rounded-xl transition-all duration-200',
440+
'flex flex-col items-center justify-center gap-1 p-2.5 rounded-lg transition-all duration-200',
441441
colorStyles[color],
442442
disabled && 'opacity-50 cursor-not-allowed',
443443
'active:scale-[0.95]'
444444
)}
445445
>
446446
{loading ? (
447-
<div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin" />
447+
<div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
448448
) : (
449-
<Icon size={18} strokeWidth={1.5} />
449+
<Icon size={16} strokeWidth={1.5} />
450450
)}
451-
<span className="text-xs font-medium">{label}</span>
451+
<span className="text-xs font-medium leading-tight">{label}</span>
452452
</button>
453453
)
454454
}

0 commit comments

Comments
 (0)