UI improvements and bug fixes

css/main.css

@@ -339,10 +339,12 @@ ul {
 }
 
 .ripple {
+  height: 8rem;
+  width: 8rem;
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  background: rgba(var(--text-color), 0.16);
+  background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
   pointer-events: none;
 }
 

css/main.scss

@@ -282,10 +282,16 @@ ul {
   margin-right: 0.5rem;
 }
 .ripple {
+  height: 8rem;
+  width: 8rem;
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  background: rgba(var(--text-color), 0.16);
+  background: radial-gradient(
+    circle,
+    rgba(var(--text-color), 0.3) 0%,
+    rgba(0, 0, 0, 0) 50%
+  );
   pointer-events: none;
 }
 .interact {

index.html

@@ -841,12 +841,12 @@
             const rippleAnimation = circle.animate(
                 [
                     {
-                        transform: "scale(3)",
+                        transform: "scale(4)",
                         opacity: 0,
                     },
                 ],
                 {
-                    duration: 1000,
+                    duration: uiGlobals.prefersReducedMotion ? 0 : 600,
                     fill: "forwards",
                     easing: "ease-out",
                 }
@@ -916,7 +916,7 @@
                     <li id=${id} class="torrent-card">
                         <a class="torrent-info grid" href=${`#/torrent/${id}`}>
                             <div class="torrent-card__icon torrent-type-icon">${icon}</div>
-                            <h3 class="torrent-card__title">${filename}</h3>
+                            <h3 class="torrent-card__title breakable">${filename}</h3>
                             <p class="torrent-card__tags">${tags.replace(/[\/,]/g, ' • ')}</p>
                             <span class="torrent-card__uploader">${`by ${uploader}`}</span>
                         </a>