|
336 | 336 | <!-- Main Content: Split Layout --> |
337 | 337 | <main class="min-h-[calc(100vh-5rem)] flex flex-col overflow-hidden"> |
338 | 338 | <!-- Page Header --> |
339 | | - <div class="bg-white border-b border-gray-200 px-4 sm:px-6 py-4 flex-shrink-0"> |
| 339 | + <div class="bg-white border-b border-gray-200 px-4 sm:px-6 py-4 flex-shrink-0 min-w-0 overflow-hidden"> |
340 | 340 | <a href="/files" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 text-sm font-medium mb-2"> |
341 | 341 | <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
342 | 342 | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> |
343 | 343 | </svg> |
344 | 344 | Back to Signature Containers |
345 | 345 | </a> |
346 | | - <h1 class="text-xl sm:text-2xl font-bold text-gray-900 break-words">{file?.displayName || file?.name || 'Signature Container'}</h1> |
| 346 | + <h1 class="text-xl sm:text-2xl font-bold text-gray-900 break-words min-w-0">{file?.displayName || file?.name || 'Signature Container'}</h1> |
347 | 347 | {#if file?.description} |
348 | 348 | <p class="text-sm text-gray-600 mt-1">{file.description}</p> |
349 | 349 | {/if} |
|
401 | 401 | </div> |
402 | 402 |
|
403 | 403 | <!-- Right Side: Metadata Sidebar (30%) - Full width on mobile --> |
404 | | - <div class="flex-1 lg:flex-[0.3] bg-white border-t lg:border-t-0 lg:border-l border-gray-200 overflow-y-auto"> |
405 | | - <div class="p-4 sm:p-6 space-y-6"> |
| 404 | + <div class="flex-1 lg:flex-[0.3] bg-white border-t lg:border-t-0 lg:border-l border-gray-200 overflow-y-auto min-w-0"> |
| 405 | + <div class="p-4 sm:p-6 space-y-6 min-w-0"> |
406 | 406 | <!-- Mobile Preview Button --> |
407 | 407 | <div class="lg:hidden mb-4"> |
408 | 408 | {#if previewUrl && (file.mimeType?.startsWith('image/') || file.mimeType === 'application/pdf')} |
|
420 | 420 | </div> |
421 | 421 |
|
422 | 422 | <!-- Signature Container Info --> |
423 | | - <div> |
| 423 | + <div class="min-w-0"> |
424 | 424 | <h2 class="text-sm font-semibold text-gray-900 mb-3">Signature Container</h2> |
425 | 425 | <div class="space-y-3"> |
426 | | - <div> |
| 426 | + <div class="min-w-0"> |
427 | 427 | <p class="text-xs text-gray-500 mb-1">Name</p> |
428 | 428 | <p class="text-sm font-medium text-gray-900 break-words">{file.displayName || file.name}</p> |
429 | 429 | </div> |
|
440 | 440 | <div class="border-t border-gray-200 pt-6"> |
441 | 441 | <h2 class="text-sm font-semibold text-gray-900 mb-3">File Information</h2> |
442 | 442 | <div class="space-y-2 text-sm"> |
443 | | - <div class="flex justify-between gap-2"> |
| 443 | + <div class="flex justify-between gap-2 min-w-0"> |
444 | 444 | <span class="text-gray-600 flex-shrink-0">File Name:</span> |
445 | | - <span class="text-gray-900 font-medium truncate text-right" title={file.name}>{file.name}</span> |
| 445 | + <span class="text-gray-900 font-medium truncate text-right min-w-0" title={file.name}>{file.name}</span> |
446 | 446 | </div> |
447 | 447 | <div class="flex justify-between gap-2"> |
448 | 448 | <span class="text-gray-600 flex-shrink-0">Size:</span> |
|
0 commit comments