fix bottom padding on level page

Author: ShMcK

web-app/src/containers/Tutorial/LevelPage/Level.tsx

@@ -12,12 +12,14 @@ const styles = {
   page: {
     backgroundColor: 'white',
     position: 'relative' as 'relative',
+    height: 'auto',
+    width: '100%',
+  },
+  content: {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     padding: 0,
     paddingBottom: '5rem',
-    height: 'auto',
-    width: '100%',
   },
   header: {
     height: '2rem',
@@ -26,13 +28,11 @@ const styles = {
     lineHeight: '1rem',
     padding: '10px 1rem',
   },
-  content: {
+  text: {
     padding: '0rem 1rem',
     paddingBottom: '1rem',
   },
-  tasks: {
-    paddingBottom: '5rem',
-  },
+  tasks: {},
   steps: {
     padding: '1rem 1rem',
   },
@@ -101,63 +101,66 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
 
   return (
     <div css={styles.page}>
-      <div css={styles.header}>
-        <span>Learn</span>
-      </div>
       <div css={styles.content}>
-        <h2 css={styles.title}>{level.title}</h2>
-        <Markdown>{level.content || ''}</Markdown>
-      </div>
+        <div css={styles.header}>
+          <span>Learn</span>
+        </div>
+        <div css={styles.text}>
+          <h2 css={styles.title}>{level.title}</h2>
+          <Markdown>{level.content || ''}</Markdown>
+        </div>
 
-      {level.steps.length ? (
-        <div css={styles.tasks}>
-          <div css={styles.header}>Tasks</div>
-          <div css={styles.steps}>
-            {level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
-              if (!step) {
-                return null
-              }
-              return (
-                <Step
-                  key={step.id}
-                  order={index + 1}
-                  status={step.status}
-                  content={step.content}
-                  onLoadSolution={onLoadSolution}
-                />
-              )
-            })}
+        {level.steps.length ? (
+          <div css={styles.tasks}>
+            <div css={styles.header}>Tasks</div>
+            <div css={styles.steps}>
+              {level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
+                if (!step) {
+                  return null
+                }
+                return (
+                  <Step
+                    key={step.id}
+                    order={index + 1}
+                    status={step.status}
+                    content={step.content}
+                    onLoadSolution={onLoadSolution}
+                  />
+                )
+              })}
+            </div>
           </div>
-        </div>
-      ) : null}
-      <div ref={pageBottomRef} />
+        ) : null}
 
-      {(testStatus || processes.length > 0) && (
-        <div css={styles.processes}>
-          <ProcessMessages processes={processes} testStatus={testStatus} />
-        </div>
-      )}
+        <div ref={pageBottomRef} />
 
-      <div css={styles.nux}>
-        <NuxTutorial onLoadSolution={onLoadSolution} />
-      </div>
+        {(testStatus || processes.length > 0) && (
+          <div css={styles.processes}>
+            <ProcessMessages processes={processes} testStatus={testStatus} />
+          </div>
+        )}
 
-      <div css={styles.footer}>
-        <span>
-          {typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
-          {level.title}
-        </span>
-        <span>
-          {level.status === 'COMPLETE' || !level.steps.length ? (
-            <Button type="primary" onClick={onContinue}>
-              Continue
-            </Button>
-          ) : (
-            <span css={styles.taskCount}>
-              {currentStep} of {level.steps.length} tasks
-            </span>
-          )}
-        </span>
+        <div css={styles.nux}>
+          <NuxTutorial onLoadSolution={onLoadSolution} />
+        </div>
+
+        <div css={styles.footer}>
+          <span>
+            {typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
+            {level.title}
+          </span>
+          <span>
+            {level.status === 'COMPLETE' || !level.steps.length ? (
+              <Button type="primary" onClick={onContinue}>
+                Continue
+              </Button>
+            ) : (
+              <span css={styles.taskCount}>
+                {currentStep} of {level.steps.length} tasks
+              </span>
+            )}
+          </span>
+        </div>
       </div>
     </div>
   )