responsive design for page with files

src/assets/styles/components/_files.scss

@@ -53,42 +53,66 @@
   align-self: flex-start;
 }
 
-// .document-container p {
-//   word-wrap: break-word !important;
-// }
+.pdf-canvas canvas{
+  width: 100% !important;
+}
+
+.pg-viewer-wrapper .document-container{
+  width: 100% !important;
+  background: none;
+}
 
-// .table-cont #docx .document-container {
-//   width: 400px !important;
-// }
+.document-container{
+  height: 100%;
+}
 
 .files-page-categories {
   display: flex;
   flex-wrap: wrap;
 }
 
+.files-page-categories-responsive{
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .files-page-categories > :first-child {
   padding: 16px 16px 16px 0px !important;
 }
 
+.files-page-categories-responsive > :first-child {
+  padding: 0px !important;
+}
+
 .files-page-categories-category {
   width: calc(100% / 6) !important;
   margin: 0 !important;
   padding: 16px;
 }
 
+.files-page-categories-category-responsive {
+  width: calc(100% / 3) !important;
+  margin: 0 !important;
+  padding: 0px;
+}
+
 .files-page-category-button {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  padding: 18px 72px;
-  gap: 10px;
+  // padding: 18px 72px;
+  // gap: 10px;
+  // width: 100%;
+  // height: 100%;
+  padding: 12px 52px;
+  gap: 5px;
   width: 100%;
   height: 100%;
   background: #226cb0;
   border-radius: 9px;
   @include media-below($bp-xl) {
-    width: 147px;
+    width: 85px;
   }
 }
 
@@ -203,3 +227,9 @@
 .files-category-custom-modal-buttons button {
   margin-left: 8px;
 }
+
+.files-button-responsive {
+  gap: 5px;
+  width: 105px;
+  height: 31px;
+}

src/pages/FilesPage/FileTable.js

@@ -25,6 +25,8 @@ import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelect
 import { FETCH_FILES_LOADING } from "../../store/actions/files/fileActionConstants";
 import { useParams } from "react-router";
 import { PAGE_SIZE_FILES } from "../../constants/keyCodeConstants";
+import { useTheme } from "@mui/system";
+import { useMediaQuery } from "@mui/material";
 
 const FileTable = ({ trigger }) => {
   const [file, setFile] = useState(null);
@@ -46,6 +48,8 @@ const FileTable = ({ trigger }) => {
   });
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("370"));
 
   useEffect(() => {
     if (data !== null && data.data !== undefined) {
@@ -191,6 +195,7 @@ const FileTable = ({ trigger }) => {
         onChange={(e) => handleChangeContent(e.target.value)}
         onKeyDown={handleKeyDown}
         className="candidate-search-field"
+        style={{ width: matches ? "160px" : "816px" }}
         onClick={stopPropagation}
         role="input"
       />
@@ -330,10 +335,9 @@ const FileTable = ({ trigger }) => {
           display: "flex",
           justifyContent: "space-between",
           position: "relative",
-          width: "calc(100% - 144px)",
         }}
       >
-        <div>
+        <div style={{ width: "fit-content" }}>
           <Fade in={isSearchFieldVisible} timeout={500} className="proba">
             {input}
           </Fade>
@@ -359,11 +363,12 @@ const FileTable = ({ trigger }) => {
               className="c-btn c-btn--primary-outlined candidate-btn search-field userPageBtn ml-20px no-padding custom-filter-button"
               onClick={() => setIsSearchFieldVisible(true)}
             >
-              {t("candidates.search")}
+              {!matches ? t("candidates.search") : null}
               <img
                 src={searchImage}
                 alt="filter"
                 className="candidates-image"
+                style={{ marginLeft: matches ? "0px" : "10px" }}
               />
             </IconButton>
           )}
@@ -374,25 +379,25 @@ const FileTable = ({ trigger }) => {
         style={{
           display: "flex",
           marginTop: "39px",
-          flexDirection: "column",
           justifyContent: "space-between",
           minHeight: "500px",
-          width: "100%",
         }}
       >
-        <div className="table-cont">
+        <div style={{ display: "flex", flexDirection: "column" }}>
           <div
+            className="table-cont"
             style={{
               display: "flex",
-              height: "300px",
-              width: "calc(100% - 144px)",
+              width: matches ? "75vw" : "85vw",
+              height: "330px",
+              flexDirection: "row",
             }}
           >
             <table
               className={"usersTable-users mini"}
               style={{
-                width: file === null ? "100%" : "400px",
-                height: "50%",
+                width: file === null ? "100%" : "360px",
+                overflowX: "visible",
               }}
             >
               <thead>
@@ -496,9 +501,9 @@ const FileTable = ({ trigger }) => {
             {file !== null ? (
               <div
                 style={{
-                  width: "830px",
+                  width: "100%",
                   marginLeft: "30px",
-                  overflowY: "visible",
+                  overflowY: "auto",
                 }}
               >
                 <FileViewer

src/pages/FilesPage/FilesPage.js

@@ -19,6 +19,8 @@ import CustomModal from "../../components/UI/CustomModal";
 import xIcon from "../../assets/images/x.png";
 import plusIcon from "../../assets/images/plus.png";
 import Button from "../../components/Button/Button";
+import { useTheme } from "@mui/system";
+import { useMediaQuery } from "@mui/material";
 
 const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
@@ -28,6 +30,8 @@ const FilesPage = ({ history }) => {
   const [openCreateCategoryModal, setOpenCreateCategoryModal] = useState(false);
   const [createCategoryName, setCreateCategoryName] = useState("");
   let { id } = useParams();
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("370"));
 
   useEffect(() => {
     if (id === undefined) {
@@ -133,7 +137,7 @@ const FilesPage = ({ history }) => {
           setTrigger((trigger) => trigger + 1);
         }}
       >
-        <div style={{ marginBottom: "50px" }}>
+        <div style={{ marginBottom: matches ? "20px" : "50px" }}>
           <div style={{ marginBottom: "30px" }}>
             <div
               style={{
@@ -145,13 +149,19 @@ const FilesPage = ({ history }) => {
               <h1 className="page-heading">Folderi</h1>
               <div className="add-categories-files">
                 <IconButton
-                  className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
+                  className={
+                    `c-btn ads-page-btn c-btn--primary filesPage ` +
+                    (matches ? "files-button-responsive" : "add-ad-btn")
+                  }
                   onClick={() => history.push(ADD_FILE)}
                 >
                   + Fajl
                 </IconButton>
                 <IconButton
-                  className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
+                  className={
+                    `c-btn ads-page-btn c-btn--primary filesPage ` +
+                    (matches ? "files-button-responsive" : "add-ad-btn")
+                  }
                   onClick={changeOpenCreateCategoryModal}
                 >
                   + Kategorija
@@ -180,7 +190,7 @@ const FilesPage = ({ history }) => {
                       marginLeft: "10px",
                     }}
                   >
-                    &gt;
+                    &gt; &nbsp;
                   </span>
                   <div
                     className="files-file-routing"
@@ -193,11 +203,21 @@ const FilesPage = ({ history }) => {
             </div>
             <ColoredLine />
           </div>
-          <div className="files-page-categories">
+          <div
+            className={
+              matches
+                ? "files-page-categories-responsive"
+                : "files-page-categories"
+            }
+          >
             {categories &&
               categories.map((category) => (
                 <div
-                  className="files-page-categories-category"
+                  className={
+                    matches
+                      ? "files-page-categories-category-responsive"
+                      : "files-page-categories-category"
+                  }
                   key={category.id}
                 >
                   <IconButton