fix overflow of text in alert card with warnings

libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx

@@ -47,9 +47,9 @@ const ErrorRenderer = ({ message, opt, editor, name }: ErrorRendererProps) => {
   return (
     <div>
       <div className={`sol ${opt.type} ${classList}`}>
-        <span className='d-flex flex-column' data-id={`${name}Button`} onClick={async () => await handlePointToErrorOnClick(opt.location, opt.fileName)}>
+        <span className='d-flex flex-column' data-id={`${name}Button`} onClick={async () => await handlePointToErrorOnClick(opt.location, opt.fileName)} style={{ cursor: "pointer", overflow: 'hidden', textOverflow: 'ellipsis' }}>
           <span className='h6 font-weight-bold'>{opt.name}</span>
-          { opt.item.warning }
+          <span>{ opt.item.warning }</span>
           {opt.item.more
             ? <span><a href={opt.item.more} target='_blank'>more</a></span>
             : <span> </span>

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -387,7 +387,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                               ? "alert alert-warning"
                               : "alert alert-danger"
                           }`}
-                          style={{ cursor: "pointer" }}
+                          style={{ cursor: "pointer", overflow: 'hidden', textOverflow: 'ellipsis' }}
                           onClick={async () => {
                             await props.analysisModule.call(
                               "editor",
@@ -426,7 +426,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                         <div
                           key={index}
                           className="alert alert-danger"
-                          style={{ cursor: "pointer" }}
+                          style={{ cursor: "pointer", overflow: 'hidden', textOverflow: 'ellipsis' }}
                           onClick={async () => {
                             await props.analysisModule.call(
                               "editor",
@@ -452,9 +452,10 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                           }}
                         >
                           <div>
-                            <span className="text-wrap">
+                            <span className="text-wrap" style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
                               {hint.formattedMessage}
                             </span>
+                            <br />
                             <span>{hint.type}</span>
                             <br />
                             <span>{`${hint.column}:${hint.line}`}</span>