Skip to content

Commit 9554bf7

Browse files
edwinuxclaude
edwinux
and
claude
authored
fix: Resolve drawer content overflow on mobile and desktop (#29)
- Add min-w-0 to all grid containers and cells to prevent flex/grid overflow - Add truncate class to long text fields (phone, carrier, dates) - Add shrink-0 to labels to prevent them from being compressed - Add overflow-x-auto to Raw Data pre block for horizontal scrolling - Add break-all to error messages for long strings - Stack timing/call details on mobile with flex-col sm:flex-row 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent adacd3b commit 9554bf7

1 file changed

Lines changed: 48 additions & 48 deletions

File tree

‎admin/src/components/logs/LogDetailDrawer.tsx‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
3939
{/* Drawer */}
4040
<div className={cn(
4141
'fixed right-0 top-0 h-full w-full max-w-lg bg-card border-l border-border z-50',
42-
'animate-in slide-in-from-right duration-300'
42+
'animate-in slide-in-from-right duration-300 overflow-hidden'
4343
)}>
44-
<div className="flex flex-col h-full">
44+
<div className="flex flex-col h-full min-w-0">
4545
{/* Header */}
4646
<div className="flex items-center justify-between p-6 border-b border-border">
4747
<div>
@@ -55,10 +55,10 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
5555

5656
{/* Content */}
5757
<ScrollArea className="flex-1">
58-
<div className="p-6 space-y-6">
58+
<div className="p-6 space-y-6 min-w-0">
5959
{/* Status & Risk Section */}
60-
<div className="grid grid-cols-2 gap-4">
61-
<div className="space-y-2">
60+
<div className="grid grid-cols-2 gap-4 min-w-0">
61+
<div className="space-y-2 min-w-0">
6262
<p className="text-sm text-muted-foreground">Status</p>
6363
<div className="flex items-center gap-2">
6464
<StatusBadge status={log.status} />
@@ -100,10 +100,10 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
100100
<Phone className="h-4 w-4 text-muted-foreground" />
101101
Contact Information
102102
</h3>
103-
<div className="grid grid-cols-2 gap-4 text-sm">
104-
<div>
103+
<div className="grid grid-cols-2 gap-4 text-sm min-w-0">
104+
<div className="min-w-0">
105105
<p className="text-muted-foreground">Phone Number</p>
106-
<p className="font-mono font-medium">{log.phone}</p>
106+
<p className="font-mono font-medium truncate">{log.phone}</p>
107107
</div>
108108
<div>
109109
<p className="text-muted-foreground">Channel</p>
@@ -129,31 +129,31 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
129129
<Building2 className="h-4 w-4 text-muted-foreground" />
130130
Phone Metadata
131131
</h3>
132-
<div className="grid grid-cols-2 gap-4 text-sm">
132+
<div className="grid grid-cols-2 gap-4 text-sm min-w-0">
133133
{log.phone_number_type && (
134-
<div>
134+
<div className="min-w-0">
135135
<p className="text-muted-foreground">Number Type</p>
136136
<Badge variant="outline" className="mt-1 capitalize">
137137
{log.phone_number_type.toLowerCase().replace('_', ' ')}
138138
</Badge>
139139
</div>
140140
)}
141141
{log.phone_carrier && (
142-
<div>
142+
<div className="min-w-0">
143143
<p className="text-muted-foreground">Carrier</p>
144-
<p className="font-medium">{log.phone_carrier}</p>
144+
<p className="font-medium truncate">{log.phone_carrier}</p>
145145
</div>
146146
)}
147147
{log.phone_geocoding && (
148-
<div>
148+
<div className="min-w-0">
149149
<p className="text-muted-foreground">Location</p>
150-
<p className="font-medium">{log.phone_geocoding}</p>
150+
<p className="font-medium truncate">{log.phone_geocoding}</p>
151151
</div>
152152
)}
153153
{log.phone_timezone && (
154-
<div>
154+
<div className="min-w-0">
155155
<p className="text-muted-foreground">Timezone</p>
156-
<p className="font-mono text-xs">{log.phone_timezone}</p>
156+
<p className="font-mono text-xs truncate">{log.phone_timezone}</p>
157157
</div>
158158
)}
159159
</div>
@@ -169,20 +169,20 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
169169
<MapPin className="h-4 w-4 text-muted-foreground" />
170170
Location & Network
171171
</h3>
172-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
173-
<div>
172+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm min-w-0">
173+
<div className="min-w-0">
174174
<p className="text-muted-foreground">Country</p>
175175
<p className="font-medium">{log.country_code || 'Unknown'}</p>
176176
</div>
177-
<div>
177+
<div className="min-w-0">
178178
<p className="text-muted-foreground">IP Address</p>
179179
<p className="font-mono text-xs break-all">{log.ip_address || 'N/A'}</p>
180180
</div>
181-
<div className="sm:col-span-2">
181+
<div className="sm:col-span-2 min-w-0">
182182
<p className="text-muted-foreground">IP Subnet</p>
183183
<p className="font-mono text-xs break-all">{log.ip_subnet || 'N/A'}</p>
184184
</div>
185-
<div>
185+
<div className="min-w-0">
186186
<p className="text-muted-foreground">ASN</p>
187187
<p className="font-mono text-xs">{log.asn || 'N/A'}</p>
188188
</div>
@@ -197,21 +197,21 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
197197
<Clock className="h-4 w-4 text-muted-foreground" />
198198
Timing
199199
</h3>
200-
<div className="space-y-3 text-sm">
201-
<div className="flex flex-col sm:flex-row sm:justify-between gap-1">
202-
<span className="text-muted-foreground">Created</span>
203-
<span className="font-mono text-xs">{formatDate(log.created_at)}</span>
200+
<div className="space-y-3 text-sm min-w-0">
201+
<div className="flex flex-col sm:flex-row sm:justify-between gap-1 min-w-0">
202+
<span className="text-muted-foreground shrink-0">Created</span>
203+
<span className="font-mono text-xs truncate">{formatDate(log.created_at)}</span>
204204
</div>
205205
{log.updated_at && (
206-
<div className="flex flex-col sm:flex-row sm:justify-between gap-1">
207-
<span className="text-muted-foreground">Updated</span>
208-
<span className="font-mono text-xs">{formatDate(log.updated_at)}</span>
206+
<div className="flex flex-col sm:flex-row sm:justify-between gap-1 min-w-0">
207+
<span className="text-muted-foreground shrink-0">Updated</span>
208+
<span className="font-mono text-xs truncate">{formatDate(log.updated_at)}</span>
209209
</div>
210210
)}
211211
{log.expires_at && (
212-
<div className="flex flex-col sm:flex-row sm:justify-between gap-1">
213-
<span className="text-muted-foreground">Expires</span>
214-
<span className="font-mono text-xs">{formatDate(log.expires_at)}</span>
212+
<div className="flex flex-col sm:flex-row sm:justify-between gap-1 min-w-0">
213+
<span className="text-muted-foreground shrink-0">Expires</span>
214+
<span className="font-mono text-xs truncate">{formatDate(log.expires_at)}</span>
215215
</div>
216216
)}
217217
</div>
@@ -226,28 +226,28 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
226226
<Phone className="h-4 w-4 text-muted-foreground" />
227227
Call Details
228228
</h3>
229-
<div className="space-y-3 text-sm">
229+
<div className="space-y-3 text-sm min-w-0">
230230
{log.start_time && (
231-
<div className="flex justify-between">
232-
<span className="text-muted-foreground">Call Started</span>
233-
<span className="font-mono">{formatDate(log.start_time)}</span>
231+
<div className="flex flex-col sm:flex-row sm:justify-between gap-1 min-w-0">
232+
<span className="text-muted-foreground shrink-0">Call Started</span>
233+
<span className="font-mono text-xs truncate">{formatDate(log.start_time)}</span>
234234
</div>
235235
)}
236236
{log.answer_time && (
237-
<div className="flex justify-between">
238-
<span className="text-muted-foreground">Answered</span>
239-
<span className="font-mono">{formatDate(log.answer_time)}</span>
237+
<div className="flex flex-col sm:flex-row sm:justify-between gap-1 min-w-0">
238+
<span className="text-muted-foreground shrink-0">Answered</span>
239+
<span className="font-mono text-xs truncate">{formatDate(log.answer_time)}</span>
240240
</div>
241241
)}
242242
{log.end_time && (
243-
<div className="flex justify-between">
244-
<span className="text-muted-foreground">Call Ended</span>
245-
<span className="font-mono">{formatDate(log.end_time)}</span>
243+
<div className="flex flex-col sm:flex-row sm:justify-between gap-1 min-w-0">
244+
<span className="text-muted-foreground shrink-0">Call Ended</span>
245+
<span className="font-mono text-xs truncate">{formatDate(log.end_time)}</span>
246246
</div>
247247
)}
248248
{log.answer_time && log.end_time && (
249-
<div className="flex justify-between">
250-
<span className="text-muted-foreground">Duration</span>
249+
<div className="flex flex-col sm:flex-row sm:justify-between gap-1 min-w-0">
250+
<span className="text-muted-foreground shrink-0">Duration</span>
251251
<span className="font-mono font-medium text-primary">
252252
{((log.end_time - log.answer_time) / 1000).toFixed(1)}s
253253
</span>
@@ -262,26 +262,26 @@ export function LogDetailDrawer({ log, onClose }: LogDetailDrawerProps) {
262262
{log.error_message && (
263263
<>
264264
<Separator />
265-
<div className="space-y-2">
265+
<div className="space-y-2 min-w-0">
266266
<h3 className="text-sm font-medium text-destructive flex items-center gap-2">
267267
<Shield className="h-4 w-4" />
268268
Error Details
269269
</h3>
270-
<div className="p-3 rounded-md bg-destructive/10 border border-destructive/20">
271-
<p className="text-sm text-destructive font-mono">{log.error_message}</p>
270+
<div className="p-3 rounded-md bg-destructive/10 border border-destructive/20 min-w-0">
271+
<p className="text-sm text-destructive font-mono break-all">{log.error_message}</p>
272272
</div>
273273
</div>
274274
</>
275275
)}
276276

277277
{/* Raw Data */}
278278
<Separator />
279-
<div className="space-y-2">
279+
<div className="space-y-2 min-w-0">
280280
<h3 className="text-sm font-medium flex items-center gap-2">
281281
<Globe className="h-4 w-4 text-muted-foreground" />
282282
Raw Data
283283
</h3>
284-
<pre className="p-3 rounded-md bg-muted text-xs font-mono overflow-auto max-h-48">
284+
<pre className="p-3 rounded-md bg-muted text-xs font-mono overflow-x-auto overflow-y-auto max-h-48 whitespace-pre">
285285
{JSON.stringify(log, null, 2)}
286286
</pre>
287287
</div>

0 commit comments

Comments
 (0)