From 20afb9d41560ae922dfba666668296db9ee65439 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Mon, 23 Oct 2023 21:01:21 +0200
Subject: [PATCH] responsive design

---
 src/Components/LogCard/index.js               | 37 +----------
 src/Pages/AdminArea/Manage/index.js           | 63 +++++++++++--------
 .../Overview/GroupTasksTableList.js           |  2 +-
 3 files changed, 41 insertions(+), 61 deletions(-)

diff --git a/src/Components/LogCard/index.js b/src/Components/LogCard/index.js
index 53b29ba..74ee6b8 100644
--- a/src/Components/LogCard/index.js
+++ b/src/Components/LogCard/index.js
@@ -11,8 +11,6 @@ export default function LogCard({
   logApiAddress = Constants.LOG_API_ADDRESS,
 }) {
   const { t } = useTranslation();
-  // const [checkboxAutoScrollChecked, setCheckboxAutoScrollChecked] =
-  // useState(true);
   const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true);
   const [checkboxWarningChecked, setCheckboxWarningChecked] = useState(true);
   const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true);
@@ -116,37 +114,6 @@ export default function LogCard({
     }
   }, [type, selectedDate]);
 
-  /*
-  useEffect(() => {
-    // scroll to bottom
-    if (
-      checkboxAutoScrollChecked &&
-      virtuosoRef.current !== undefined &&
-      virtuosoRef.current.scrollToIndex !== null
-    ) {
-      console.log("scrolltobottom", logs.length);
-      /*
-      virtuosoRef.current.scrollToIndex({
-        index: logs.length - 1,
-        align: "start",
-        behavior: "auto",
-      });*/ /*
-    }
-  }, [logs]); */
-
-  /*
-  <Col>
-    <Checkbox
-      checked={checkboxAutoScrollChecked}
-      onChange={(e) =>
-        setCheckboxAutoScrollChecked(e.target.checked)
-      }
-    >
-      {t("logCard.card.checkbox.autoScroll")}
-    </Checkbox>
-  </Col> 
-  */
-
   const filteredLogs = logs.filter((log) => {
     const logType = log.charAt(0);
 
@@ -166,11 +133,11 @@ export default function LogCard({
     <Card
       title={
         <Row>
-          <Col xs={24} md={{ span: 10, offset: 0 }}>
+          <Col xs={24} xl={12}>
             {title}
           </Col>
 
-          <Col xs={24} xl={{ span: 10, offset: 4 }}>
+          <Col xs={24} xl={12}>
             <Row xs={24} justify="end" align="middle">
               <Col>
                 <Checkbox
diff --git a/src/Pages/AdminArea/Manage/index.js b/src/Pages/AdminArea/Manage/index.js
index 5cb7c44..8f557e4 100644
--- a/src/Pages/AdminArea/Manage/index.js
+++ b/src/Pages/AdminArea/Manage/index.js
@@ -1,4 +1,13 @@
-import { Button, Card, Popconfirm, Space, Table, Typography } from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Popconfirm,
+  Row,
+  Space,
+  Table,
+  Typography,
+} from "antd";
 import { useTranslation } from "react-i18next";
 import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
 import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
@@ -149,31 +158,35 @@ function LogManagerServersTable({ t, webSocketContext, appContext }) {
 
   return (
     <>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          marginTop: AppStyle.app.margin,
-        }}
-      >
-        <Typography.Title level={4}>
-          {t("adminArea.manage.logManagers.header")} (
-          {consolesContext.connectedLogManagerServers.length})
-        </Typography.Title>
+      <Row style={{ marginTop: AppStyle.app.margin }}>
+        <Col xs={24} md={12}>
+          <Typography.Title level={4}>
+            {t("adminArea.manage.logManagers.header")} (
+            {consolesContext.connectedLogManagerServers.length})
+          </Typography.Title>
+        </Col>
 
-        {hasPermission(
-          appContext.userPermissions,
-          Constants.PERMISSIONS.ADMIN_AREA.MANAGE
-            .ADD_LOG_MANAGER_SERVER_CONNECTION
-        ) && (
-          <Button
-            icon={<PlusOutlined />}
-            onClick={() => setIsAddLogManagerServerConnectionModalOpen(true)}
-          >
-            {t("adminArea.manage.logManagers.addLogManagerServerConnection")}
-          </Button>
-        )}
-      </div>
+        <Col
+          xs={24}
+          md={{ span: 10, offset: 2 }}
+          xl={{ span: 8, offset: 4 }}
+          xxl={{ span: 6, offset: 6 }}
+        >
+          {hasPermission(
+            appContext.userPermissions,
+            Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+              .ADD_LOG_MANAGER_SERVER_CONNECTION
+          ) && (
+            <Button
+              block
+              icon={<PlusOutlined />}
+              onClick={() => setIsAddLogManagerServerConnectionModalOpen(true)}
+            >
+              {t("adminArea.manage.logManagers.addLogManagerServerConnection")}
+            </Button>
+          )}
+        </Col>
+      </Row>
 
       <Table
         scroll={{ x: "max-content" }}
diff --git a/src/Pages/GroupTasks/Overview/GroupTasksTableList.js b/src/Pages/GroupTasks/Overview/GroupTasksTableList.js
index 2f152c9..c8852e4 100644
--- a/src/Pages/GroupTasks/Overview/GroupTasksTableList.js
+++ b/src/Pages/GroupTasks/Overview/GroupTasksTableList.js
@@ -336,8 +336,8 @@ export default function GroupTaskTableList({
       )}
 
       <Table
-        style={{ marginTop: AppStyle.app.margin }}
         scroll={{ x: "max-content" }}
+        style={{ marginTop: AppStyle.app.margin }}
         columns={getTableColumns()}
         dataSource={getTableItems()}
         pagination={false}