Fix clicking the edges of clickables

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

lib/components/base/Pagination.vue

@@ -152,6 +152,10 @@ a {
     transform: scale(0.95);
     filter: brightness(0.8);
   }
+
+  &::before {
+    border-radius: 2rem;
+  }
 }
 
 .has-icon {