From d79f4c99af600c52b3a1d5ff17b8d2ec29ed20d4 Mon Sep 17 00:00:00 2001
From: top <top@noreply.fsdfsd.net>
Date: Fri, 11 Aug 2023 09:34:17 +0000
Subject: [PATCH] Fix hand, talking, marseylove breaking out of the comment
 boxes (#186)

Fixes these issues https://rdrama.net/post/18459/marseycapywalking-megathread-for-bugs-and-suggestions/4778292#context

Co-authored-by: Chuck <dude@bussy.com>
Reviewed-on: https://fsdfsd.net/rDrama/rDrama/pulls/186
Co-authored-by: top <top@noreply.fsdfsd.net>
Co-committed-by: top <top@noreply.fsdfsd.net>
---
 files/assets/css/main.css | 46 +++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 7aad993839..8d66b15ed5 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -210,6 +210,20 @@
 .fa-ankh:before{content:"\f644"}
 .fa-quotes:before{content:"\e234"}
 
+/* do not remove - fixes hand, talking, marsey-love components 
+	from breaking out of the comment box
+*/
+.comment-text a > img {
+	position: relative !important;
+	max-height: 150px !important;
+	margin: 0 !important;
+}
+.preview > img {
+	position: relative !important;
+	max-height: 150px !important;
+	margin: 0 !important;
+}
+
 button {
 	background: none;
 	border: none;
@@ -5516,45 +5530,45 @@ span[data-bs-toggle], .pat-preview {
 	position: relative;
 	display: inline-block;
 }
-img[src$="/i/hand.webp"] {
+span > img[src$="/i/hand.webp"] {
 	position: absolute;
 	width: 90%;
 	height: 90%;
 	margin-top: -10%;
 	z-index: 101;
 }
-img[src$="/i/talking.webp"] {
+span > img[src$="/i/talking.webp"] {
 	position: absolute;
 	width: 70%;
 }
-img[src$="/i/hand.webp"]~img {
+span > img[src$="/i/hand.webp"] ~ img {
 	animation: pat-pfp-anim 0.3s infinite;
 	transform-origin: bottom center;
 	margin-top: 10%;
 	text-align: center;
 	object-fit: contain;
 }
-img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"] {
+span > img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"] {
 	padding-top: 20%;
 	padding-right: 5%;
 }
-img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"]~img {
+span > img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"]~img {
 	animation: pat-pfp-anim 0.3s infinite;
 	transform-origin: bottom center;
 	margin-top: 20%;
 	text-align: center;
 	object-fit: contain;
 }
-img[src$="/i/talking.webp"]~img {
+span > img[src$="/i/talking.webp"]~img {
 	margin-top: 22%;
 }
-img[src$="/i/talking.webp"]+img+img[src$="/i/love-background.webp"] {
+span > img[src$="/i/talking.webp"]+img+img[src$="/i/love-background.webp"] {
 	margin-top: 22%;
 }
-img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"] {
+span > img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"] {
 	margin-top: 5%;
 }
-img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img  {
+span > img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img  {
 	margin-top: 20%;
 }
 
@@ -5562,7 +5576,7 @@ img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img  {
 	bottom: calc(2px + 2%) !important;
 }
 
-img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
+span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
 	position: absolute;
 	z-index: 50;
 	height: 40%;
@@ -5571,11 +5585,11 @@ img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
 	left: 40%;
 }
 
-img[src$="/i/love-foreground.webp"] {
+span > img[src$="/i/love-foreground.webp"] {
 	position: absolute;
 	z-index: 100;
 }
-img[src$="/i/love-background.webp"] {
+span > img[src$="/i/love-background.webp"] {
 	position: relative;
 	z-index: 1;
 }
@@ -5737,8 +5751,8 @@ img.golden, img[g]:not([data-src]) {
 	animation: golden 1s infinite alternate linear;
 }
 
-img[src$="/i/hand.webp"]+img[g]:not([data-src]),
-img[src$="/i/hand.webp"]+img.golden {
+span > img[src$="/i/hand.webp"]+img[g]:not([data-src]),
+span > img[src$="/i/hand.webp"]+img.golden {
 	animation: golden 1s infinite alternate linear,
 	pat-pfp-anim .3s infinite;
 }
@@ -5752,7 +5766,7 @@ img[glow]:not([data-src]) {
 	animation: glowing 1s infinite alternate linear;
 }
 
-img[src$="/i/hand.webp"]+img[glow]:not([data-src]) {
+span > img[src$="/i/hand.webp"]+img[glow]:not([data-src]) {
 	animation: glowing 1s infinite alternate linear,
 	pat-pfp-anim .3s infinite;
 }
@@ -5766,7 +5780,7 @@ img[party]:not([data-src]) {
 	animation: party 2s infinite alternate linear;
 }
 
-img[src$="/i/hand.webp"]+img[party]:not([data-src]) {
+span > img[src$="/i/hand.webp"]+img[party]:not([data-src]) {
 	animation: party 2s infinite alternate linear,
 	pat-pfp-anim .3s infinite;
 }