From 70d028bef757a538ee901a67defba7fca7203346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabia=CC=81n=20Oconitrillo=20Varela?=
 <92036538+foconitrillo@users.noreply.github.com>
Date: Mon, 8 Aug 2022 10:22:00 -0600
Subject: [PATCH 1/2] Solution

Problem solved
---
 src/components/ButtonRow/ButtonRow.module.css      |  1 +
 .../CharacterEditor/CharacterEditor.module.css     | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/ButtonRow/ButtonRow.module.css b/src/components/ButtonRow/ButtonRow.module.css
index cd9b1003..a8f7b0c7 100644
--- a/src/components/ButtonRow/ButtonRow.module.css
+++ b/src/components/ButtonRow/ButtonRow.module.css
@@ -1,2 +1,3 @@
 .buttonRow {
+  overflow: auto;
 }
diff --git a/src/components/CharacterEditor/CharacterEditor.module.css b/src/components/CharacterEditor/CharacterEditor.module.css
index 441f8a05..6a05567c 100644
--- a/src/components/CharacterEditor/CharacterEditor.module.css
+++ b/src/components/CharacterEditor/CharacterEditor.module.css
@@ -1,9 +1,14 @@
 .characterEditor {
   padding-top: 128px;
   padding-bottom: 64px;
+  display: flex;
+  align-items: center;
 }
 
 .maxWidthWrapper {
+  margin-left: 20%;
+  width: 35%;
+  margin-right: 0px;
 }
 
 .header {
@@ -24,7 +29,16 @@
 }
 
 .characterWrapper {
+  position: sticky;
+  bottom: 0;
+  width: 30%;
+  height: 50rem;
+  overflow: hidden;
+  align-self: flex-end;
 }
 
 .controlColumn {
+  width: 80%;
+  white-space: nowrap;
+  overflow: auto;
 }

From 9dc035730437e91f351698073bfa0bd7d0a6b15c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabia=CC=81n=20Oconitrillo=20Varela?=
 <92036538+foconitrillo@users.noreply.github.com>
Date: Mon, 8 Aug 2022 11:14:22 -0600
Subject: [PATCH 2/2] Add box

Improvements
---
 .../CharacterEditor/CharacterEditor.js        | 26 ++++++++-----------
 .../CharacterEditor.module.css                | 13 +++++++++-
 src/components/Footer/Footer.module.css       |  3 +++
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/CharacterEditor/CharacterEditor.js b/src/components/CharacterEditor/CharacterEditor.js
index 290d5ff5..1ebb2535 100644
--- a/src/components/CharacterEditor/CharacterEditor.js
+++ b/src/components/CharacterEditor/CharacterEditor.js
@@ -1,12 +1,9 @@
-import React from 'react';
+import React from "react";
 
-import {
-  defaultSkinColor,
-  defaultClothesColor,
-} from '../../constants';
-import Character from '../Character';
-import MaxWidthWrapper from '../MaxWidthWrapper';
-import ControlPane from '../ControlPane';
+import { defaultSkinColor, defaultClothesColor } from "../../constants";
+import Character from "../Character";
+import MaxWidthWrapper from "../MaxWidthWrapper";
+import ControlPane from "../ControlPane";
 
 import {
   bodyOptions,
@@ -15,8 +12,8 @@ import {
   accessoryOptions,
   skinColorOptions,
   clothesColorOptions,
-} from './CharacterEditor.helpers';
-import styles from './CharacterEditor.module.css';
+} from "./CharacterEditor.helpers";
+import styles from "./CharacterEditor.module.css";
 
 function App() {
   const [body, setBody] = React.useState(0);
@@ -24,18 +21,17 @@ function App() {
   const [face, setFace] = React.useState(0);
   const [accessory, setAccessory] = React.useState(0);
   const [skinColor, setSkinColor] = React.useState(defaultSkinColor);
-  const [clothesColor, setClothesColor] = React.useState(
-    defaultClothesColor
-  );
+  const [clothesColor, setClothesColor] = React.useState(defaultClothesColor);
 
   return (
     <main className={styles.characterEditor}>
+      <div className={styles.box}></div>
       <MaxWidthWrapper className={styles.maxWidthWrapper}>
         <header className={styles.header}>
           <h1 className={styles.title}>Create your Character</h1>
           <p className={styles.description}>
-            Customize your character's look and style using the
-            controls below. What sort of adventure will you embark on?{' '}
+            Customize your character's look and style using the controls below.
+            What sort of adventure will you embark on?{" "}
           </p>
         </header>
         <div className={styles.controlColumn}>
diff --git a/src/components/CharacterEditor/CharacterEditor.module.css b/src/components/CharacterEditor/CharacterEditor.module.css
index 6a05567c..34639f12 100644
--- a/src/components/CharacterEditor/CharacterEditor.module.css
+++ b/src/components/CharacterEditor/CharacterEditor.module.css
@@ -9,6 +9,8 @@
   margin-left: 20%;
   width: 35%;
   margin-right: 0px;
+  z-index: 1;
+  /* position: relative; */
 }
 
 .header {
@@ -40,5 +42,14 @@
 .controlColumn {
   width: 80%;
   white-space: nowrap;
-  overflow: auto;
+}
+
+.box {
+  position: fixed;
+  top: 60%;
+  left: 0;
+  width: 100%;
+  height: 40%;
+  z-index: -1;
+  background-color: hsl(195deg, 20%, 86%);
 }
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index 2ff05062..507567c5 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -6,3 +6,6 @@
   text-align: center;
 }
 
+.footer a {
+  color: inherit;
+}