Merge pull request #185 from jedmund/fix-mobile-remixes-view

Add fixes in Remixes view for mobile and tablet

components/PartyDetails/index.scss

@@ -3,11 +3,6 @@
   flex-direction: column;
   margin: $unit-4x auto 0 auto;
   max-width: $grid-width;
-  padding-bottom: $unit-12x;
-
-  @include breakpoint(phone) {
-    padding: 0 $unit;
-  }
 
   .PartyDetails {
     display: none;
@@ -16,6 +11,10 @@
     overflow: hidden;
     width: 100%;
 
+    @include breakpoint(phone) {
+      padding: 0 $unit;
+    }
+
     &.Visible {
       // margin-bottom: $unit-12x;
     }
@@ -147,6 +146,7 @@
     }
 
     &.ReadOnly {
+      box-sizing: border-box;
       line-height: 1.4;
       white-space: pre-wrap;
 
@@ -259,6 +259,7 @@
 
   .PartyInfo {
     align-items: center;
+    box-sizing: border-box;
     display: flex;
     flex-direction: row;
     gap: $unit;
@@ -267,6 +268,10 @@
     max-width: $unit * 94;
     width: 100%;
 
+    @include breakpoint(phone) {
+      padding: 0 $unit;
+    }
+
     .Left {
       flex-grow: 1;
 
@@ -339,16 +344,33 @@
       }
     }
   }
+}
 
-  .Remixes {
+.Remixes {
   display: flex;
   flex-direction: column;
   gap: $unit-2x;
-    width: 752px;
+  margin: 0 auto;
+  width: 720px;
+
+  @include breakpoint(tablet) {
+    gap: $unit;
+    max-width: 720px;
+    margin: 0 auto;
+  }
+
+  @include breakpoint(phone) {
+    max-width: inherit;
+    width: 100%;
+  }
 
   h3 {
     font-size: $font-medium;
     font-weight: $medium;
+
+    @include breakpoint(phone) {
+      padding: 0 $unit;
+    }
   }
 
   .GridRepCollection {
@@ -356,8 +378,25 @@
     margin-left: $unit-2x * -1;
     margin-right: $unit-2x * -1;
 
+    @include breakpoint(tablet) {
+      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+      max-width: inherit;
+      width: 100%;
+    }
+
+    @include breakpoint(phone) {
+      grid-template-columns: 1fr;
+      margin-left: $unit * -1;
+      margin-right: $unit * -1;
+      max-width: inherit;
+      width: 100%;
+    }
+
     .GridRep {
       min-width: 200px;
+
+      @include breakpoint(phone) {
+        min-width: 360px;
       }
     }
   }

components/PartyDetails/index.tsx

@@ -702,6 +702,7 @@ const PartyDetails = (props: Props) => {
   }
 
   return (
+    <>
       <section className="DetailsWrapper">
         <div className="PartyInfo">
           <div className="Left">
@@ -750,9 +751,11 @@ const PartyDetails = (props: Props) => {
         </div>
         {readOnly}
         {editable}
-      {remixes && remixes.length > 0 ? remixSection() : ''}
+
         {deleteAlert()}
       </section>
+      {remixes && remixes.length > 0 ? remixSection() : ''}
+    </>
   )
 }