(UI) - Minor improvements to logs page (#9076)

* logs - make sure all cols have max width

* fix missing data message

* fix toggle handle responsive logs

ui/litellm-dashboard/src/components/view_logs/columns.tsx

@@ -37,20 +37,29 @@ export const columns: ColumnDef<LogEntry>[] = [
     id: "expander",
     header: () => null,
     cell: ({ row }) => {
+      const [localExpanded, setLocalExpanded] = React.useState(row.getIsExpanded());
+
+      // Memoize the toggle handler to prevent unnecessary re-renders
+      const toggleHandler = React.useCallback(() => {
+        setLocalExpanded((prev) => !prev);
+        row.getToggleExpandedHandler()();
+      }, [row]);
+
       return row.getCanExpand() ? (
         <button
-          {...{
-            onClick: row.getToggleExpandedHandler(),
-            style: { cursor: "pointer" },
-            "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
-          }}
-          className="w-6 h-6 flex items-center justify-center"
+          onClick={toggleHandler}
+          style={{ cursor: "pointer" }}
+          aria-label={localExpanded ? "Collapse row" : "Expand row"}
+          className="w-6 h-6 flex items-center justify-center focus:outline-none"
         >
           <svg
-            className={`w-4 h-4 transition-transform ${row.getIsExpanded() ? 'transform rotate-90' : ''}`}
+            className={`w-4 h-4 transform transition-transform duration-75 ${
+              localExpanded ? 'rotate-90' : ''
+            }`}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               strokeLinecap="round"
@@ -61,7 +70,7 @@ export const columns: ColumnDef<LogEntry>[] = [
           </svg>
         </button>
       ) : (
-        "●"
+        <span className="w-6 h-6 flex items-center justify-center">●</span>
       );
     },
   },
@@ -93,7 +102,7 @@ export const columns: ColumnDef<LogEntry>[] = [
     accessorKey: "request_id",
     cell: (info: any) => (
       <Tooltip title={String(info.getValue() || "")}>
-        <span className="font-mono text-xs max-w-[100px] truncate block">
+        <span className="font-mono text-xs max-w-[15ch] truncate block">
           {String(info.getValue() || "")}
         </span>
       </Tooltip>
@@ -114,7 +123,11 @@ export const columns: ColumnDef<LogEntry>[] = [
   {
     header: "Team Name",
     accessorKey: "metadata.user_api_key_team_alias",
-    cell: (info: any) => <span>{String(info.getValue() || "-")}</span>,
+    cell: (info: any) => (
+      <Tooltip title={String(info.getValue() || "-")}>
+        <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
+      </Tooltip>
+    ),
   },
   {
     header: "Key Hash",
@@ -123,7 +136,7 @@ export const columns: ColumnDef<LogEntry>[] = [
       const value = String(info.getValue() || "-");
       return (
         <Tooltip title={value}>
-          <span className="font-mono">{value.slice(0, 5)}...</span>
+          <span className="font-mono max-w-[15ch] truncate block">{value}</span>
         </Tooltip>
       );
     },
@@ -131,7 +144,11 @@ export const columns: ColumnDef<LogEntry>[] = [
   {
     header: "Key Name",
     accessorKey: "metadata.user_api_key_alias",
-    cell: (info: any) => <span>{String(info.getValue() || "-")}</span>,
+    cell: (info: any) => (
+      <Tooltip title={String(info.getValue() || "-")}>
+        <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
+      </Tooltip>
+    ),
   },
   {
     header: "Model",
@@ -154,7 +171,7 @@ export const columns: ColumnDef<LogEntry>[] = [
             />
           )}
           <Tooltip title={modelName}>
-            <span className="max-w-[100px] truncate">
+            <span className="max-w-[15ch] truncate block">
               {modelName}
             </span>
           </Tooltip>
@@ -181,12 +198,20 @@ export const columns: ColumnDef<LogEntry>[] = [
   {
     header: "Internal User",
     accessorKey: "user",
-    cell: (info: any) => <span>{String(info.getValue() || "-")}</span>,
+    cell: (info: any) => (
+      <Tooltip title={String(info.getValue() || "-")}>
+        <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
+      </Tooltip>
+    ),
   },
   {
     header: "End User",
     accessorKey: "end_user",
-    cell: (info: any) => <span>{String(info.getValue() || "-")}</span>,
+    cell: (info: any) => (
+      <Tooltip title={String(info.getValue() || "-")}>
+        <span className="max-w-[15ch] truncate block">{String(info.getValue() || "-")}</span>
+      </Tooltip>
+    ),
   },
 
   {

ui/litellm-dashboard/src/components/view_logs/index.tsx

@@ -637,7 +637,7 @@ function RequestViewer({ row }: { row: Row<LogEntry> }) {
   const hasMessages = row.original.messages && 
     (Array.isArray(row.original.messages) ? row.original.messages.length > 0 : Object.keys(row.original.messages).length > 0);
   const hasResponse = row.original.response && Object.keys(formatData(row.original.response)).length > 0;
-  const missingData = !hasMessages || !hasResponse;
+  const missingData = !hasMessages && !hasResponse;
   
   // Format the response with error details if present
   const formattedResponse = () => {