fix: 🔥 style adjustments and fixes in tables and mobile

deriv-com · Oct 1, 2024 · 614479a · 614479a
1 parent 5f266a9
commit 614479a
Show file tree

Hide file tree

Showing 9 changed files with 6 additions and 15 deletions.
diff --git a/src/components/custom-tabs/custom-tabs.scss b/src/components/custom-tabs/custom-tabs.scss
@@ -6,6 +6,7 @@
   font-size: 20px;
   font-family: var(--ibm-font-family-base);
   font-weight: var(--ifm-font-weight-semibold);
+  overflow-x: hidden;
 
   &_header {
     margin-block: 45px;

diff --git a/src/features/dashboard/components/api-token-table/api-table.module.scss b/src/features/dashboard/components/api-token-table/api-table.module.scss
@@ -27,7 +27,6 @@
 
   @include tablet-lg {
     border: none;
-    margin: 0 1rem;
     gap: 3rem;
   }
 
@@ -36,6 +35,8 @@
     table-layout: fixed;
     border-collapse: collapse;
     margin-inline: 48px;
+    max-height: 560px;
+    overflow-x: hidden;
 
     th,
     td,

diff --git a/src/features/dashboard/components/app-register/app-register.scss b/src/features/dashboard/components/app-register/app-register.scss
@@ -1,7 +1,6 @@
 @use 'src/styles/mixins' as *;
 
 .app-register-container {
-  margin-inline: 16px;
   margin-top: 60px;
   max-width: 608px;
   &__input {

diff --git a/src/features/dashboard/components/apps-table/apps-table.scss b/src/features/dashboard/components/apps-table/apps-table.scss
@@ -16,12 +16,8 @@
     position: relative;
     max-height: 560px;
     overflow-y: auto;
-    table-layout: fixed;
-    border-collapse: collapse;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     margin-inline: 48px;
+    overflow-x: hidden;
 
     @include tablet-lg {
       margin-inline: 8px;
@@ -48,6 +44,7 @@
       }
     }
     tr {
+      border-top: none;
       background-color: transparent;
       font-weight: 400;
     }

diff --git a/src/features/dashboard/components/common-table/cell-copy-text.module.scss b/src/features/dashboard/components/common-table/cell-copy-text.module.scss
@@ -14,5 +14,5 @@
 
 .copyTextIcon {
   margin-left: 8px;
-  vertical-align: middle;
+  margin-top: 4px;
 }
diff --git a/src/features/dashboard/components/dashboard-container/dashboard-container.scss b/src/features/dashboard/components/dashboard-container/dashboard-container.scss
@@ -14,7 +14,6 @@
     max-width: 608px;
     margin: auto;
     text-align: center;
-    padding-inline: 16px;
     h2 {
       margin-bottom: 8px;
     }

diff --git a/src/features/dashboard/manage-apps/manage-apps.scss b/src/features/dashboard/manage-apps/manage-apps.scss
@@ -2,7 +2,6 @@
 
 .manage_apps {
   width: 100%;
-  overflow: auto;
   border-top-left-radius: rem(1.6);
   border-top-right-radius: rem(1.6);
 }
diff --git a/src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss b/src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss
@@ -15,10 +15,6 @@
     margin-block: 4px;
   }
 
-  &__oauth_container {
-    margin-left: 16px;
-  }
-
   &__oauth_info {
     list-style: disc;
     line-height: 24px;

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -471,7 +471,6 @@ main[class*='docMainContainer'] .container {
 @media (max-width: 768px) {
   .navbar__logo {
     width: rem(9);
-    margin-left: rem(1);
   }
 
   .navbar__toggle {