Add "open logs" button

Author: Koenvh1

src/components/LogMessages.tsx

@@ -15,22 +15,29 @@ export default function LogMessages({ text, issues, type }: LogMessagesProps) {
   let logLevel = lowestLogLevel(issues);
   return (
     <>
-      <span onClick={() => setShow(!show)}>  
+      <div className='log-column' onClick={() => setShow(!show)}>  
         <div className='log-label-container'>
           <span className={`log-label ${logLevel.text}`}>{logLevel.text.slice(0, 1)}</span>
         </div>
-        <a href='#'>
-          {text}
+        <div>
+        {text}
+        </div>
+        <div>
+        <a href='#' style={{
+          float: 'right'
+        }}>
+          (open logs)
         </a>
-      </span>
+        </div>
+      </div>
       {createPortal(
         <>
           <div
             className={`log-overlay ${show ? 'visible' : 'hidden'}`}
             onClick={() => setShow(false)}
           >
             <div className="bar">{show && <>
-              <h2>{type} log messages</h2> 
+              <h2>{type} log messages for {text}</h2> 
               <div className='log-messages'>
               {issues.map(issue => <div className=''>
                 <div className='log-label-container'>

src/style/log-messages.css

@@ -57,6 +57,24 @@
   margin-bottom: 1rem;
 }
 
+.log-column {
+  display: inline-flex;
+  width: 100%;
+}
+
+.log-column > div:nth-child(1) {
+  flex: 0 0 1rem;
+}
+
+.log-column > div:nth-child(2) {
+  flex: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.log-column > div:nth-child(3) {
+  flex: 0 0 3rem;
+}
 
 .log-messages {
     width: 100%;