Add text truncation to quick view items

frontend/src/components/atoms/FileCard/index.tsx

@@ -34,7 +34,7 @@ const FileCard: React.FC<FileCardProps> = ({
     <Card className={styles.quickViewCard} onClick={onClick}>
       <Card.Img variant="top" src={graphIllustration} />
       <Card.Body>
-        <Card.Title>{title}</Card.Title>
+        <Card.Title className={"text-truncate"}>{title}</Card.Title>
         <FontAwesomeIcon
           style={{ fontSize: "1.125rem" }}
           icon={icon}

frontend/src/components/molecules/QuickAccess/index.tsx → frontend/src/components/molecules/QuickAccessView/index.tsx

@@ -25,7 +25,7 @@ interface MyState {
   isHoveringTitle: Boolean;
 }
 
-class QuickAccess extends React.Component<QuickAccessProps, MyState> {
+class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
   constructor(props: QuickAccessProps) {
     super(props);
     this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
@@ -158,4 +158,4 @@ class QuickAccess extends React.Component<QuickAccessProps, MyState> {
   }
 }
 
-export default QuickAccess;
+export default QuickAccessView;

frontend/src/components/molecules/ResourceFolders/index.tsx → frontend/src/components/molecules/ResourcesFolderView/index.tsx

@@ -19,7 +19,7 @@ interface MyState {
   isHoveringTitle: Boolean;
 }
 
-class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
+class ResourcesFolderView extends React.Component<ResourceFoldersProps, MyState> {
   constructor(props: ResourceFoldersProps) {
     super(props);
     this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
@@ -133,4 +133,4 @@ class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
   }
 }
 
-export default ResourceFolders;
+export default ResourcesFolderView;

frontend/src/components/pages/ModuleResources/index.tsx

@@ -7,8 +7,8 @@ import FormControl from "react-bootstrap/FormControl";
 import Button from "react-bootstrap/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-import QuickAccess from "components/molecules/QuickAccess";
-import ResourceFolders from "components/molecules/ResourceFolders";
+import QuickAccessView from "components/molecules/QuickAccessView";
+import ResourcesFolderView from "components/molecules/ResourcesFolderView";
 
 const ModuleResources: React.FC = () => {
   let folderItems = [
@@ -40,7 +40,7 @@ const ModuleResources: React.FC = () => {
 	
 	let quickAccessItems = [
     {
-			title: "Notes 1",
+			title: "My very very very very very long title",
 			type: "File",
 			tags:["new", "Week 1"],
       id: 0,
@@ -93,8 +93,8 @@ const ModuleResources: React.FC = () => {
         </InputGroup.Append>
       </InputGroup>
 
-      <QuickAccess quickAccessItems={quickAccessItems}/>
-      <ResourceFolders folderItems={folderItems}/>
+      <QuickAccessView quickAccessItems={quickAccessItems}/>
+      <ResourcesFolderView folderItems={folderItems}/>
     </>
   );
 };