Fix action log on mobile

Author: user890104

src/pages/ActionLog.jsx

@@ -1,4 +1,4 @@
-import { Col, Row, Table } from 'react-bootstrap';
+import { Col, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
@@ -36,20 +36,16 @@ const ActionLog = () => {
             <Col>
                 {isLoading && <LoadingIcon large />}
                 {error && <ErrorMessage error={error} />}
-                {actionLog && <Table>
-                    <thead>
-                        <tr>
-                            <th>{t('views.action_log.columns.date_time')}</th>
-                            <th>{t('views.action_log.columns.device')}</th>
-                            <th>{t('views.action_log.columns.action')}</th>
-                            <th>{t('views.action_log.columns.user')}</th>
-                            <th>{t('views.action_log.columns.application')}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {actionLog.map(entry => <ActionLogEntry key={entry.id} entry={entry} />)}
-                    </tbody>
-                </Table>}
+                {actionLog && <>
+                    <Row className="row-cols-1 row-cols-lg-5 d-none d-lg-flex fw-bold">
+                        <Col>{t('views.action_log.columns.date_time')}</Col>
+                        <Col>{t('views.action_log.columns.device')}</Col>
+                        <Col>{t('views.action_log.columns.action')}</Col>
+                        <Col>{t('views.action_log.columns.user')}</Col>
+                        <Col>{t('views.action_log.columns.application')}</Col>
+                    </Row>
+                    {actionLog.map(entry => <ActionLogEntry key={entry.id} entry={entry} />)}
+                </>}
             </Col>
         </Row>
     </>);

src/widgets/ActionLog/ActionLogEntry.jsx

@@ -2,24 +2,43 @@ import { parseISO } from 'date-fns';
 import PropTypes from 'prop-types';
 
 import { useDateTimeFormatter } from '../../utils/useDateTimeFormatter.js';
+import { Col, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
 const ActionLogEntry = ({
     entry,
 }) => {
+    const { t } = useTranslation();
+
     const {
         formatDefault,
         formatDistanceToNow,
     } = useDateTimeFormatter();
 
     const dateTime = parseISO(entry.createdAt);
 
-    return (<tr>
-        <td>{formatDefault(dateTime)} ({formatDistanceToNow(dateTime)})</td>
-        <td>{entry.deviceId}</td>
-        <td>{entry.action}</td>
-        <td>{entry.User.name} ({entry.User.username})</td>
-        <td>{entry.Application.name}</td>
-    </tr>);
+    return (<Row className="row-cols-1 row-cols-lg-5 border-top pt-1 mb-1">
+        <Col>
+            <strong className="d-lg-none">{t('views.action_log.columns.date_time')}: </strong>
+            {formatDefault(dateTime)} ({formatDistanceToNow(dateTime)})
+        </Col>
+        <Col>
+            <strong className="d-lg-none">{t('views.action_log.columns.device')}: </strong>
+            {entry.deviceId}
+        </Col>
+        <Col>
+            <strong className="d-lg-none">{t('views.action_log.columns.action')}: </strong>
+            {entry.action}
+        </Col>
+        <Col>
+            <strong className="d-lg-none">{t('views.action_log.columns.user')}: </strong>
+            {entry.User.name} ({entry.User.username})
+        </Col>
+        <Col>
+            <strong className="d-lg-none">{t('views.action_log.columns.application')}: </strong>
+            {entry.Application.name}
+        </Col>
+    </Row>);
 };
 
 ActionLogEntry.propTypes = {