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,10 +1,10 @@
 .backdrop {
-   width: 100%; 
+   width: 120%;
    height: 100%;
-   position: fixed; 
-   z-index: 100; 
-   left: 0; 
-   top: 0; 
+   position: fixed;
+   z-index: 100;
+   left: 0;
+   top: 0;
    background-color: rgba($color-background, .7);
    transition: all .5s;
 }

src/static/sass/components/_modal.scss

@@ -1,9 +1,9 @@
 .modal {
    position: fixed;
-   z-index: 500; 
+   z-index: 500;
    width: 100%;
-   top:  0; 
-   left: 0; 
+   top: 0;
+   left: 0;
    color: #fff;
    height: 52rem;
    opacity: 0;
@@ -12,11 +12,12 @@
    @include responsive(tab_port) {
       height: 38rem;
    }
-    @include responsive(phone) {
-       height: 50rem;
-    }
 
-     
+   @include responsive(phone) {
+      height: 50rem;
+   }
+
+
    &__container {
       background: linear-gradient(90deg, #000 50%, transparent);
       width: 70%;
@@ -36,7 +37,7 @@
 
       @include responsive(phone) {
          padding-top: 1rem;
-         padding-left: 1rem; 
+         padding-left: 1rem;
       }
    }
 
@@ -82,8 +83,9 @@
 
       @include responsive(tab_medium) {
          width: 95%;
-         color: rgba(255, 255, 255, 0.877); 
+         color: rgba(255, 255, 255, 0.877);
       }
+
       @include responsive(phone) {
          padding-top: 1rem;
          font-size: 1.7rem;
@@ -109,7 +111,7 @@
       }
 
       &:hover {
-         transform: scale(1.09); 
+         transform: scale(1.09);
       }
 
       &--red {
@@ -132,10 +134,8 @@
    left: 0;
    visibility: visible;
    opacity: 1;
- 
 }
 
 .hide {
-    visibility: hidden;
-}
-
+   visibility: hidden;
+}

src/static/sass/components/_movieShowcase.scss

@@ -11,14 +11,14 @@
       display: none;
    }
 
-   &__container { 
-      scrollbar-width: none;
+   &__container {
+      overflow-y: hidden;
       transition: transform 450ms;
       overflow: -moz-hidden-unscrollable;
       overflow-x: scroll;
       display: flex;
       width: 95vw;
-      overflow: -moz-scrollbars-horizontal; 
+      overflow: -moz-scrollbars-horizontal;
       grid-template-columns: repeat(20, 1fr);
       column-gap: 0;
 
@@ -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  {
-         transform: translate3d(-1rem, 0, 0); 
+      &: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 {
@@ -78,10 +78,10 @@
          }
       }
 
-      &--movie { 
+      &--movie {
          cursor: pointer;
-         transition: all 450ms; 
-         transform: center left; 
+         transition: all 450ms;
+         transform: center left;
          padding-top: 3.5rem;
          padding-bottom: 4rem;
          height: 21.5rem;
@@ -94,14 +94,14 @@
          @include responsive(phone) {
             height: 14rem;
          }
-        
+
          &:not(:last-child) {
             padding-right: .5rem;
          }
-       
+
          &-image {
             height: 100%;
-            
+
          }
 
          &__netflix {
@@ -117,6 +117,7 @@
             @include responsive(tab_port) {
                height: 42rem;
             }
+
             @include responsive(phone) {
                height: 34rem;
             }
@@ -124,5 +125,4 @@
 
       }
    }
-}
-
+}