Fix module card scaling on smaller screens

frontend/src/components/App.tsx

@@ -29,18 +29,18 @@ class App extends React.Component<{}, AppState> {
   }
 
   toggleLeftBar() {
-    if (window.innerWidth < 992) {
+    if (window.innerWidth <= 1024) {
       this.setState({
         toggledRight: false,
       });
-    }
+    } 
     this.setState((state) => ({
       toggledLeft: !state.toggledLeft,
     }));
   }
 
   toggleRightBar() {
-    if (window.innerWidth < 992) {
+    if (window.innerWidth <= 1024) {
       this.setState({
         toggledLeft: false,
       });

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

@@ -26,7 +26,7 @@ export interface ModuleCardProps {
 
 const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
   return (
-    <Col xs={12} sm={6} lg={4} xl={3} style={{ marginTop: "1.875rem" }}>
+    <Col xs={12} sm={12} md={6} lg={6} xl={3} style={{ marginTop: "1.875rem" }}>
       <Card
         className={classNames(styles.moduleCard)}
         as={Link}