feat/123: enable linux build (#127)

* feat/123: enable linux build
* feat/123: style: handle window width gracefully
* feat/123: update README

client/src/features/info/InfoLogger.jsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { HStack } from '@chakra-ui/react';
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { LoggingContext } from '../../app/context/LoggingContext';
 import style from './InfoLogger.module.scss';
@@ -60,7 +59,7 @@ export default function InfoLogger() {
       <CollapseBar title='Log' isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)} />
       {!collapsed && (
         <>
-          <HStack className={style.toggleBar}>
+          <div className={style.toggleBar}>
             <div
               onClick={() => setShowUser((s) => !s)}
               onAuxClick={() => disableOthers('USER')}
@@ -118,7 +117,7 @@ export default function InfoLogger() {
             <div onClick={clearLog} className={style.clear} role='button'>
               Clear
             </div>
-          </HStack>
+          </div>
           <ul className={style.log}>
             {data.map((d) => (
               <li

client/src/features/info/InfoLogger.module.scss

@@ -28,13 +28,13 @@
     margin-bottom: 2px;
 
     .time {
-      width: 13%;
+      width: 4.5em
     }
     .origin {
-      width: 18%;
+      width: 6em;
     }
     .msg {
-      width: 70%;
+      flex: 1;
     }
   }
 
@@ -63,6 +63,8 @@
 
 .toggleBar {
   display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
   font-size: 0.7em;
   justify-content: flex-start;
   padding: 0.5em 8px;
@@ -82,7 +84,6 @@
   }
 
   .clear {
-    margin-left: auto;
     border: 1px solid rgba($ontime-pink, 0.5);
   }
 }