responsive design

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

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
+      <Row style={{ marginTop: AppStyle.app.margin }}>
-        style={{
+        <Col xs={24} md={12}>
-          display: "flex",
+          <Typography.Title level={4}>
-          justifyContent: "space-between",
+            {t("adminArea.manage.logManagers.header")} (
-          marginTop: AppStyle.app.margin,
+            {consolesContext.connectedLogManagerServers.length})
-        }}
+          </Typography.Title>
-      >
+        </Col>
-        <Typography.Title level={4}>
-          {t("adminArea.manage.logManagers.header")} (
-          {consolesContext.connectedLogManagerServers.length})
-        </Typography.Title>
 
-        {hasPermission(
+        <Col
-          appContext.userPermissions,
+          xs={24}
-          Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+          md={{ span: 10, offset: 2 }}
-            .ADD_LOG_MANAGER_SERVER_CONNECTION
+          xl={{ span: 8, offset: 4 }}
-        ) && (
+          xxl={{ span: 6, offset: 6 }}
-          <Button
+        >
-            icon={<PlusOutlined />}
+          {hasPermission(
-            onClick={() => setIsAddLogManagerServerConnectionModalOpen(true)}
+            appContext.userPermissions,
-          >
+            Constants.PERMISSIONS.ADMIN_AREA.MANAGE
-            {t("adminArea.manage.logManagers.addLogManagerServerConnection")}
+              .ADD_LOG_MANAGER_SERVER_CONNECTION
-          </Button>
+          ) && (
-        )}
+            <Button
-      </div>
+              block
+              icon={<PlusOutlined />}
+              onClick={() => setIsAddLogManagerServerConnectionModalOpen(true)}
+            >
+              {t("adminArea.manage.logManagers.addLogManagerServerConnection")}
+            </Button>
+          )}
+        </Col>
+      </Row>
 
       <Table
         scroll={{ x: "max-content" }}

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}