Merge pull request #4387 from buddyboss/PROD-7267

PROD-7358 - Reactions in a comment is offscreen using a mobile browser.
buddyboss · May 30, 2024 · f0ae858 · f0ae858
2 parents 94b6b3d + 57eb458
commit f0ae858
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/src/bp-templates/bp-nouveau/common-styles/_bp_activity_entries.scss b/src/bp-templates/bp-nouveau/common-styles/_bp_activity_entries.scss
@@ -1292,6 +1292,7 @@
 				}
 
 				@media screen and (max-width: 370px) {
+					min-width: 30px;
 
 					img {
 						width: 30px;
@@ -1310,14 +1311,14 @@
 
 			&.active {
 				bottom: 20px;
-				left: -60px;
+				left: -30px;
 			}
 
 			&:hover {
 
 				body:not(.bb-is-mobile) & {
 					bottom: 20px;
-					left: -60px;
+					left: -30px;
 				}
 			}
 
@@ -1407,6 +1408,23 @@
 	}
 }
 
+@media screen and (max-width: 480px) {
+
+	.activity-list .activity-item .activity-comments > ul > li > ul > li > ul > li > ul .acomment-display .ac-emotions_list {
+
+		&.active {
+			left: -40px;
+		}
+
+		&:hover {
+
+			body:not(.bb-is-mobile) & {
+				left: -40px;
+			}
+		}
+	}
+}
+
 /* Activity comment modal ==> Starts Here */
 .acomments-modal-open {
 	overflow: hidden;

diff --git a/src/bp-templates/bp-nouveau/css/buddypress-rtl.css b/src/bp-templates/bp-nouveau/css/buddypress-rtl.css
@@ -4693,6 +4693,9 @@ body:not(.bb-is-mobile) .activity-list .activity-item .ac-emotions_list:hover .a
 }
 
 @media screen and (max-width: 370px) {
+  .activity-list .activity-item .ac-emotions_list .ac-emotion_item {
+    min-width: 30px;
+  }
   .activity-list .activity-item .ac-emotions_list .ac-emotion_item img {
     width: 30px;
     height: 30px;
@@ -4704,12 +4707,12 @@ body:not(.bb-is-mobile) .activity-list .activity-item .ac-emotions_list:hover .a
 
 .activity-list .activity-item .acomment-display .ac-emotions_list.active {
   bottom: 20px;
-  right: -60px;
+  right: -30px;
 }
 
 body:not(.bb-is-mobile) .activity-list .activity-item .acomment-display .ac-emotions_list:hover {
   bottom: 20px;
-  right: -60px;
+  right: -30px;
 }
 
 .activity-list .emojionearea .emojionearea-picker {
@@ -4760,6 +4763,15 @@ body:not(.bb-is-mobile) .bb-media-model-wrapper .activity-list .activity-item .a
   right: -10px;
 }
 
+@media screen and (max-width: 480px) {
+  .activity-list .activity-item .activity-comments > ul > li > ul > li > ul > li > ul .acomment-display .ac-emotions_list.active {
+    right: -40px;
+  }
+  body:not(.bb-is-mobile) .activity-list .activity-item .activity-comments > ul > li > ul > li > ul > li > ul .acomment-display .ac-emotions_list:hover {
+    right: -40px;
+  }
+}
+
 /* Activity comment modal ==> Starts Here */
 .acomments-modal-open {
   overflow: hidden;

diff --git a/src/bp-templates/bp-nouveau/css/buddypress.css b/src/bp-templates/bp-nouveau/css/buddypress.css
@@ -4693,6 +4693,9 @@ body:not(.bb-is-mobile) .activity-list .activity-item .ac-emotions_list:hover .a
 }
 
 @media screen and (max-width: 370px) {
+  .activity-list .activity-item .ac-emotions_list .ac-emotion_item {
+    min-width: 30px;
+  }
   .activity-list .activity-item .ac-emotions_list .ac-emotion_item img {
     width: 30px;
     height: 30px;
@@ -4704,12 +4707,12 @@ body:not(.bb-is-mobile) .activity-list .activity-item .ac-emotions_list:hover .a
 
 .activity-list .activity-item .acomment-display .ac-emotions_list.active {
   bottom: 20px;
-  left: -60px;
+  left: -30px;
 }
 
 body:not(.bb-is-mobile) .activity-list .activity-item .acomment-display .ac-emotions_list:hover {
   bottom: 20px;
-  left: -60px;
+  left: -30px;
 }
 
 .activity-list .emojionearea .emojionearea-picker {
@@ -4760,6 +4763,15 @@ body:not(.bb-is-mobile) .bb-media-model-wrapper .activity-list .activity-item .a
   left: -10px;
 }
 
+@media screen and (max-width: 480px) {
+  .activity-list .activity-item .activity-comments > ul > li > ul > li > ul > li > ul .acomment-display .ac-emotions_list.active {
+    left: -40px;
+  }
+  body:not(.bb-is-mobile) .activity-list .activity-item .activity-comments > ul > li > ul > li > ul > li > ul .acomment-display .ac-emotions_list:hover {
+    left: -40px;
+  }
+}
+
 /* Activity comment modal ==> Starts Here */
 .acomments-modal-open {
   overflow: hidden;