From 9288757f974595d49a2a1f2ee52e50485508e0d2 Mon Sep 17 00:00:00 2001
From: Pitou <pitou.games@gmail.com>
Date: Tue, 4 Feb 2020 23:54:22 +0100
Subject: [PATCH] Allow horizontal scroll on small devices

---
 frontend/css/global.scss                |  3 ++
 frontend/logs/components/logs_table.tsx | 42 +++++++++++++------------
 frontend/logs/index.tsx                 |  4 +--
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/frontend/css/global.scss b/frontend/css/global.scss
index 4ed67c23c..04ecd0a8f 100644
--- a/frontend/css/global.scss
+++ b/frontend/css/global.scss
@@ -1058,6 +1058,9 @@ ul {
   .fa-ban {
     color: $medium_gray;
   }
+  .table-responsive{
+    border: none;
+  }
 }
 
 .logs-settings-menu {
diff --git a/frontend/logs/components/logs_table.tsx b/frontend/logs/components/logs_table.tsx
index ded52d2a1..71f9076fe 100644
--- a/frontend/logs/components/logs_table.tsx
+++ b/frontend/logs/components/logs_table.tsx
@@ -69,26 +69,28 @@ const LOG_TABLE_CLASS = [
 
 /** All log messages with select data in table form for display in the app. */
 export const LogsTable = (props: LogsTableProps) => {
-  return <table className={LOG_TABLE_CLASS}>
-    <thead>
-      <tr>
-        <th><label>{t("Type")}</label></th>
-        <th><label>{t("Message")}</label></th>
-        <th><label>{t("(x, y, z)")}</label></th>
-        <th><label>{t("Time")}</label></th>
-      </tr>
-    </thead>
-    <tbody>
-      {filterByVerbosity(getFilterLevel(props.state), props.logs)
-        .map((log: TaggedLog) =>
-          <LogsRow
-            key={log.uuid}
-            tlog={log}
-            dispatch={props.dispatch}
-            markdown={props.state.markdown}
-            timeSettings={props.timeSettings} />)}
-    </tbody>
-  </table>;
+  return <div className={"table-responsive"}>
+    <table className={LOG_TABLE_CLASS}>
+      <thead>
+        <tr>
+          <th><label>{t("Type")}</label></th>
+          <th><label>{t("Message")}</label></th>
+          <th><label>{t("(x, y, z)")}</label></th>
+          <th><label>{t("Time")}</label></th>
+        </tr>
+      </thead>
+      <tbody>
+        {filterByVerbosity(getFilterLevel(props.state), props.logs)
+          .map((log: TaggedLog) =>
+            <LogsRow
+              key={log.uuid}
+              tlog={log}
+              dispatch={props.dispatch}
+              markdown={props.state.markdown}
+              timeSettings={props.timeSettings} />)}
+      </tbody>
+    </table>
+  </div>;
 };
 
 /** Get current verbosity filter level for a message type from LogsState. */
diff --git a/frontend/logs/index.tsx b/frontend/logs/index.tsx
index ff2157571..cb7b8ffd2 100644
--- a/frontend/logs/index.tsx
+++ b/frontend/logs/index.tsx
@@ -37,7 +37,7 @@ export class RawLogs extends React.Component<LogsProps, Partial<LogsState>> {
     } else {
       return currentValue as number;
     }
-  }
+  };
 
   state: LogsState = {
     autoscroll: false,
@@ -61,7 +61,7 @@ export class RawLogs extends React.Component<LogsProps, Partial<LogsState>> {
       this.props.dispatch(
         setWebAppConfigValue(safeNumericSetting(name + "_log"), newSetting));
     };
-  }
+  };
 
   /** Set log type filter level. i.e., level 2 shows verbosity 2 and lower.*/
   setFilterLevel = (name: keyof Filters) => {