diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index e2a9fd7e..dee61f55 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -128,10 +128,10 @@
 
         display: flex;
         flex-direction: column;
-        width: calc(100% - var(--donation-box-main-padding) * 2);
+        width: 100%;
         max-width: 480px;
 
-        padding: var(--donation-box-main-padding);
+        padding: var(--donation-box-main-padding) 0;
         border-radius: var(--donate-border-radius);
         gap: calc(var(--donation-box-main-padding) / 2);
 
@@ -145,6 +145,12 @@
             inset;
     }
 
+    #donation-types,
+    #donation-options,
+    #donation-custom {
+        padding: 0 var(--donation-box-main-padding);
+    }
+
     #donation-types {
         display: flex;
         flex-direction: row;
@@ -214,6 +220,14 @@
         display: flex;
         overflow-x: scroll;
         gap: 6px;
+        mask-image: linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 4%,
+            rgba(0, 0, 0, 1) 50%,
+            rgba(0, 0, 0, 1) 96%,
+            rgba(0, 0, 0, 0) 100%
+        );
     }
 
     #donation-custom {