From 01810b2c9a1bdfddd36757fa0288267b59a824c2 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Sat, 8 Aug 2020 21:22:52 +0530
Subject: [PATCH] Fix module card scaling on smaller screens
---
frontend/src/components/App.tsx | 6 +++---
frontend/src/components/atoms/ModuleCard/index.tsx | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index d50350ea0..296f404ec 100644
--- a/frontend/src/components/App.tsx
+++ b/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,
});
diff --git a/frontend/src/components/atoms/ModuleCard/index.tsx b/frontend/src/components/atoms/ModuleCard/index.tsx
index cec15728d..b5c22a6ce 100644
--- a/frontend/src/components/atoms/ModuleCard/index.tsx
+++ b/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}
--
GitLab