From c973b281613495b5698daa24b9352b48628e4c0b Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 16 May 2023 22:17:47 +0300
Subject: [PATCH] Style fix for share popup

---
 src/components/Feed/ArticleCard.module.scss | 4 ++++
 src/components/Feed/ArticleCard.tsx         | 9 +++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index 9526c7fc..580ef1f6 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -426,6 +426,10 @@
   z-index: 3;
 }
 
+.shoutCardDetailsActive {
+  z-index: 4;
+}
+
 .shoutCardDetailsContent {
   display: flex;
 
diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx
index 9a63be43..5423cbd6 100644
--- a/src/components/Feed/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard.tsx
@@ -1,4 +1,4 @@
-import { createMemo, For, Show } from 'solid-js'
+import { createMemo, createSignal, For, Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { capitalize } from '../../utils'
 import { translit } from '../../utils/ru2en'
@@ -85,6 +85,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
     changeSearchParam('scrollTo', 'comments')
   }
 
+  const [isSharePopupActive, setIsSharePopupActive] = createSignal(false)
+
   return (
     <section
       class={clsx(styles.shoutCard, `${props.settings?.additionalClass || ''}`)}
@@ -172,7 +174,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
         </Show>
 
         <Show when={props.settings?.isFeedMode}>
-          <section class={styles.shoutCardDetails}>
+          <section
+            class={styles.shoutCardDetails}
+            classList={{ [styles.shoutCardDetailsActive]: isSharePopupActive() }}
+          >
             <div class={styles.shoutCardDetailsContent}>
               <ShoutRatingControl shout={props.article} class={styles.shoutCardDetailsItem} />