chore: change for mobile

taiga-family · Aug 21, 2024 · 69e0864 · 69e0864
1 parent c99a1ec
commit 69e0864
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 38 deletions.
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
@@ -6,15 +6,16 @@
 
 .list {
     display: flex;
-    max-width: initial;
     justify-content: space-around;
     padding: 1rem;
     gap: 0.5rem;
     overflow: visible;
+    max-width: 100%;
 }
 
 .info {
     display: flex;
+    overflow: hidden;
     flex-direction: column;
     gap: 0.5rem;
 }

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.less
@@ -1,47 +1,15 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-.grow {
-    width: 100%;
-}
-
-.row {
-    position: relative;
-    display: grid;
-    flex: 0 0 auto;
-    grid-template-columns: 4fr 6fr 4fr;
-    gap: 1rem;
-}
-
-@media (max-width: 56.25rem) {
-    .row {
-        display: flex;
-        flex: 1;
-        flex-wrap: wrap;
-    }
-
-    .grow {
-        height: max-content;
-    }
-}
-
-@media (max-width: 35.625rem) {
-    .grow {
-        width: 100%;
-    }
-}
-
-.column {
-    display: flex;
-    gap: 0.625rem;
-    padding-top: 1.25rem;
-    flex-direction: column;
-}
-
 .layout {
     display: flex;
     width: 100%;
     gap: 1rem;
     margin-top: 1rem;
+
+    @media (max-width: 68rem) {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .minter {
@@ -55,6 +23,10 @@
     flex-grow: 1;
     width: 350px;
     flex-shrink: 0;
+
+    @media (max-width: 68rem) {
+        width: 100%;
+    }
 }
 
 .right {
@@ -70,10 +42,20 @@
     height: 100%;
     grid-template-columns: 2fr 4fr;
     flex-grow: 1;
+
+    @media (max-width: 68rem) {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .right-bottom {
     display: grid;
     gap: 1rem;
     grid-template-columns: 4fr 3fr;
+
+    @media (max-width: 80rem) {
+        display: flex;
+        flex-direction: column;
+    }
 }