💄 add dynamic scaling to gameboy

src/App.tsx

@@ -8,6 +8,8 @@ const StyledApp = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 5px;
+  padding-bottom: 28px;
 `;
 
 const App = () => {

src/components/Gameboy.tsx

@@ -3,6 +3,7 @@ import "./gameboy.css";
 const Gameboy = () => {
   return (
     <div className="gameboy" id="GameBoy">
+      <div className="section">
         <div className="screen-area">
           <div className="power">
             <div className="indicator">
@@ -29,7 +30,8 @@ const Gameboy = () => {
         </div>
 
         <div className="nintendo">Nintendo</div>
-
+      </div>
+      <div className="section">
         <div className="controls">
           <div className="dpad">
             <div className="up">
@@ -56,6 +58,7 @@ const Gameboy = () => {
           <div className="select">SELECT</div>
           <div className="start">START</div>
         </div>
+      </div>
 
       <div className="speaker">
         <div className="dot placeholder"></div>

src/components/gameboy.css

@@ -1,7 +1,10 @@
 .gameboy {
   position: relative;
-  width: 350px;
-  height: 570px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
   border-radius: 20px;
   padding: 20px;
   background-color: #4f50db;
@@ -37,6 +40,12 @@
   box-shadow: 0px 5px 0px #3d38b5;
   border-bottom: 2px solid #9998eb;
 }
+
+.gameboy .section {
+  width: 100%;
+  min-height: 199px;
+}
+
 .gameboy .screen-area {
   position: relative;
   padding: 35px 50px 5px 50px;
@@ -111,7 +120,7 @@
 .gameboy .screen-area .display {
   background-color: #929d97;
   height: 190px;
-  width: 210px;
+  width: 100%;
   border-radius: 3px;
   margin-bottom: 15px;
 }