[DDW-496] Fix scrollbar issues

input-output-hk · Jan 14, 2021 · c7cc06a · c7cc06a
1 parent dd8b04f
commit c7cc06a
Show file tree

Hide file tree

Showing 16 changed files with 56 additions and 45 deletions.
diff --git a/source/renderer/app/components/layout/SidebarLayout.scss b/source/renderer/app/components/layout/SidebarLayout.scss
@@ -33,10 +33,6 @@
   overflow-x: hidden;
   overflow-y: overlay;
   position: relative;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
 
 .content {

diff --git a/source/renderer/app/components/layout/VerticalFlexContainer.scss b/source/renderer/app/components/layout/VerticalFlexContainer.scss
@@ -4,9 +4,4 @@
   height: 100%;
   overflow-y: overlay;
   position: relative;
-
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
diff --git a/source/renderer/app/components/news/NewsFeed.scss b/source/renderer/app/components/news/NewsFeed.scss
@@ -111,6 +111,10 @@
       }
     }
 
+    *::-webkit-scrollbar-button {
+      display: none;
+    }
+
     *::-webkit-scrollbar-track {
       margin-bottom: 11px;
       margin-top: 25px;
@@ -122,6 +126,7 @@
           --theme-splash-network-scrollbar-thumb-background
         );
         min-height: 150px;
+
         &:hover {
           background-color: var(
             --theme-splash-network-scrollbar-thumb-background-hover

diff --git a/source/renderer/app/components/profile/terms-of-use/TermsOfUseForm.scss b/source/renderer/app/components/profile/terms-of-use/TermsOfUseForm.scss
@@ -6,10 +6,6 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
 
 .centeredBox {

diff --git a/source/renderer/app/components/settings/SettingsLayout.scss b/source/renderer/app/components/settings/SettingsLayout.scss
@@ -12,10 +12,6 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px 20px 20px 0;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
 
 .settingsPane {

diff --git a/source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.scss b/source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.scss
@@ -78,7 +78,7 @@
     font-family: var(--font-regular);
     font-size: 14px;
     line-height: 1.43;
-    padding: 10px 20px;
+    padding: 10px 20px 0;
 
     p {
       margin-bottom: 3px;

diff --git a/source/renderer/app/components/status/DaedalusDiagnostics.scss b/source/renderer/app/components/status/DaedalusDiagnostics.scss
@@ -57,6 +57,11 @@
 
 .table {
   width: calc(50% - 15px);
+
+  &:nth-child(2) {
+    margin-bottom: 30px;
+  }
+
   @media (max-width: 1000px) {
     width: 100%;
 
@@ -65,12 +70,6 @@
     }
   }
 
-  @media (max-height: 800px) {
-    &:nth-child(2) {
-      margin-bottom: 70px;
-    }
-  }
-
   .layoutRow {
     display: flex;
     justify-content: space-between;

diff --git a/source/renderer/app/components/wallet/receive/VirtualAddressesList.scss b/source/renderer/app/components/wallet/receive/VirtualAddressesList.scss
@@ -3,6 +3,10 @@
   width: 100%;
   width: -webkit-calc(100% + 20px);
 
+  *::-webkit-scrollbar-button {
+    display: none;
+  }
+
   :global(.ReactVirtualized__Grid__innerScrollContainer) {
     overflow: visible !important;
   }
@@ -12,6 +16,7 @@
   overflow-x: hidden !important;
   padding-right: 2px;
   will-change: none !important;
+
   &:focus {
     outline: 0;
   }

diff --git a/source/renderer/app/components/wallet/receive/WalletReceiveRandom.scss b/source/renderer/app/components/wallet/receive/WalletReceiveRandom.scss
@@ -7,10 +7,7 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
+
   @media (max-width: 1000px) {
     min-height: 600px;
   }

diff --git a/source/renderer/app/components/wallet/receive/WalletReceiveSequential.scss b/source/renderer/app/components/wallet/receive/WalletReceiveSequential.scss
@@ -9,10 +9,7 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
+
   @media (max-width: 1000px) {
     min-height: 600px;
   }

diff --git a/...renderer/app/components/wallet/transactions/render-strategies/VirtualTransactionList.scss b/...renderer/app/components/wallet/transactions/render-strategies/VirtualTransactionList.scss
@@ -14,6 +14,14 @@
     height: calc(100% - 190px);
   }
 
+  *::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  *::-webkit-scrollbar-track {
+    margin-bottom: 12px;
+  }
+
   :global(.ReactVirtualized__Grid__innerScrollContainer) {
     overflow: visible !important;
   }

diff --git a/source/renderer/app/components/wallet/utxo/WalletUtxo.scss b/source/renderer/app/components/wallet/utxo/WalletUtxo.scss
@@ -15,6 +15,7 @@
 }
 
 .borderedBox {
+  margin-bottom: 20px;
   padding: 30px;
 }
 

diff --git a/source/renderer/app/components/widgets/Dialog.scss b/source/renderer/app/components/widgets/Dialog.scss
@@ -26,20 +26,19 @@
 
   & > .contentWrapper {
     flex: 1;
-    margin-right: -17px;
+    margin-right: -25px;
     overflow-x: hidden;
     overflow-y: overlay;
-    padding-right: 17px;
+    padding-right: 25px;
     scroll-behavior: smooth;
 
-    &::-webkit-scrollbar {
-      width: 4px;
+    &::-webkit-scrollbar-button {
+      display: none;
     }
 
-    &::-webkit-scrollbar-thumb:vertical {
-      border: 0;
-      border-bottom: 20px solid transparent;
-      border-radius: 0;
+    &::-webkit-scrollbar-track {
+      margin-bottom: 12px;
+      margin-top: -8px;
     }
 
     .content {

diff --git a/source/renderer/app/containers/static/AboutDialog.scss b/source/renderer/app/containers/static/AboutDialog.scss
@@ -9,6 +9,10 @@
   top: 0;
   z-index: 9999;
 
+  &::-webkit-scrollbar-button {
+    height: 21px;
+  }
+
   @media (max-width: 950px), (max-height: 678px) {
     overflow-y: overlay;
   }

diff --git a/source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss b/source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss
@@ -1,8 +1,3 @@
-.dialog {
-  height: 100%;
-  width: 100%;
-}
-
 .overlay {
   bottom: 0;
   left: 0;
@@ -11,4 +6,17 @@
   right: 0;
   top: 0;
   z-index: 9999;
+
+  *::-webkit-scrollbar-button {
+    height: 36px;
+  }
+}
+
+.dialog {
+  height: 100%;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
 }
diff --git a/source/renderer/app/themes/index.global.scss b/source/renderer/app/themes/index.global.scss
@@ -265,6 +265,11 @@ body,
     width: 20px;
   }
 
+  &::-webkit-scrollbar-button {
+    display: block;
+    height: 6px;
+  }
+
   &::-webkit-scrollbar-track {
     background-color: transparent;
   }