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",
-          justifyContent: "space-between",
-          marginTop: AppStyle.app.margin,
-        }}
-      >
           <Typography.Title level={4}>
             {t("adminArea.manage.logManagers.header")} (
             {consolesContext.connectedLogManagerServers.length})
           </Typography.Title>
+        </Col>
 
+        <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>
           )}
-      </div>
+        </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}