responsive desig

src/Pages/AdminArea/Roles/index.js

@@ -2,6 +2,7 @@ import {
   Avatar,
   Button,
   Collapse,
+  Grid,
   Input,
   Popconfirm,
   Space,
@@ -31,6 +32,8 @@ import {
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+const { useBreakpoint } = Grid;
+
 export default function AdminAreaRoles() {
   const { t } = useTranslation();
   const webSocketContext = useContext(WebSocketContext);
@@ -156,6 +159,7 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
   const [editMode, setEditMode] = useState(false);
   const [roleDisplayName, setRoleDisplayName] = useState("");
   const [roleDescription, setRoleDescription] = useState("");
+  const screenBreakpoint = useBreakpoint();
 
   const getRolePermissions = (role) => {
     const rolePermissions = webSocketContext.AdminAreaRolesPermissions.find(
@@ -499,13 +503,26 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
                     style={{
                       margin: 0,
                       color: Constants.COLORS.PRIMARY,
+                      overflow: "hidden",
+                      width: screenBreakpoint.xs && 200,
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
                     }}
                   >
                     {role.DisplayName}{" "}
                     {role.Master && <Tag color="purple">Master</Tag>}
                   </Typography.Title>
 
-                  <span style={{ margin: 0 }}>{role.Description}</span>
+                  <span
+                    style={{
+                      margin: 0,
+                      width: screenBreakpoint.xs && 200,
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {role.Description}
+                  </span>
                 </>
               )}
             </>

src/Pages/GroupTasks/Overview/GroupTasksTableList.js

@@ -36,6 +36,7 @@ export default function GroupTaskTableList({
 }) {
   const webSocketContext = useContext(WebSocketContext);
   const { t } = useTranslation();
+  const screenBreakpoint = useBreakpoint();
 
   const getTableColumns = () => {
     return [
@@ -226,8 +227,6 @@ export default function GroupTaskTableList({
         })
       : [];
 
-  const screenBreakpoint = useBreakpoint();
-
   return (
     <>
       <Divider orientation="left">{categoryGroup.category}</Divider>
@@ -259,7 +258,7 @@ export default function GroupTaskTableList({
           ) && (
             <Col xs={24} sm={12}>
               <Button
-                block={!screenBreakpoint.sm}
+                block={screenBreakpoint.xs}
                 type="primary"
                 icon={<PlusOutlined />}
                 onClick={() => showGroupTypeSelectionModal(categoryGroup)}
@@ -273,17 +272,17 @@ export default function GroupTaskTableList({
             xs={24}
             sm={12}
             style={
-              screenBreakpoint.sm
+              screenBreakpoint.xs
                 ? {
                     display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "flex-end",
+                    flexDirection: "column",
+                    marginTop: 10,
                     gap: 10,
                   }
                 : {
                     display: "flex",
-                    flexDirection: "column",
-                    marginTop: 10,
+                    flexDirection: "row",
+                    justifyContent: "flex-end",
                     gap: 10,
                   }
             }
@@ -331,7 +330,7 @@ export default function GroupTaskTableList({
                   handleOnReloadGroupTasksConfirm(categoryGroup.category)
                 }
               >
-                <Button block={!screenBreakpoint.sm} icon={<ReloadOutlined />}>
+                <Button block={screenBreakpoint.xs} icon={<ReloadOutlined />}>
                   {t("common.button.reload")}
                 </Button>
               </Popconfirm>

src/Pages/UserProfile/index.js

@@ -3,6 +3,7 @@ import {
   Card,
   Col,
   Form,
+  Grid,
   Input,
   Popconfirm,
   Row,
@@ -38,11 +39,14 @@ import {
   KeyOutlined,
 } from "@ant-design/icons";
 
+const { useBreakpoint } = Grid;
+
 export default function UserProfile() {
   const webSocketContext = useContext(WebSocketContext);
   const [notificationApi, notificationContextHolder] =
     notification.useNotification();
   const { t, i18n } = useTranslation();
+  const screenBreakpoint = useBreakpoint();
 
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -311,7 +315,7 @@ export default function UserProfile() {
       <Card>
         <Form layout="vertical">
           <Row>
-            <Col span={4}>
+            <Col xs={24} sm={4}>
               <Upload
                 accept={Constants.ACCEPTED_AVATAR_FILE_TYPES.join(",")}
                 action={Constants.API_ADDRESS + "/user/avatar"}
@@ -330,7 +334,7 @@ export default function UserProfile() {
               </Upload>
             </Col>
 
-            <Col span={4} offset={16}>
+            <Col xs={24} sm={4} offset={screenBreakpoint.sm && 16}>
               <Form.Item label={t("userProfile.form.language")}>
                 <Select
                   style={{ width: "100%" }}