From 2ba8d08acc030c1f49e30665d7efd405e544cbd9 Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Tue, 9 Jul 2024 13:26:25 +0530
Subject: [PATCH] UI Fixes in console logs

---
 .../OverviewPanel/components/EventRow/EventRow.tsx         | 4 ++--
 .../shared/DevTools/ConsolePanel/ConsolePanel.tsx          | 7 +++++--
 .../components/shared/DevTools/ConsoleRow/ConsoleRow.tsx   | 6 +++---
 frontend/app/components/ui/Icons/console_info.tsx          | 2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx b/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx
index cbbdbbddc..e063daddb 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx
@@ -36,7 +36,7 @@ const EventRow = React.memo((props: Props) => {
     >
       <div
         className={cn(
-          'uppercase color-gray-medium text-sm flex items-center py-1',
+          'uppercase text-sm flex items-center py-1',
           props.noMargin ? '' : 'ml-2'
         )}
       >
@@ -67,7 +67,7 @@ const EventRow = React.memo((props: Props) => {
             );
           })
         ) : (
-          <div className={cn('color-gray-medium text-sm pt-2', props.noMargin ? '' : 'ml-4')}>
+          <div className={cn('color-gray-medium text-sm', props.noMargin ? '' : 'ml-4')}>
             None captured.
           </div>
         )}
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 503301c78..ef4476c32 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -40,7 +40,7 @@ function renderWithNL(s: string | null = '') {
   ));
 }
 
-const getIconProps = (level: any) => {
+const getIconProps = (level: LogLevel) => {
   switch (level) {
     case LogLevel.INFO:
     case LogLevel.LOG:
@@ -58,8 +58,11 @@ const getIconProps = (level: any) => {
         name: 'console/error',
         color: 'red',
       };
+    default:
+      return {
+        name: 'console/info',
+      };
   }
-  return null;
 };
 
 const INDEX_KEY = 'console';
diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
index 39e18e161..550fab35e 100644
--- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
@@ -34,7 +34,7 @@ function ConsoleRow(props: Props) {
     <div
       style={style}
       className={cn(
-        'border-b flex items-start py-1 px-4 overflow-hidden group relative select-none',
+        'border-b flex items-start py-1 px-4 pe-8 overflow-hidden group relative select-none',
         {
           info: !log.isYellow && !log.isRed,
           warn: log.isYellow,
@@ -48,12 +48,12 @@ function ConsoleRow(props: Props) {
         <Icon size="14" {...iconProps} />
       </div>
       <div key={log.key} data-scroll-item={log.isRed}>
-        <div className="flex items-start text-sm">
+        <div className="flex items-start text-sm ">
           <div className={cn('flex items-start', { 'cursor-pointer underline decoration-dotted decoration-gray-400': !!log.errorId })}>
             {canExpand && (
               <Icon name={expanded ? 'caret-down-fill' : 'caret-right-fill'} className="mr-2" />
             )}
-            <span className='font-mono text-nowrap max-w-xs'>
+            <span className='font-mono '>
                 {renderWithNL(lines.pop())}
             </span>
           </div>
diff --git a/frontend/app/components/ui/Icons/console_info.tsx b/frontend/app/components/ui/Icons/console_info.tsx
index 674f08c44..787acce26 100644
--- a/frontend/app/components/ui/Icons/console_info.tsx
+++ b/frontend/app/components/ui/Icons/console_info.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 
 function Console_info(props: Props) {
-    const { size = 14, width = size, height = size, fill = '' } = props;
+  const { size = 14, width = size, height = size, fill = '' } = props;
     return (
       <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>
   );