Added max-width

chamhayden · Oct 9, 2023 · 3da3984 · 3da3984
1 parent dbb6127
commit 3da3984
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 11 deletions.
diff --git a/frontend/src/component/StyleComponents.jsx b/frontend/src/component/StyleComponents.jsx
@@ -52,7 +52,7 @@ export const Example = (props) => {
   const [expand, setExpand] = React.useState(false);
 
   return (
-    <Box sx={{ boxShadow: 'rgba(0, 0, 0, 0.2) 0px 5px 15px', borderRadius: '15px'}} my={2}>
+    <Box sx={{ boxShadow: 'rgba(0, 0, 0, 0.2) 0px 5px 15px', borderRadius: '15px' }} my={2}>
       <Box sx={{ cursor: 'pointer' }} p={1} onClick={() => setExpand(!expand)}>
         <Body>
           <span>{expand ? '⬇️' : '⬆️'}</span>

diff --git a/frontend/src/page/Style/StyleCSS.jsx b/frontend/src/page/Style/StyleCSS.jsx
@@ -10,8 +10,7 @@ const StyleCSS = ({}) => {
   const emoji = '🎨';
 
   return (
-    <>
-
+    <section style={{ maxWidth: 'calc(100vw - 100px)' }}>
       <H3>{emoji} 2. CSS Style Guide</H3>
 
       <Body>The assignments in COMP6080 all have a portion of their marks allocated to code style. As such, it is <b>highly</b> recommended for students to have a read through this style guide.</Body>
@@ -547,7 +546,7 @@ div {
 `
         ]}
       />
-    </>
+    </section>
   );
 };
 

diff --git a/frontend/src/page/Style/StyleHtml.jsx b/frontend/src/page/Style/StyleHtml.jsx
@@ -14,7 +14,7 @@ const StyleHtml = ({}) => {
   const emoji = '📜';
 
   return (
-    <>
+    <section style={{ maxWidth: 'calc(100vw - 100px)' }}>
 
       <H3>{emoji} 1. HTML Style Guide</H3>
 
@@ -692,7 +692,7 @@ to the next row when the viewport's width gets small enough -->
         ]}
       />
 
-    </>
+    </section>
   );
 };
 

diff --git a/frontend/src/page/Style/StyleJavascript.jsx b/frontend/src/page/Style/StyleJavascript.jsx
@@ -9,7 +9,7 @@ const StyleJavascript = ({}) => {
   const emoji = '🔧';
 
   return (
-    <>
+    <section style={{ maxWidth: 'calc(100vw - 100px)' }}>
       <H3>{emoji} 3. JavaScript</H3>
 
       <Body>The assignments in COMP6080 all have a portion of their marks allocated to code style. As such, it is <b>highly</b> recommended for students to have a read through this style guide.</Body>
@@ -556,7 +556,7 @@ const fooObj = {
 }`
         ]}
       />
-    </>
+    </section>
   );
 };
 

diff --git a/frontend/src/page/Style/StyleReact.jsx b/frontend/src/page/Style/StyleReact.jsx
@@ -11,8 +11,7 @@ const StyleReact = ({}) => {
   const emoji = '⚛️';
 
   return (
-    <>
-
+    <section style={{ maxWidth: 'calc(100vw - 100px)' }}>
       <H3>{emoji} 4. ReactJS</H3>
 
       <Body>The assignments in COMP6080 all have a portion of their marks allocated to code style. As such, it is <b>highly</b> recommended for students to have a read through this style guide.</Body>
@@ -532,7 +531,7 @@ const App = () => {
 }`
         ]}
       />
-    </>
+    </section>
   );
 };