Fix sneakpeak not working on larger screens

hampfh · Oct 29, 2020 · b99d68b · b99d68b
1 parent 48905d3
commit b99d68b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/client/src/components/screens/Subjects/Subjects.css b/client/src/components/screens/Subjects/Subjects.css
@@ -10,7 +10,6 @@ body {
 	display: grid;
 	margin: 0;
 	width: 100%;
-	height: 100vh;
 	background-color: var(--primary-background);
 	scrollbar-width: thin;
 	justify-content: center;

diff --git a/client/src/components/screens/Subjects/Subjects.tsx b/client/src/components/screens/Subjects/Subjects.tsx
@@ -59,11 +59,13 @@ export class Subjects extends Component<PropsForComponent, StateForComponent> {
 						}
 					</div>
 				</div>
-				{this.props.app.sneakPeak == null || window.innerWidth < 750 || window.innerHeight < 600 || isMobile() ? null :
-					<SubjectSneakPeak
-						updateSubjects={this.props.updateSubjects}
-					/>
-				}
+				<div className="SneakPeakContainer">
+					{this.props.app.sneakPeak == null || window.innerWidth < 750 || window.innerHeight < 600 || isMobile() ? null :
+						<SubjectSneakPeak
+							updateSubjects={this.props.updateSubjects}
+						/>
+					}
+				</div>
 
 				<div className="bottomContainer">
 					{isMobile() || window.innerHeight < 500 || window.innerWidth < 600 ? null : 

diff --git a/client/src/components/screens/Subjects/components/SneakPeak.css b/client/src/components/screens/Subjects/components/SneakPeak.css
@@ -8,6 +8,8 @@
 
 .SneakPeakWrapper {
 	justify-self: center;
+	align-self: flex-start;
+	max-height: 20rem;
 
 	animation: SneakPeakSummon;
 	animation-duration: 0.25s;