From 2a11de757164055ae219589dbbfdbb49575b2d9f Mon Sep 17 00:00:00 2001
From: Banzobotic <78510207+Banzobotic@users.noreply.github.com>
Date: Sun, 20 Aug 2023 21:28:53 +0100
Subject: [PATCH] Fix clicking the edges of clickables

---
 lib/assets/styles/classes.scss     | 32 ++++++++++++++++++++++++++++++
 lib/components/base/Pagination.vue |  4 ++++
 2 files changed, 36 insertions(+)

diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index 895525808..935d4848e 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -230,10 +230,30 @@ a,
 .clickable {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
     outline 0.2s ease-in-out;
+    
+  position: relative;
+
+  &:not([rel~=ugc]) {
+    pointer-events: none;
+  }
 
   &:active:not(&:disabled) {
     scale: 0.95;
   }
+
+  &:not([rel~=ugc])::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: all;
+  }
+
+  &:active::before {
+    scale: 1.1;
+  }
 }
 
 .button-base {
@@ -394,6 +414,10 @@ a,
     background: none;
     box-shadow: none;
   }
+
+  &::before {
+    border-radius: var(--radius-md);
+  }
 }
 
 .btn-group {
@@ -489,6 +513,10 @@ a,
     }
   }
 
+  &::before {
+    border-radius: var(--radius-lg);
+  }
+
   // TODO: Add back later
   //&.warning {
   //  border-left: 0.5rem solid var(--color-warning-banner-side);
@@ -687,6 +715,10 @@ a,
   &:hover &:focus {
     background: var(--color-button-bg);
   }
+
+  &::before {
+    border-radius: var(--radius-max);
+  }
 }
 
 // TOOLTIPS
diff --git a/lib/components/base/Pagination.vue b/lib/components/base/Pagination.vue
index df83a8c40..6f899e894 100644
--- a/lib/components/base/Pagination.vue
+++ b/lib/components/base/Pagination.vue
@@ -152,6 +152,10 @@ a {
     transform: scale(0.95);
     filter: brightness(0.8);
   }
+
+  &::before {
+    border-radius: 2rem;
+  }
 }
 
 .has-icon {