[DDW-939] Fix Stake Pools tooltip z-index (#2863)

Co-authored-by: Daniel Main <[email protected]>

Author: renanvalentin

CHANGELOG.md

@@ -7,6 +7,10 @@
 - Improved stake pool searchbar ([PR 2847](https://github.com/input-output-hk/daedalus/pull/2847))
 - Implemented catalyst dynamic content ([PR 2856](https://github.com/input-output-hk/daedalus/pull/2856))
 
+### Fixes
+
+- Fixed main container zIndex ([PR 2863](https://github.com/input-output-hk/daedalus/pull/2863))
+
 ## 4.9.0-FC1
 
 ### Features
@@ -23,7 +27,7 @@
 - Fixed behaviour of wallet settings option of the app menu ([PR 2838](https://github.com/input-output-hk/daedalus/pull/2838))
 - Fixed styling of ITN rewards feature ([PR 2861](https://github.com/input-output-hk/daedalus/pull/2861))
 - Fixed available disk space takes a long time to show ([PR 2849](https://github.com/input-output-hk/daedalus/pull/2849))
-
+  
 ### Chores
 
 - Migrated codebase from javascript to typescript ([PR 2843](https://github.com/input-output-hk/daedalus/pull/2843))

source/renderer/app/components/layout/SidebarLayout.scss

@@ -12,8 +12,6 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  // Show elements that overflow the main above the sidebar area
-  z-index: 20;
 }
 
 .sidebar {
@@ -24,8 +22,6 @@
 .topbar {
   box-shadow: 0 5px 20px 0 var(--theme-sidebar-layout-topbar-shadow-color);
   flex-shrink: 0;
-  // Show elements that overflow the topbar above the content area
-  z-index: 20;
 }
 
 .contentWrapper {

source/renderer/app/components/staking/layouts/StakingWithNavigation.scss

@@ -1,3 +1,5 @@
+$stake-pools-search-z-index: 25;
+
 .component {
   display: flex;
   flex-direction: column;
@@ -14,7 +16,7 @@
   flex-shrink: 0;
   height: 50px;
   position: relative;
-  z-index: 2;
+  z-index: $stake-pools-search-z-index;
 }
 
 .page {

source/renderer/app/components/staking/layouts/StakingWithNavigation.tsx

@@ -1,29 +1,27 @@
 import React, { Component, createRef } from 'react';
-// @ts-ignore ts-migrate(2305) FIXME: Module '"react"' has no exported member 'Node'.
-import type { ElementRef, Node } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import StakingNavigation from '../navigation/StakingNavigation';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module './StakingWithNavigation.scss' ... Remove this comment to see the full error message
 import styles from './StakingWithNavigation.scss';
 
 type Props = {
-  children?: Node;
+  children?: React.ReactNode;
   activeItem: string;
   showInfoTab: boolean;
   onNavItemClick: (...args: Array<any>) => any;
   isActiveNavItem: (...args: Array<any>) => any;
 };
 type ContextValue = {
-  scrollElementRef: ElementRef<any> | null | undefined;
+  scrollElementRef: React.RefObject<HTMLDivElement> | null | undefined;
 };
 export const StakingPageScrollContext = React.createContext<ContextValue>({
   scrollElementRef: null,
 });
 
 @observer
 class StakingWithNavigation extends Component<Props> {
-  stakingPageRef = createRef<any>();
+  stakingPageRef = createRef<HTMLDivElement>();
 
   render() {
     const {
@@ -49,13 +47,7 @@ class StakingWithNavigation extends Component<Props> {
               showInfoTab={showInfoTab}
             />
           </div>
-          <div
-            className={styles.page}
-            ref={(ref) => {
-              // @ts-ignore ts-migrate(2540) FIXME: Cannot assign to 'current' because it is a read-on... Remove this comment to see the full error message
-              this.stakingPageRef.current = ref;
-            }}
-          >
+          <div className={styles.page} ref={this.stakingPageRef}>
             {children}
           </div>
         </div>

source/renderer/app/components/staking/stake-pools/StakePoolsRanking.tsx

@@ -33,6 +33,7 @@ import type { DiscreetModeFeature } from '../../../features/discreet-mode';
 import WalletsDropdown from '../../widgets/forms/WalletsDropdown';
 import ButtonLink from '../../widgets/ButtonLink';
 import { Slider } from '../../widgets/Slider';
+import { StakingPageScrollContext } from '../layouts/StakingWithNavigation';
 import styles from './StakePoolsRanking.scss';
 
 const messages = defineMessages({
@@ -390,42 +391,50 @@ class StakePoolsRanking extends Component<Props, State> {
             />
           ) : null}
         </div>
-        <div className={styles.lower}>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <div className={styles.outOfSliderRangeStart} />
-            </div>
-            <div className={styles.slider}>
-              <Slider
-                min={Math.round(
-                  MIN_DELEGATION_FUNDS_LOG * RANKING_SLIDER_RATIO
-                )}
-                minDisplayValue={MIN_DELEGATION_FUNDS}
-                max={Math.round(maxDelegationFundsLog * RANKING_SLIDER_RATIO)}
-                maxDisplayValue={maxDelegationFunds}
-                value={sliderValue}
-                displayValue={displayValue}
-                showRawValue
-                onChange={this.onSliderChange}
-                onAfterChange={rankStakePools}
-                disabled={isLoading || isRanking}
-                showTooltip
-                minTooltip={intl.formatMessage(messages.rankingMinTooltip)}
-                maxTooltip={intl.formatMessage(messages.rankingMaxTooltip)}
-              />
-            </div>
-            <div className={styles.col}>
-              <div className={styles.outOfRangeMaxAmount}>
-                <PopOver
-                  content={intl.formatMessage(messages.rankingExtraTooltip)}
-                >
-                  {shortNumber(CIRCULATING_SUPPLY)}
-                </PopOver>
+        <StakingPageScrollContext.Consumer>
+          {({ scrollElementRef }) => (
+            <div className={styles.lower}>
+              <div className={styles.row}>
+                <div className={styles.col}>
+                  <div className={styles.outOfSliderRangeStart} />
+                </div>
+                <div className={styles.slider}>
+                  <Slider
+                    min={Math.round(
+                      MIN_DELEGATION_FUNDS_LOG * RANKING_SLIDER_RATIO
+                    )}
+                    minDisplayValue={MIN_DELEGATION_FUNDS}
+                    max={Math.round(
+                      maxDelegationFundsLog * RANKING_SLIDER_RATIO
+                    )}
+                    maxDisplayValue={maxDelegationFunds}
+                    value={sliderValue}
+                    displayValue={displayValue}
+                    showRawValue
+                    onChange={this.onSliderChange}
+                    onAfterChange={rankStakePools}
+                    disabled={isLoading || isRanking}
+                    showTooltip
+                    minTooltip={intl.formatMessage(messages.rankingMinTooltip)}
+                    maxTooltip={intl.formatMessage(messages.rankingMaxTooltip)}
+                    tooltipAppendTo={() => scrollElementRef.current}
+                  />
+                </div>
+                <div className={styles.col}>
+                  <div className={styles.outOfRangeMaxAmount}>
+                    <PopOver
+                      content={intl.formatMessage(messages.rankingExtraTooltip)}
+                      appendTo={() => scrollElementRef.current}
+                    >
+                      {shortNumber(CIRCULATING_SUPPLY)}
+                    </PopOver>
+                  </div>
+                  <div className={styles.outOfSliderRangeEnd} />
+                </div>
               </div>
-              <div className={styles.outOfSliderRangeEnd} />
             </div>
-          </div>
-        </div>
+          )}
+        </StakingPageScrollContext.Consumer>
       </div>
     );
   }

source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx

@@ -19,6 +19,7 @@ import { IS_GRID_REWARDS_VIEW_AVAILABLE } from '../../../config/stakingConfig';
 import type { Intl } from '../../../types/i18nTypes';
 import { messages } from './StakePoolsSearch.messages';
 import { StakePoolsSearchListViewButton } from './StakePoolsSearchListViewButton';
+import { StakingPageScrollContext } from '../layouts/StakingWithNavigation';
 
 type Props = {
   label?: string;
@@ -92,67 +93,102 @@ function StakePoolsSearchComponent({
     IS_GRID_REWARDS_VIEW_AVAILABLE ? styles.withGridRewardsView : null,
   ]);
   return (
-    <div className={styles.component}>
-      <div className={styles.container}>
-        <SVGInline svg={searchIcon} className={styles.searchIcon} />
-        <Input
-          autoFocus
-          label={label || null}
-          className={searchInputClases}
-          onChange={onSearch}
-          ref={(input) => {
-            searchInput.current = input;
-          }}
-          placeholder={
-            placeholder || intl.formatMessage(messages.searchInputPlaceholder)
-          }
-          skin={InputSkin}
-          value={search}
-          maxLength={150}
-          onFocus={autoSelectOnFocus}
-        />
-        {hasSearchClearButton && (
-          <div className={clearSearchClasses}>
-            <PopOver content={intl.formatMessage(messages.clearTooltip)}>
-              <button
-                onClick={handleClearSearch}
-                className={styles.clearSearchButton}
-              >
-                <SVGInline svg={closeIcon} className={styles.clearSearchIcon} />
-              </button>
-            </PopOver>
+    <StakingPageScrollContext.Consumer>
+      {({ scrollElementRef }) => (
+        <div className={styles.component}>
+          <div className={styles.container}>
+            <SVGInline svg={searchIcon} className={styles.searchIcon} />
+            <Input
+              autoFocus
+              label={label || null}
+              className={searchInputClases}
+              onChange={onSearch}
+              ref={(input) => {
+                searchInput.current = input;
+              }}
+              placeholder={
+                placeholder ||
+                intl.formatMessage(messages.searchInputPlaceholder)
+              }
+              skin={InputSkin}
+              value={search}
+              maxLength={150}
+              onFocus={autoSelectOnFocus}
+            />
+            {hasSearchClearButton && (
+              <div className={clearSearchClasses}>
+                <PopOver content={intl.formatMessage(messages.clearTooltip)}>
+                  <button
+                    onClick={handleClearSearch}
+                    className={styles.clearSearchButton}
+                  >
+                    <SVGInline
+                      svg={closeIcon}
+                      className={styles.clearSearchIcon}
+                    />
+                  </button>
+                </PopOver>
+              </div>
+            )}
           </div>
-        )}
-      </div>
 
-      {isBigSearchComponent && (
-        <div className={styles.viewButtons}>
-          <PopOver content={intl.formatMessage(messages.gridIconTooltip)}>
-            <button className={gridButtonClasses} onClick={onGridView}>
-              <SVGInline svg={gridIcon} />
-            </button>
-          </PopOver>
-          {IS_GRID_REWARDS_VIEW_AVAILABLE && (
-            <PopOver
-              content={intl.formatMessage(messages.gridRewardsIconTooltip)}
-            >
-              <button
-                className={gridRewardsButtonClasses}
-                onClick={onGridRewardsView}
+          {isBigSearchComponent && (
+            <div className={styles.viewButtons}>
+              <PopOver
+                content={intl.formatMessage(messages.gridIconTooltip)}
+                appendTo={() => scrollElementRef.current}
+                popperOptions={{
+                  placement: 'top',
+                  modifiers: [
+                    {
+                      name: 'flip',
+                      options: {
+                        fallbackPlacements: ['bottom'],
+                      },
+                    },
+                  ],
+                }}
               >
-                <SVGInline svg={gridRewardsIcon} />
-              </button>
-            </PopOver>
+                <button className={gridButtonClasses} onClick={onGridView}>
+                  <SVGInline svg={gridIcon} />
+                </button>
+              </PopOver>
+              {IS_GRID_REWARDS_VIEW_AVAILABLE && (
+                <PopOver
+                  content={intl.formatMessage(messages.gridRewardsIconTooltip)}
+                  appendTo={() => scrollElementRef.current}
+                  popperOptions={{
+                    placement: 'top',
+                    modifiers: [
+                      {
+                        name: 'flip',
+                        options: {
+                          fallbackPlacements: ['bottom', 'left'],
+                        },
+                      },
+                    ],
+                  }}
+                >
+                  <button
+                    className={gridRewardsButtonClasses}
+                    onClick={onGridRewardsView}
+                  >
+                    <SVGInline svg={gridRewardsIcon} />
+                  </button>
+                </PopOver>
+              )}
+              <StakePoolsSearchListViewButton
+                isListViewTooltipVisible={isListViewTooltipVisible}
+                isListView={isListView}
+                onClick={onListView}
+                onListViewVisited={onListViewVisited}
+                tooltipTarget={scrollElementRef.current}
+              />
+            </div>
           )}
-          <StakePoolsSearchListViewButton
-            isListViewTooltipVisible={isListViewTooltipVisible}
-            isListView={isListView}
-            onClick={onListView}
-            onListViewVisited={onListViewVisited}
-          />
         </div>
       )}
-    </div>
+    </StakingPageScrollContext.Consumer>
   );
 }
 

source/renderer/app/components/staking/stake-pools/StakePoolsSearchListViewButton.tsx

@@ -16,6 +16,7 @@ type Props = {
   onClick?: () => void;
   onListViewVisited?: () => void;
   intl: Intl;
+  tooltipTarget?: HTMLDivElement;
 };
 
 function StakePoolsSearchListViewButtonComponent({
@@ -24,6 +25,7 @@ function StakePoolsSearchListViewButtonComponent({
   isListView,
   isListViewTooltipVisible,
   intl,
+  tooltipTarget,
 }: Props) {
   const [visible, setVisible] = useState(false);
   const isPopOverVisible = visible || isListViewTooltipVisible;
@@ -37,6 +39,7 @@ function StakePoolsSearchListViewButtonComponent({
     <PopOver
       visible={isPopOverVisible}
       content={intl.formatMessage(messages.listIconTooltip)}
+      appendTo={() => tooltipTarget}
     >
       <button
         className={listButtonClasses}