Merge pull request #341 from Concordium/improve-verifable-credential-…

…list-view Adjust scrollbar to improve list view
Concordium · Aug 17, 2023 · 5bbbc3d · 5bbbc3d
2 parents a0eb36e + 1b2d61c
commit 5bbbc3d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredential.scss b/packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredential.scss
@@ -2,15 +2,12 @@
     height: calc(100% - 56px);
     background-color: $color-bg;
     overflow-y: auto;
+    scrollbar-gutter: stable;
 
     &__card {
-        margin-left: rem(16px);
-        margin-right: rem(16px);
-        margin-bottom: rem(16px);
-
-        &:not(:first-child) {
-            margin-top: rem(16px);
-        }
+        margin-left: 24px;
+        margin-right: calc(24px - $scrollbar-width);
+        margin-bottom: 24px;
     }
 }
 
@@ -68,8 +65,7 @@
     }
 
     &__image {
-        margin-left: rem(8px);
-        margin-right: rem(8px);
+        margin: auto;
         height: 120px;
         width: 308px;
 

diff --git a/packages/browser-wallet/src/popup/styles/elements/_base.scss b/packages/browser-wallet/src/popup/styles/elements/_base.scss
@@ -95,10 +95,13 @@ body {
 }
 
 // Scrollbar section inspired by https://stackoverflow.com/questions/21684101/css-vertical-scrollbar-padding-left-right-in-ul-possible
+
+$scrollbar-width: 16px;
+
 ::-webkit-scrollbar {
     // TODO cross-browser compatibility
-    width: rem(12px);
-    height: rem(12px);
+    width: $scrollbar-width;
+    height: 16px;
 }
 
 ::-webkit-scrollbar-thumb {