fixed modal style bug

src/containers/Home.js

@@ -46,14 +46,16 @@ class Home extends Component {
 
   render() {
     return (
-      <div>
-        <MainContent />
+      <>
+        <div class="main-content">
+          <MainContent />
+        </div>
         <Modal show={this.state.toggleModal}
           modalClosed={this.closeModal}
           movie={this.state.movieOverview}>
           <MovieDetails movie={this.state.movieOverview} />
         </Modal>
-      </div>
+      </>
     );
   }
 }

src/index.js

@@ -16,7 +16,6 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 // - fix styling issue
 // - implement carousel
 // - fix modal backdrop bug
-// - fix search movie onClickFunction
 const app = (
   <Provider store={createStoreWithMiddleware(reducers)}>
     <App />

src/static/sass/components/_backdrop.scss

@@ -1,5 +1,5 @@
 .backdrop {
-   width: 100%; 
+   width: 120%;
    height: 100%;
    position: fixed;
    z-index: 100;

src/static/sass/components/_modal.scss

@@ -2,7 +2,7 @@
    position: fixed;
    z-index: 500;
    width: 100%;
-   top:  0; 
+   top: 0;
    left: 0;
    color: #fff;
    height: 52rem;
@@ -12,9 +12,10 @@
    @include responsive(tab_port) {
       height: 38rem;
    }
-    @include responsive(phone) {
-       height: 50rem;
-    }
+
+   @include responsive(phone) {
+      height: 50rem;
+   }
 
 
    &__container {
@@ -84,6 +85,7 @@
          width: 95%;
          color: rgba(255, 255, 255, 0.877);
       }
+
       @include responsive(phone) {
          padding-top: 1rem;
          font-size: 1.7rem;
@@ -132,10 +134,8 @@
    left: 0;
    visibility: visible;
    opacity: 1;
- 
 }
 
 .hide {
-    visibility: hidden;
+   visibility: hidden;
 }
-

src/static/sass/components/_movieShowcase.scss

@@ -12,7 +12,7 @@
    }
 
    &__container {
-      scrollbar-width: none;
+      overflow-y: hidden;
       transition: transform 450ms;
       overflow: -moz-hidden-unscrollable;
       overflow-x: scroll;
@@ -36,20 +36,20 @@
          }
       }
 
-      &:hover > *  {
-         transform: translate3d(-6rem, 0, 0); 
+      &:hover>* {
+         //    transform: translate3d(-5rem, 0, 0);
 
          @include responsive(tab_port) {
             transform: translate3d(-5rem, 0, 0);
          }
 
-         @include responsive(phone) {
-            transform: translate3d(-3rem, 0, 0);
-         }
+         //    @include responsive(phone) {
+         //       // transform: translate3d(-3rem, 0, 0);
+         //    }
       }
 
-      &--movie:hover ~ &--movie {
-          transform: translate3d(6rem, 0, 0); 
+      &--movie:hover~&--movie {
+         // transform: translate3d(6rem, 0, 0);
 
          @include responsive(tab_port) {
             transform: translate3d(4.5rem, 0, 0);
@@ -61,12 +61,12 @@
       }
 
 
-      &:hover > &--movie__netflix  {
+      &:hover>&--movie__netflix {
          transform: translate3d(-1rem, 0, 0);
       }
 
-      &--movie__netflix:hover ~ &--movie__netflix {
-          transform: translate3d(1rem, 0, 0); 
+      &--movie__netflix:hover~&--movie__netflix {
+         transform: translate3d(1rem, 0, 0);
       }
 
       &:hover &--movie__netflix {
@@ -117,6 +117,7 @@
             @include responsive(tab_port) {
                height: 42rem;
             }
+
             @include responsive(phone) {
                height: 34rem;
             }
@@ -125,4 +126,3 @@
       }
    }
 }
-