From b0975990b1bf3ba4b3daadbddf60139ada4377c6 Mon Sep 17 00:00:00 2001
From: Nicolas Mattia <nicolas.mattia@dfinity.org>
Date: Tue, 31 Jan 2023 19:09:36 +0100
Subject: [PATCH] Fix scrolling on mobile (#1189)

Some card effects were causing extra scrollbars to appear and break
scrolling on small devices. We just disable those on mobile.
---
 src/frontend/src/styles/main.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
index 2cc9d06c60..025f6a6186 100644
--- a/src/frontend/src/styles/main.css
+++ b/src/frontend/src/styles/main.css
@@ -522,6 +522,13 @@ a:hover,
   border-radius: var(--vs-border-radius);
 }
 
+/* c-cards pretty much fill up the screen on small devices so we disable rounding */
+@media (max-width: 512px) {
+  .c-card {
+    border-radius: 0;
+  }
+}
+
 .c-card--highlight,
 .c-card--background {
   padding: var(--rs-card-bezel);
@@ -549,6 +556,13 @@ a:hover,
   filter: blur(8px);
 }
 
+/* c-cards pretty much fill up the screen on so disable the effect which causes scrolling issues */
+@media (max-width: 512px) {
+  .c-card--background::after {
+    inset: 0;
+  }
+}
+
 .c-card--background::before {
   position: absolute;
   content: "";