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,25 +344,59 @@
       }
     }
   }
+}
 
-  .Remixes {
-    display: flex;
-    flex-direction: column;
-    gap: $unit-2x;
-    width: 752px;
+.Remixes {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-2x;
+  margin: 0 auto;
+  width: 720px;
 
-    h3 {
-      font-size: $font-medium;
-      font-weight: $medium;
+  @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 {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    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%;
     }
 
-    .GridRepCollection {
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      margin-left: $unit-2x * -1;
-      margin-right: $unit-2x * -1;
+    @include breakpoint(phone) {
+      grid-template-columns: 1fr;
+      margin-left: $unit * -1;
+      margin-right: $unit * -1;
+      max-width: inherit;
+      width: 100%;
+    }
 
-      .GridRep {
-        min-width: 200px;
+    .GridRep {
+      min-width: 200px;
+
+      @include breakpoint(phone) {
+        min-width: 360px;
       }
     }
   }

components/PartyDetails/index.tsx

@@ -702,57 +702,60 @@ const PartyDetails = (props: Props) => {
   }
 
   return (
-    <section className="DetailsWrapper">
-      <div className="PartyInfo">
-        <div className="Left">
-          <div className="Header">
-            <h1 className={name ? '' : 'empty'}>
-              {name ? name : t('no_title')}
-            </h1>
-            {party.remix && party.sourceParty ? (
-              <Tooltip content={t('tooltips.source')}>
-                <Button
-                  className="IconButton Blended"
-                  leftAccessoryIcon={<RemixIcon />}
-                  onClick={() => goTo(party.sourceParty?.shortcode)}
-                />
-              </Tooltip>
-            ) : (
-              ''
-            )}
+    <>
+      <section className="DetailsWrapper">
+        <div className="PartyInfo">
+          <div className="Left">
+            <div className="Header">
+              <h1 className={name ? '' : 'empty'}>
+                {name ? name : t('no_title')}
+              </h1>
+              {party.remix && party.sourceParty ? (
+                <Tooltip content={t('tooltips.source')}>
+                  <Button
+                    className="IconButton Blended"
+                    leftAccessoryIcon={<RemixIcon />}
+                    onClick={() => goTo(party.sourceParty?.shortcode)}
+                  />
+                </Tooltip>
+              ) : (
+                ''
+              )}
+            </div>
+            <div className="attribution">
+              {renderUserBlock()}
+              {party.raid ? linkedRaidBlock(party.raid) : ''}
+              {party.created_at != '' ? (
+                <time
+                  className="last-updated"
+                  dateTime={new Date(party.created_at).toString()}
+                >
+                  {formatTimeAgo(new Date(party.created_at), locale)}
+                </time>
+              ) : (
+                ''
+              )}
+            </div>
           </div>
-          <div className="attribution">
-            {renderUserBlock()}
-            {party.raid ? linkedRaidBlock(party.raid) : ''}
-            {party.created_at != '' ? (
-              <time
-                className="last-updated"
-                dateTime={new Date(party.created_at).toString()}
-              >
-                {formatTimeAgo(new Date(party.created_at), locale)}
-              </time>
+          <div className="Right">
+            {party.editable ? (
+              <Button
+                leftAccessoryIcon={<EditIcon />}
+                text={t('buttons.show_info')}
+                onClick={toggleDetails}
+              />
             ) : (
-              ''
+              <div />
             )}
           </div>
         </div>
-        <div className="Right">
-          {party.editable ? (
-            <Button
-              leftAccessoryIcon={<EditIcon />}
-              text={t('buttons.show_info')}
-              onClick={toggleDetails}
-            />
-          ) : (
-            <div />
-          )}
-        </div>
-      </div>
-      {readOnly}
-      {editable}
+        {readOnly}
+        {editable}
+
+        {deleteAlert()}
+      </section>
       {remixes && remixes.length > 0 ? remixSection() : ''}
-      {deleteAlert()}
-    </section>
+    </>
   )
 }