From 29f81a78072aa3c63edb015dc2f1bd0fb0a98246 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 10 Nov 2022 13:11:43 +0100
Subject: [PATCH] fix(ui) - player subheader more menu clickable issues

---
 .../Session_/components/HeaderMenu.tsx        |  2 +-
 .../Session_/components/menu.module.css       |  2 +-
 .../components/shared/Bookmark/Bookmark.tsx   | 80 +++++++++++--------
 .../shared/SharePopup/SharePopup.js           |  6 +-
 4 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/frontend/app/components/Session_/components/HeaderMenu.tsx b/frontend/app/components/Session_/components/HeaderMenu.tsx
index 53b42a438..08c875f96 100644
--- a/frontend/app/components/Session_/components/HeaderMenu.tsx
+++ b/frontend/app/components/Session_/components/HeaderMenu.tsx
@@ -65,7 +65,7 @@ export default class ItemMenu extends React.PureComponent<Props> {
               <div
                 key={item.key}
                 role="menuitem"
-                className="hover:bg-gray-light-shade cursor-pointer flex items-center"
+                className="hover:bg-gray-light-shade cursor-pointer flex items-center w-full"
               >
                 {item.component}
               </div>
diff --git a/frontend/app/components/Session_/components/menu.module.css b/frontend/app/components/Session_/components/menu.module.css
index 857d810d4..be06d9133 100644
--- a/frontend/app/components/Session_/components/menu.module.css
+++ b/frontend/app/components/Session_/components/menu.module.css
@@ -52,7 +52,7 @@
 
   & .menuItem {
     cursor: pointer;
-    padding: 10px;
+    /* padding: 10px; */
     color: black;
     display: flex;
     align-items: center;
diff --git a/frontend/app/components/shared/Bookmark/Bookmark.tsx b/frontend/app/components/shared/Bookmark/Bookmark.tsx
index 63fe3f117..9dc2b8c4d 100644
--- a/frontend/app/components/shared/Bookmark/Bookmark.tsx
+++ b/frontend/app/components/shared/Bookmark/Bookmark.tsx
@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from 'react'
-import { Popup, Button, Icon } from 'UI'
-import { toggleFavorite } from 'Duck/sessions'
-import { connect } from 'react-redux'
+import React, { useEffect, useState } from 'react';
+import { Popup, Button, Icon } from 'UI';
+import { toggleFavorite } from 'Duck/sessions';
+import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { Tooltip } from 'react-tippy';
-import cn from 'classnames';
 
 interface Props {
   toggleFavorite: (sessionId: string) => Promise<void>;
@@ -13,11 +11,13 @@ interface Props {
   isEnterprise: Boolean;
   noMargin?: boolean;
 }
-function Bookmark(props : Props ) {
+function Bookmark(props: Props) {
   const { sessionId, favorite, isEnterprise, noMargin } = props;
   const [isFavorite, setIsFavorite] = useState(favorite);
   const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your bookmarks';
-  const REMOVED_MESSAGE = isEnterprise ? 'Session removed from vault' : 'Session removed from your bookmarks';
+  const REMOVED_MESSAGE = isEnterprise
+    ? 'Session removed from vault'
+    : 'Session removed from your bookmarks';
   const TOOLTIP_TEXT_ADD = isEnterprise ? 'Add to vault' : 'Add to bookmarks';
   const TOOLTIP_TEXT_REMOVE = isEnterprise ? 'Remove from vault' : 'Remove from bookmarks';
 
@@ -33,34 +33,44 @@ function Bookmark(props : Props ) {
       toast.success(isFavorite ? REMOVED_MESSAGE : ADDED_MESSAGE);
       setIsFavorite(!isFavorite);
     });
-  }
+  };
 
   return (
-    <Popup
-      delay={500}
-      content={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}
-      hideOnClick={true}
-      distance={20}
-    >
-      {noMargin ? (
-        <div onClick={ toggleFavorite } className="flex items-center cursor-pointer h-full w-full p-3">
-          <Icon name={ isFavorite ? ACTIVE_ICON : INACTIVE_ICON } color={isFavorite ? "teal" : undefined} size="16" />
-          <span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
-        </div>
-      ) : (
-        <Button
-          onClick={ toggleFavorite }
-          data-favourite={ isFavorite }
-        >
-          <Icon name={ isFavorite ? ACTIVE_ICON : INACTIVE_ICON } color={isFavorite ? "teal" : undefined} size="16" />
-          <span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
-        </Button>
-      )}
-    </Popup>
-  )
+    <div onClick={toggleFavorite} className="w-full">
+      <Popup
+        delay={500}
+        content={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}
+        hideOnClick={true}
+        distance={20}
+      >
+        {noMargin ? (
+          <div className="flex items-center cursor-pointer h-full w-full p-3">
+            <Icon
+              name={isFavorite ? ACTIVE_ICON : INACTIVE_ICON}
+              color={isFavorite ? 'teal' : undefined}
+              size="16"
+            />
+            <span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
+          </div>
+        ) : (
+          <Button data-favourite={isFavorite}>
+            <Icon
+              name={isFavorite ? ACTIVE_ICON : INACTIVE_ICON}
+              color={isFavorite ? 'teal' : undefined}
+              size="16"
+            />
+            <span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
+          </Button>
+        )}
+      </Popup>
+    </div>
+  );
 }
 
-export default connect(state => ({
-  isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
-  favorite: state.getIn([ 'sessions', 'current', 'favorite']),
-}), { toggleFavorite })(Bookmark)
+export default connect(
+  (state) => ({
+    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+    favorite: state.getIn(['sessions', 'current', 'favorite']),
+  }),
+  { toggleFavorite }
+)(Bookmark);
diff --git a/frontend/app/components/shared/SharePopup/SharePopup.js b/frontend/app/components/shared/SharePopup/SharePopup.js
index cf5bb89db..02c2c8bbc 100644
--- a/frontend/app/components/shared/SharePopup/SharePopup.js
+++ b/frontend/app/components/shared/SharePopup/SharePopup.js
@@ -77,7 +77,7 @@ export default class SharePopup extends React.PureComponent {
       .toJS();
     return (
       <OutsideClickDetectingDiv
-        className={cn('relative flex items-center')}
+        className={cn('relative flex items-center w-full')}
         onClickOutside={() => {
           this.setState({ isOpen: false });
         }}
@@ -92,7 +92,7 @@ export default class SharePopup extends React.PureComponent {
           arrow
           trigger="click"
           shown={this.handleOpen}
-          className="h-full w-full p-3"
+          className="w-full"
         // beforeHidden={this.handleClose}
           html={
             <div className={styles.wrapper}>
@@ -150,7 +150,7 @@ export default class SharePopup extends React.PureComponent {
             </div>
           }
         >
-          <div onClick={this.onClickHandler}>{trigger}</div>
+          <div onClick={this.onClickHandler} className="h-full w-full p-3">{trigger}</div>
         </Tooltip>
       </OutsideClickDetectingDiv>
     );