From ca70b689afa25da7c7d438f86ab76f4531ad4db1 Mon Sep 17 00:00:00 2001
From: tanjiro <56165694+NANDINI-star@users.noreply.github.com>
Date: Tue, 2 Sep 2025 03:08:09 +0900
Subject: [PATCH] Logs page screen size fixed (#14135)

* width fixed

* tailwind css instead of inline css

* minor width fixes

* time button fixed

* fixed width for the "showing..." part
---
 .../view_logs/RequestResponsePanel.tsx        | 14 +++---
 .../src/components/view_logs/index.tsx        | 48 ++++++++++---------
 .../src/components/view_logs/table.tsx        | 10 ++--
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx
index 4aaaabba58d..13f2547bd75 100644
--- a/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx
@@ -72,9 +72,9 @@ export function RequestResponsePanel({
   };
 
   return (
-    <div className="grid grid-cols-2 gap-4">
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full max-w-full overflow-hidden box-border">
       {/* Request Side */}
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden">
         <div className="flex justify-between items-center p-4 border-b">
           <h3 className="text-lg font-medium">Request</h3>
           <button 
@@ -88,13 +88,13 @@ export function RequestResponsePanel({
             </svg>
           </button>
         </div>
-        <div className="p-4 overflow-auto max-h-96">
-          <pre className="text-xs font-mono whitespace-pre-wrap break-all">{JSON.stringify(getRawRequest(), null, 2)}</pre>
+        <div className="p-4 overflow-auto max-h-96 w-full max-w-full box-border">
+          <pre className="text-xs font-mono whitespace-pre-wrap break-all w-full max-w-full overflow-hidden break-words">{JSON.stringify(getRawRequest(), null, 2)}</pre>
         </div>
       </div>
 
       {/* Response Side */}
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden">
         <div className="flex justify-between items-center p-4 border-b">
           <h3 className="text-lg font-medium">
             Response
@@ -116,9 +116,9 @@ export function RequestResponsePanel({
             </svg>
           </button>
         </div>
-        <div className="p-4 overflow-auto max-h-96 bg-gray-50">
+        <div className="p-4 overflow-auto max-h-96 bg-gray-50 w-full max-w-full box-border">
           {hasResponse ? (
-            <pre className="text-xs font-mono whitespace-pre-wrap break-all">{JSON.stringify(formattedResponse(), null, 2)}</pre>
+            <pre className="text-xs font-mono whitespace-pre-wrap break-all w-full max-w-full overflow-hidden break-words">{JSON.stringify(formattedResponse(), null, 2)}</pre>
           ) : (
             <div className="text-gray-500 text-sm italic text-center py-4">Response data not available</div>
           )}
diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx
index b227d493aa0..07de686fc48 100644
--- a/ui/litellm-dashboard/src/components/view_logs/index.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx
@@ -465,7 +465,7 @@ export default function SpendLogsTable({
   const displayLabel = isCustomDate ? getTimeRangeDisplay(isCustomDate, startTime, endTime) : selectedOption?.label
 
   return (
-    <div className="w-full p-6">
+    <div className="w-full max-w-screen p-6 overflow-x-hidden box-border">
       <TabGroup defaultIndex={0} onIndexChange={(index) => setActiveTab(index === 0 ? "request logs" : "audit logs")}>
         <TabList>
           <Tab>Request Logs</Tab>
@@ -518,11 +518,11 @@ export default function SpendLogsTable({
                   onApplyFilters={handleFilterChange}
                   onResetFilters={handleFilterReset}
                 />
-                <div className="bg-white rounded-lg shadow">
-                  <div className="border-b px-6 py-4">
-                    <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0">
-                      <div className="flex flex-wrap items-center gap-3">
-                        <div className="relative w-64">
+                <div className="bg-white rounded-lg shadow w-full max-w-full box-border">
+                  <div className="border-b px-6 py-4 w-full max-w-full box-border">
+                    <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0 w-full max-w-full box-border">
+                      <div className="flex flex-wrap items-center gap-3 w-full max-w-full box-border">
+                        <div className="relative w-64 min-w-0 flex-shrink-0">
                           <input
                             type="text"
                             placeholder="Search by Request ID"
@@ -545,8 +545,8 @@ export default function SpendLogsTable({
                           </svg>
                         </div>
 
-                        <div className="flex items-center gap-2">
-                          <div className="relative" ref={quickSelectRef}>
+                        <div className="flex items-center gap-2 min-w-0 flex-shrink">
+                          <div className="relative z-[9999]" ref={quickSelectRef}>
                             <button
                               onClick={() => setQuickSelectOpen(!quickSelectOpen)}
                               className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
@@ -563,7 +563,7 @@ export default function SpendLogsTable({
                             </button>
 
                             {quickSelectOpen && (
-                              <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border p-2 z-50">
+                              <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border p-2 z-[9999]">
                                 <div className="space-y-1">
                                   {quickSelectOptions.map((option) => (
                                     <button
@@ -654,7 +654,7 @@ export default function SpendLogsTable({
                       </div>
 
                       <div className="flex items-center space-x-4">
-                        <span className="text-sm text-gray-700">
+                        <span className="text-sm text-gray-700 whitespace-nowrap">
                           Showing {logs.isLoading ? "..." : filteredLogs ? (currentPage - 1) * pageSize + 1 : 0} -{" "}
                           {logs.isLoading
                             ? "..."
@@ -664,7 +664,7 @@ export default function SpendLogsTable({
                           of {logs.isLoading ? "..." : filteredLogs ? filteredLogs.total : 0} results
                         </span>
                         <div className="flex items-center space-x-2">
-                          <span className="text-sm text-gray-700">
+                          <span className="text-sm text-gray-700 min-w-[90px]">
                             Page {logs.isLoading ? "..." : currentPage} of{" "}
                             {logs.isLoading ? "..." : filteredLogs ? filteredLogs.total_pages : 1}
                           </span>
@@ -801,13 +801,13 @@ export function RequestViewer({ row }: { row: Row<LogEntry> }) {
   const totalMaskedEntities = getTotalMaskedEntities()
 
   return (
-    <div className="p-6 bg-gray-50 space-y-6">
+    <div className="p-6 bg-gray-50 space-y-6 w-full max-w-full overflow-hidden box-border">
       {/* Combined Info Card */}
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden">
         <div className="p-4 border-b">
           <h3 className="text-lg font-medium">Request Details</h3>
         </div>
-        <div className="grid grid-cols-2 gap-4 p-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 w-full max-w-full overflow-hidden">
           <div className="space-y-2">
             <div className="flex">
               <span className="font-medium w-1/3">Request ID:</span>
@@ -916,15 +916,17 @@ export function RequestViewer({ row }: { row: Row<LogEntry> }) {
       <ConfigInfoMessage show={missingData} />
 
       {/* Request/Response Panel */}
-      <RequestResponsePanel
-        row={row}
-        hasMessages={hasMessages}
-        hasResponse={hasResponse}
-        hasError={hasError}
-        errorInfo={errorInfo}
-        getRawRequest={getRawRequest}
-        formattedResponse={formattedResponse}
-      />
+      <div className="w-full max-w-full overflow-hidden">
+        <RequestResponsePanel
+          row={row}
+          hasMessages={hasMessages}
+          hasResponse={hasResponse}
+          hasError={hasError}
+          errorInfo={errorInfo}
+          getRawRequest={getRawRequest}
+          formattedResponse={formattedResponse}
+        />
+      </div>
 
       {/* Guardrail Data - Show only if present */}
       {hasGuardrailData && <GuardrailViewer data={row.original.metadata!.guardrail_information} />}
diff --git a/ui/litellm-dashboard/src/components/view_logs/table.tsx b/ui/litellm-dashboard/src/components/view_logs/table.tsx
index a0b6e25611a..c4f620e4413 100644
--- a/ui/litellm-dashboard/src/components/view_logs/table.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/table.tsx
@@ -52,8 +52,8 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="rounded-lg custom-border">
-      <Table className="[&_td]:py-0.5 [&_th]:py-1">
+    <div className="rounded-lg custom-border overflow-x-auto w-full max-w-full box-border">
+      <Table className="[&_td]:py-0.5 [&_th]:py-1 table-fixed w-full box-border" style={{minWidth: '800px'}}>
         <TableHead>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
@@ -100,8 +100,10 @@ export function DataTable<TData, TValue>({
 
                 {row.getIsExpanded() && (
                   <TableRow>
-                    <TableCell colSpan={row.getVisibleCells().length}>
-                      {renderSubComponent({ row })}
+                    <TableCell colSpan={row.getVisibleCells().length} className="p-0">
+                      <div className="w-full max-w-full overflow-hidden box-border">
+                        {renderSubComponent({ row })}
+                      </div>
                     </TableCell>
                   </TableRow>
                 )}