fix(bounty card): fix mobile view for claims (#731)

Co-authored-by: Overzunov <[email protected]>
near-daos · Feb 28, 2022 · d6b5df2 · d6b5df2
1 parent 87213bf
commit d6b5df2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/astro_2.0/features/ViewBounty/components/ClaimCard/ClaimCard.module.scss b/astro_2.0/features/ViewBounty/components/ClaimCard/ClaimCard.module.scss
@@ -5,21 +5,24 @@
   border: 1px solid var(--color-neutral-40);
   border-radius: 8px;
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  justify-content: flex-start;
   margin-bottom: 8px;
   max-width: 320px;
   width: 100%;
+
+  @include tablet-landscape {
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
 }
 
 .legend {
   border-radius: 50%;
   height: 8px;
-  margin: 14px 12px;
+  margin: 32px 8px;
+  min-width: 8px;
   width: 8px;
-
-  @include tablet-landscape {
-    margin: 32px 0 32px 6px;
-  }
 }
 
 .root.inProgress {
@@ -106,7 +109,7 @@
 .details {
   min-width: 194px;
   padding: 8px 12px;
-  width: 194px;
+  width: 100%;
 
   .status {
     @extend %caption1;
@@ -134,9 +137,12 @@
   }
 
   .dates {
+    align-items: center;
     color: var(--color-brand-black);
+    display: flex;
     font-size: 12px;
     font-weight: 600;
+    justify-content: space-between;
     line-height: 18px;
     white-space: nowrap;
   }

diff --git a/astro_2.0/features/ViewBounty/components/ClaimsInfo/ClaimsInfo.module.scss b/astro_2.0/features/ViewBounty/components/ClaimsInfo/ClaimsInfo.module.scss
@@ -1,7 +1,14 @@
+@import 'styles/mixins';
+
 .root {
   align-items: flex-start;
   display: flex;
+  flex-direction: column;
   width: 100%;
+
+  @include tablet-landscape {
+    flex-direction: row;
+  }
 }
 
 .column {

diff --git a/astro_2.0/features/ViewBounty/components/ClaimsStatistic/ClaimsStatistic.module.scss b/astro_2.0/features/ViewBounty/components/ClaimsStatistic/ClaimsStatistic.module.scss
@@ -5,6 +5,7 @@
   border: 1px solid var(--color-neutral-40);
   border-radius: 8px;
   display: none;
+  flex-wrap: wrap;
   width: 100%;
 
   @include tablet-landscape {
@@ -13,13 +14,13 @@
 }
 
 .chart {
-  padding: 24px;
+  padding: 24px 0 24px 24px;
 }
 
 .legend {
   display: flex;
   flex-direction: column;
-  padding: 18px 24px 18px 0;
+  padding: 18px 24px;
 }
 
 .legendItem {