changed views of files

src/assets/styles/components/_files.scss

   align-self: flex-start;
 }
 
-.document-container p {
-  word-wrap: break-word !important;
-}
+// .document-container p {
+//   word-wrap: break-word !important;
+// }
 
-.table-cont #docx .document-container {
-  width: 400px !important;
-}
+// .table-cont #docx .document-container {
+//   width: 400px !important;
+// }
 
 .files-page-categories {
   display: flex;

src/pages/FilesPage/FileTable.js

 import Button from "../../components/Button/Button";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { FETCH_FILES_LOADING } from "../../store/actions/files/fileActionConstants";
-import {  useParams } from "react-router";
+import { useParams } from "react-router";
 import { PAGE_SIZE_FILES } from "../../constants/keyCodeConstants";
 
 const FileTable = ({ trigger }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    console.log("TAKOOOOOOOOOO", data);
     if (data !== null && data.data !== undefined) {
-      console.log("dasdadasdas", data);
       if (data.data.length === 0) {
         setPage(getTotalNumberOfPages(data) - 1);
       }
     if (file !== null && stream_id === file.streamId) {
       setFile(null);
     }
-    // setTotalCount(
-    //   parseInt(data.total) <= PAGE_SIZE_FILES
-    //     ? 1
-    //     : Math.ceil(parseInt(data.total) / PAGE_SIZE_FILES)
-    // );
   };
 
   const handleKeyDown = (event) => {
-    if (event.key === "Enter" && filters.content !== "") {
+    if (event.key === "Enter" && filters.content !== "" && filters.content !== undefined) {
       var extFilters = [];
       filters.extensions
         ?.filter((n) => n.isChecked)
             categoryId: id,
             extensions: extFilters,
             tags: tagFilters,
-            content: filters.content === undefined ? "" : filters.content,
+            content: filters.content,
           },
         })
       );
     <div>
       <input
         placeholder="Pretrazi..."
-        value={filters.content === undefined ? "" : filters.content}
+        value={filters.content}
         onChange={(e) => handleChangeContent(e.target.value)}
         onKeyDown={handleKeyDown}
         className="candidate-search-field"
             <table
               className={"usersTable-users mini"}
               style={{
-                width: file === null ? "100%" : "800px",
+                width: file === null ? "100%" : "400px",
                 height: "50%",
               }}
             >
                   className="headingRow headingRowFiles"
                   style={{ cursor: "pointer" }}
                 >
-                  <th>Putanja dokumenta</th>
+                  {file === null ? <th>Putanja dokumenta</th> : ""}
                   <th>Naziv dokumenta</th>
-                  <th>Tip dokumenta</th>
+                  {file === null ? <th>Tip dokumenta</th> : ""}
                   {file === null ? <th>Veličina dokumenta</th> : ""}
-                  <th>Obrisi dokument</th>
-                  <th>Note</th>
+                  {file === null ? <th>Obrisi dokument</th> : ""}
+                  {file === null ? <th>Note</th> : ""}
                   <th>Preuzmi dokument</th>
                 </tr>
               </thead>
                       displayFile(n.file_stream, n.stream_id, n.file_type)
                     }
                   >
-                    <td className="docs-name">{n.fileName}</td>
+                    {file === null ? (
+                      <td className="docs-name">{n.fileName}</td>
+                    ) : (
+                      ""
+                    )}
                     <td className="docs-name">{n.title}</td>
-                    <td>{n.file_type && n.file_type}</td>
+                    {file === null ? <td>{n.file_type && n.file_type}</td> : ""}
+
                     {file === null ? (
                       <td className="profession">{n.cached_file_size}kB</td>
                     ) : (
                       ""
                     )}
-                    <td className="profession">
-                      <IconButton
-                        className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
-                        onClick={() =>
-                          setFileForDelete({
-                            open: true,
-                            title: n.title,
-                            streamId: n.stream_id,
-                          })
-                        }
-                      >
-                        <img
-                          style={{ width: "12px", height: "12px" }}
-                          src={deleteIcon}
-                        />
-                      </IconButton>
-                    </td>
-                    <td className="profession">
-                      <IconButton
-                        className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
-                        onClick={() => {
-                          setOpenNoteModal({
-                            open: true,
-                            note: n.note,
-                            streamId: n.stream_id,
-                          });
-                        }}
-                      >
-                        <img
-                          style={{ width: "12px", height: "12px" }}
-                          src={editIcon}
-                        />
-                      </IconButton>
-                    </td>
+                    {file === null ? (
+                      <td className="profession">
+                        <IconButton
+                          className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+                          onClick={() =>
+                            setFileForDelete({
+                              open: true,
+                              title: n.title,
+                              streamId: n.stream_id,
+                            })
+                          }
+                        >
+                          <img
+                            style={{ width: "12px", height: "12px" }}
+                            src={deleteIcon}
+                          />
+                        </IconButton>
+                      </td>
+                    ) : (
+                      ""
+                    )}
+                    {file === null ? (
+                      <td className="profession">
+                        <IconButton
+                          className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+                          onClick={() => {
+                            setOpenNoteModal({
+                              open: true,
+                              note: n.note,
+                              streamId: n.stream_id,
+                            });
+                          }}
+                        >
+                          <img
+                            style={{ width: "12px", height: "12px" }}
+                            src={editIcon}
+                          />
+                        </IconButton>
+                      </td>
+                    ) : (
+                      ""
+                    )}
                     <td>
                       <div onClick={stopPropagation}>
                         <a
             {file !== null ? (
               <div
                 style={{
-                  width: "500px",
+                  width: "830px",
                   marginLeft: "30px",
                   overflowY: "visible",
                 }}