DTRA-1315 / Kate / Minor UI issue: increase max width of cancel btn f…

…or tablet and mobile (deriv-com#15516) * fix: increase max width * refactor: add usega of a new mixin * refactor: replace grip with flex * fix: add restrinction for the width * fix: remove padding * chore: add padding * fix: expand grid column for sell buton
kate-deriv · Jun 21, 2024 · 87c0c35 · 87c0c35
1 parent 9fdfacb
commit 87c0c35
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/components/src/components/contract-card/contract-card.scss b/packages/components/src/components/contract-card/contract-card.scss
@@ -497,14 +497,15 @@
             transform: translateY(-8px);
         }
         &--has-cancel-btn {
-            justify-content: space-between;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
+            gap: 0.8rem;
 
-            .dc-btn--cancel {
+            .dc-btn {
                 /*rtl:ignore*/
-                margin-left: 0.8rem;
-                max-width: 10.5rem;
+                padding: 0 0.5rem;
+
+                &--cancel {
+                    width: 100%;
+                }
             }
         }
         .dc-remaining-time {

diff --git a/packages/reports/src/sass/app/modules/reports.scss b/packages/reports/src/sass/app/modules/reports.scss
@@ -958,7 +958,7 @@ $side-padding: 1.2em;
             /* stylelint-disable-next-line declaration-colon-space-after */
             grid-template-columns:
                 minmax(85px, 1fr) minmax(125px, 1fr) minmax(65px, 1fr) minmax(105px, 1fr) minmax(100px, 1fr)
-                minmax(105px, 1fr) minmax(105px, 1fr) minmax(105px, 1fr) minmax(125px, 1fr) minmax(90px, 1fr);
+                minmax(105px, 1fr) minmax(105px, 1fr) minmax(105px, 1fr) minmax(125px, 1fr) minmax(120px, 1fr);
 
             &-action {
                 display: flex;
@@ -974,6 +974,10 @@ $side-padding: 1.2em;
                     padding: 0 0.8rem;
                     min-width: 93px;
 
+                    &--cancel {
+                        padding: 0 0.2rem;
+                    }
+
                     .dc-btn__text {
                         font-size: 1.2rem;
                     }