From 2dd261161e20272f1413618f6614c12d31c06596 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Mon, 21 Oct 2024 16:04:01 +0200
Subject: [PATCH] fix: add mod nsfw tag

---
 src/components/ModCard.tsx |  6 ++++++
 src/styles/cardMod.css     | 14 +++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/ModCard.tsx b/src/components/ModCard.tsx
index c14372f..6abd397 100644
--- a/src/components/ModCard.tsx
+++ b/src/components/ModCard.tsx
@@ -50,7 +50,13 @@ export const ModCard = React.memo((props: ModDetails) => {
             src={props.featuredImageUrl}
             onError={handleModImageError}
             className='cMMPicture'
+            alt={`featured image for mod ${props.title}`}
           />
+          {props.nsfw && (
+            <div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW IBMSMSMBSSTagsTagNSFWCard'>
+              <p>NSFW</p>
+            </div>
+          )}
         </div>
         <div className='cMMBody'>
           <h3 className='cMMBodyTitle'>{props.title}</h3>
diff --git a/src/styles/cardMod.css b/src/styles/cardMod.css
index 7dae7cc..3a50b5c 100644
--- a/src/styles/cardMod.css
+++ b/src/styles/cardMod.css
@@ -96,6 +96,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   font-size: 20px;
   line-height: 1.25;
   color: rgba(255, 255, 255, 0.75);
@@ -107,6 +108,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   color: rgba(255, 255, 255, 0.5);
   font-size: 15px;
   line-height: 1.5;
@@ -119,11 +121,12 @@
   justify-content: start;
   align-items: center;
   font-size: 14px;
-  background: rgba(255,255,255,0.05);
+  background: rgba(255, 255, 255, 0.05);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 1;
+  line-clamp: 1;
 }
 
 .cMMFootReactions {
@@ -145,8 +148,9 @@
 }
 
 .IBMSMSMBSSTagsTag.IBMSMSMBSSTagsTagNSFW.IBMSMSMBSSTagsTagNSFWCard {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    backdrop-filter: blur(10px);
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }