Addressed PR comments

components/ComponentWrapper.module.css

@@ -1,4 +1,4 @@
-.wrapperCommon {
+.sideWrapperCommon {
   background-color: var(--secondary-background);
   display: flex;
   padding: calc(40rem / 16) calc(50rem / 16);
@@ -7,7 +7,7 @@
 }
 
 .wrapperRight {
-  composes: wrapperCommon;
+  composes: sideWrapperCommon;
   align-self: end;
   margin-right: 0;
   padding-right: 0;
@@ -17,7 +17,7 @@
 }
 
 .wrapperLeft {
-  composes: wrapperCommon;
+  composes: sideWrapperCommon;
   align-self: start;
   margin-left: 0;
   padding-left: 0;
@@ -52,7 +52,6 @@
     border-radius: 0;
     width: 100%;
   }
-
 }
 
 .internalWrapper {

components/ComponentWrapper.tsx

@@ -7,15 +7,14 @@ type AlignOption = "left" | "center" | "right";
 type ComponentWrapperProps = {
   children: React.ReactNode;
   heading: string;
-  body: string;
+  bodyText: string;
   align?: AlignOption;
   noBackground?: boolean;
-  center?: boolean;
 };
 
 export function ComponentWrapper({
   heading,
-  body,
+  bodyText,
   children,
   align = "left",
   noBackground = false,
@@ -35,7 +34,7 @@ export function ComponentWrapper({
     >
       <div className={styles.internalWrapper}>
         <h3>{heading}</h3>
-        <p>{body}</p>
+        <p>{bodyText}</p>
       </div>
       <div className={styles.internalWrapper}>{children}</div>
     </div>

pages/samplePage.tsx

@@ -18,7 +18,7 @@ export default function SamplePage() {
     <div className={styles.page}>
       <ComponentWrapper
         heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
       >
         <BarGraphVertical
           data={mockCategoricalData}
@@ -36,7 +36,7 @@ export default function SamplePage() {
 
       <ComponentWrapper
         heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
         align="center"
       >
         <WordCloud
@@ -52,7 +52,7 @@ export default function SamplePage() {
 
       <ComponentWrapper
         heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
         align="right"
       >
         <BarGraphHorizontal
@@ -71,7 +71,7 @@ export default function SamplePage() {
 
       <ComponentWrapper
         heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
         align="left"
         noBackground
       >
@@ -91,7 +91,7 @@ export default function SamplePage() {
 
       <ComponentWrapper
         heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
       >
         <BarGraphHorizontal
           className={styles.barGraphDemo}
@@ -109,7 +109,7 @@ export default function SamplePage() {
 
       <ComponentWrapper
         heading="What program are you in?"
-        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
         align="left"
         noBackground
       >

utils/isMobile.ts

@@ -1,3 +1,3 @@
 import { useWindowDimensions } from "./getWindowDimensions";
 
-export const useIsMobile = () => useWindowDimensions().width < 768;
+export const useIsMobile = () => useWindowDimensions().width <= 768;