remove horizontal scrolling

Author: qvalentin

src/__tests__/__snapshots__/storybook.test.ts.snap

@@ -328,12 +328,13 @@ exports[`Storyshots Filesystem default 1`] = `
           className="overflow-auto flex-grow-1"
         >
           <div
-            className="row"
+            className="m-0 row"
           >
             <div
               className="text-center col"
             >
-               Nothing to see here.
+               
+              Nothing to see here.
             </div>
           </div>
         </div>

src/components/pages/filesytem/FileList.tsx

@@ -59,7 +59,8 @@ function FileList(props: Props): ReactElement {
     const [sortedBy, setSortedBy] = useState<keyof FsEntity | null>(null);
     const [sortIncreasing, setSortIncreasing] = useState<boolean>(false);
     const allAreSelected =
-        filesAndFolders?.length === props.filesystem.selectedFsEntities.length &&
+        filesAndFolders?.length ===
+            props.filesystem.selectedFsEntities.length &&
         !!filesAndFolders?.length;
 
     const clearSelected = props.clearSelected;
@@ -77,7 +78,9 @@ function FileList(props: Props): ReactElement {
                         ...response.data.filter(
                             (fsEntity: FsEntity) => fsEntity.type === "FOLDER"
                         ),
-                        ...response.data.filter((fsEntity: FsEntity) => fsEntity.type !== "FOLDER")
+                        ...response.data.filter(
+                            (fsEntity: FsEntity) => fsEntity.type !== "FOLDER"
+                        )
                     ]);
                     setError("");
                     setCurrentFsItemId(response.headers["x-ff-current"]);
@@ -119,7 +122,9 @@ function FileList(props: Props): ReactElement {
         setSortIncreasing(true);
     }
 
-    function getSortingFunction(property: keyof FsEntity): (a: any, b: any) => number {
+    function getSortingFunction(
+        property: keyof FsEntity
+    ): (a: any, b: any) => number {
         switch (property) {
             case "lastUpdatedBy":
             case "size":
@@ -130,19 +135,27 @@ function FileList(props: Props): ReactElement {
             case "name":
             case "type":
                 return (a: any, b: any) =>
-                    a[property].toLowerCase().localeCompare(b[property].toLowerCase()) === 0
+                    a[property]
+                        .toLowerCase()
+                        .localeCompare(b[property].toLowerCase()) === 0
                         ? a.fileSystemId - b.fileSystemId
-                        : a[property].toLowerCase().localeCompare(b[property].toLowerCase());
+                        : a[property]
+                              .toLowerCase()
+                              .localeCompare(b[property].toLowerCase());
             case "lastUpdated":
             default:
                 return (a: any, b: any) =>
                     a.lastUpdatedBy.username
                         .toLowerCase()
-                        .localeCompare(b.lastUpdatedBy.username.toLowerCase()) === 0
+                        .localeCompare(
+                            b.lastUpdatedBy.username.toLowerCase()
+                        ) === 0
                         ? a.fileSystemId - b.fileSystemId
                         : a.lastUpdatedBy.username
-                            .toLowerCase()
-                            .localeCompare(b.lastUpdatedBy.username.toLowerCase());
+                              .toLowerCase()
+                              .localeCompare(
+                                  b.lastUpdatedBy.username.toLowerCase()
+                              );
         }
     }
 
@@ -188,10 +201,18 @@ function FileList(props: Props): ReactElement {
                     <Col xs={6} md={4} onClick={() => handleSortClick("name")}>
                         {"Name"}
                     </Col>
-                    <Col xs={6} md={3} onClick={() => handleSortClick("lastUpdatedBy")}>
+                    <Col
+                        xs={6}
+                        md={3}
+                        onClick={() => handleSortClick("lastUpdatedBy")}
+                    >
                         Last updated by
                     </Col>
-                    <Col xs={3} md={1} onClick={() => handleSortClick("lastUpdated")}>
+                    <Col
+                        xs={3}
+                        md={1}
+                        onClick={() => handleSortClick("lastUpdated")}
+                    >
                         {"Last changes"}
                     </Col>
                     <Col xs={3} md={1} onClick={() => handleSortClick("size")}>
@@ -201,19 +222,25 @@ function FileList(props: Props): ReactElement {
             </div>
             <div className="overflow-auto flex-grow-1">
                 {/*Table Body*/}
-                <Row>
+                <Row className="m-0">
                     {error ? (
                         <Col className={"text-center"}> {error}</Col>
                     ) : filesAndFolders?.length === 0 ? (
-                        <Col className={"text-center"}> Nothing to see here.</Col>
+                        <Col className={"text-center"}>
+                            {" "}
+                            Nothing to see here.
+                        </Col>
                     ) : (
                         !filesAndFolders && <FFLoading />
                     )}
 
                     {filesAndFolders?.map((folder: FsEntity) => {
                         return (
                             <React.Fragment key={folder.fileSystemId}>
-                                <FileListItem setPath={setPath} fileListItem={folder} />
+                                <FileListItem
+                                    setPath={setPath}
+                                    fileListItem={folder}
+                                />
                                 <Col xs={12} className="border-top my-2" />
                             </React.Fragment>
                         );

src/components/pages/filesytem/Filesystem.stories.tsx

@@ -13,8 +13,6 @@ import folderContentMock from "./__tests__/folderContentMock.json";
 const API_REQUEST = hostname + filesystemPath + "contents";
 
 storiesOf("Filesystem", module).add("default", () => {
-    // @ts-ignore
-
     const mock = new MockAdapter(axios);
     mock.onGet(API_REQUEST).reply(200, folderContentMock, {
         "x-ff-current": "3"