fix(web): prevent usage log details dialog from clipping bottom content (#5533)

web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx

@@ -38,7 +38,6 @@ import { cn } from '@/lib/utils'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Label } from '@/components/ui/label'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Dialog } from '@/components/dialog'
 import { Dialog } from '@/components/dialog'
 import { StatusBadge, type StatusBadgeProps } from '@/components/status-badge'
 import { StatusBadge, type StatusBadgeProps } from '@/components/status-badge'
 import { DynamicPricingBreakdown } from '@/features/pricing/components/dynamic-pricing-breakdown'
 import { DynamicPricingBreakdown } from '@/features/pricing/components/dynamic-pricing-breakdown'
@@ -94,7 +93,7 @@ function DetailRow(props: {
       </span>
       </span>
       <span
       <span
         className={cn(
         className={cn(
-          'max-w-full min-w-0 text-xs break-all sm:break-words',
+          'max-w-full min-w-0 text-xs break-all sm:wrap-break-word',
           props.mono && 'font-mono',
           props.mono && 'font-mono',
           props.muted && 'text-muted-foreground'
           props.muted && 'text-muted-foreground'
         )}
         )}
@@ -558,11 +557,10 @@ export function DetailsDialog(props: DetailsDialogProps) {
       headerClassName='max-sm:gap-1'
       headerClassName='max-sm:gap-1'
       titleClassName='flex items-center gap-2 text-base'
       titleClassName='flex items-center gap-2 text-base'
       descriptionClassName='sr-only'
       descriptionClassName='sr-only'
-      contentHeight='min(72vh, 720px)'
-      bodyClassName='space-y-4'
+      contentHeight='min(72dvh, 720px)'
+      bodyClassName='pr-2 sm:pr-4'
     >
     >
-      <ScrollArea className='max-h-[70vh] min-w-0 overflow-hidden pr-2 max-sm:max-h-[calc(100dvh-7rem)] sm:pr-4'>
-        <div className='w-full max-w-full min-w-0 space-y-2.5 overflow-hidden py-1 sm:space-y-3'>
+      <div className='w-full max-w-full min-w-0 space-y-2.5 overflow-x-hidden py-1 sm:space-y-3'>
         {/* Overview section - key identifiers */}
         {/* Overview section - key identifiers */}
         <div className='min-w-0 space-y-1'>
         <div className='min-w-0 space-y-1'>
           {props.log.request_id && (
           {props.log.request_id && (
@@ -619,10 +617,7 @@ export function DetailsDialog(props: DetailsDialogProps) {
               label={t('IP Address')}
               label={t('IP Address')}
               value={
               value={
                 <span className='flex items-center gap-1'>
                 <span className='flex items-center gap-1'>
-                    <Globe
-                      className='size-3 text-amber-500'
-                      aria-hidden='true'
-                    />
+                  <Globe className='size-3 text-amber-500' aria-hidden='true' />
                   {props.log.ip}
                   {props.log.ip}
                 </span>
                 </span>
               }
               }
@@ -698,7 +693,7 @@ export function DetailsDialog(props: DetailsDialogProps) {
                     className='text-muted-foreground size-3'
                     className='text-muted-foreground size-3'
                     aria-hidden='true'
                     aria-hidden='true'
                   />
                   />
-                    <span className='min-w-0 break-all sm:break-words'>
+                  <span className='min-w-0 break-all sm:wrap-break-word'>
                     {conversionLabel}
                     {conversionLabel}
                   </span>
                   </span>
                 </div>
                 </div>
@@ -714,7 +709,7 @@ export function DetailsDialog(props: DetailsDialogProps) {
             label={t('Reject Reason')}
             label={t('Reject Reason')}
             variant='danger'
             variant='danger'
           >
           >
-              <p className='text-xs break-words'>{other.reject_reason}</p>
+            <p className='text-xs wrap-break-word'>{other.reject_reason}</p>
           </DetailSection>
           </DetailSection>
         )}
         )}
 
 
@@ -774,10 +769,7 @@ export function DetailsDialog(props: DetailsDialogProps) {
             ))}
             ))}
             {showLegacyTopupWarning && (
             {showLegacyTopupWarning && (
               <div className='flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400'>
               <div className='flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400'>
-                  <Info
-                    className='mt-0.5 size-3.5 shrink-0'
-                    aria-hidden='true'
-                  />
+                <Info className='mt-0.5 size-3.5 shrink-0' aria-hidden='true' />
                 <span>
                 <span>
                   {t(
                   {t(
                     'This record was written by a pre-upgrade instance and lacks audit info. Upgrade the instance to record server IP, callback IP, payment method and system version.'
                     'This record was written by a pre-upgrade instance and lacks audit info. Upgrade the instance to record server IP, callback IP, payment method and system version.'
@@ -1041,7 +1033,7 @@ export function DetailsDialog(props: DetailsDialogProps) {
               )}
               )}
               {Array.isArray(other.stream_status.errors) &&
               {Array.isArray(other.stream_status.errors) &&
                 other.stream_status.errors.length > 0 && (
                 other.stream_status.errors.length > 0 && (
-                    <pre className='bg-background/60 mt-1 max-h-32 overflow-y-auto rounded border p-2 font-mono text-[11px] leading-relaxed break-words whitespace-pre-wrap'>
+                  <pre className='bg-background/60 mt-1 max-h-32 overflow-y-auto rounded border p-2 font-mono text-[11px] leading-relaxed wrap-break-word whitespace-pre-wrap'>
                     {other.stream_status.errors.join('\n')}
                     {other.stream_status.errors.join('\n')}
                   </pre>
                   </pre>
                 )}
                 )}
@@ -1116,7 +1108,7 @@ export function DetailsDialog(props: DetailsDialogProps) {
                     className='shrink-0 font-medium'
                     className='shrink-0 font-medium'
                     copyable={false}
                     copyable={false}
                   />
                   />
-                    <span className='min-w-0 font-mono text-[11px] leading-relaxed break-all sm:break-words'>
+                  <span className='min-w-0 font-mono text-[11px] leading-relaxed break-all sm:wrap-break-word'>
                     {parsed.content}
                     {parsed.content}
                   </span>
                   </span>
                 </div>
                 </div>
@@ -1144,14 +1136,13 @@ export function DetailsDialog(props: DetailsDialogProps) {
                   <Copy className='size-3' />
                   <Copy className='size-3' />
                 )}
                 )}
               </Button>
               </Button>
-                <p className='min-w-0 pr-6 text-xs leading-relaxed break-all whitespace-pre-wrap sm:break-words'>
+              <p className='min-w-0 pr-6 text-xs leading-relaxed break-all whitespace-pre-wrap sm:wrap-break-word'>
                 {details}
                 {details}
               </p>
               </p>
             </div>
             </div>
           </div>
           </div>
         )}
         )}
       </div>
       </div>
-      </ScrollArea>
     </Dialog>
     </Dialog>
   )
   )
 }
 }