Remove shadow scroll (#691)

Handles issue in #682 (comment) While putting this fix, I noticed that `use-media-query` returns document body size, which differs from how CSS media query works. This results in a weird style in between 991 px ~ 1000 px. (screenshot attached, it is on ghg.center now) 👉 I didn't fix this problem, but I patched it with CSS. (Eventually, we would need to move to Container query instead of media query: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) ![Screen Shot 2023-10-04 at 3 01 10 PM](https://github.com/NASA-IMPACT/veda-ui/assets/4583806/215d0515-e4ff-4b42-b0b1-63a21506ad1c)
NASA-IMPACT · Oct 5, 2023 · 1ab127e · 1ab127e
2 parents 49d04c7 + 0d567fa
commit 1ab127e
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 164 deletions.
diff --git a/app/scripts/components/common/dropdown-scrollable.tsx b/app/scripts/components/common/dropdown-scrollable.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { glsp } from '@devseed-ui/theme-provider';
 import {
@@ -9,14 +9,14 @@ import {
   DropTitle
 } from '@devseed-ui/dropdown';
 
-import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
-
 /**
  * Override Dropdown styles to play well with the shadow scrollbar.
  */
 const DropdownWithScroll = styled(Dropdown)`
   padding: 0;
   overflow: hidden;
+  max-height: 320px;
+  overflow-y: auto;
 
   ${DropTitle} {
     margin: 0;
@@ -28,23 +28,12 @@ const DropdownWithScroll = styled(Dropdown)`
   }
 `;
 
-const shadowScrollbarProps = {
-  autoHeight: true,
-  autoHeightMax: 320
-};
-
-interface DropdownScrollableProps extends DropdownProps {
-  children?: ReactNode;
-}
-
-export default forwardRef<DropdownRef, DropdownScrollableProps>(
+export default forwardRef<DropdownRef, DropdownProps>(
   function DropdownScrollable(props, ref) {
     const { children, ...rest } = props;
     return (
       <DropdownWithScroll ref={ref} {...rest}>
-        <ShadowScrollbar scrollbarsProps={shadowScrollbarProps}>
-          {children}
-        </ShadowScrollbar>
+        {children}  
       </DropdownWithScroll>
     );
   }

diff --git a/app/scripts/components/common/mapbox/layer-legend.tsx b/app/scripts/components/common/mapbox/layer-legend.tsx
@@ -27,8 +27,6 @@ import {
   WidgetItemHGroup
 } from '$styles/panel';
 
-import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
-
 interface LayerLegendCommonProps {
   id: string;
   title: string;
@@ -198,7 +196,9 @@ const LayerLegendTitle = styled.h3`
 
 const LegendBody = styled(WidgetItemBodyInner)`
   padding: 0;
-
+  min-height: 32px;
+  max-height: 120px;
+  overflow-y: auto;
   .scroll-inner {
     padding: ${variableGlsp(0.5, 0.75)};
   }
@@ -252,17 +252,11 @@ export function LayerLegend(
       )}
       renderBody={() => (
         <LegendBody>
-          <ShadowScrollbar
-            scrollbarsProps={{
-              autoHeight: true,
-              autoHeightMin: 32,
-              autoHeightMax: 120
-            }}
-          >
+
             <div className='scroll-inner'>
               {description || <p>No info available for this layer.</p>}
             </div>
-          </ShadowScrollbar>
+
         </LegendBody>
       )}
     />

diff --git a/app/scripts/components/common/mapbox/map-options/index.tsx b/app/scripts/components/common/mapbox/map-options/index.tsx
@@ -21,15 +21,15 @@ import { MapOptionsProps } from './types';
 import { projectionsList } from './utils';
 import { BASEMAP_STYLES } from './basemaps';
 
-import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
-
 const DropHeader = styled.div`
   padding: ${glsp()};
   box-shadow: inset 0 -1px 0 0 ${themeVal('color.base-100a')};
 `;
 
 const DropBody = styled.div`
   padding: ${glsp(0, 0, 1, 0)};
+  max-height: 320px;
+  overflow-y: auto;
 `;
 
 /**
@@ -64,11 +64,6 @@ const SelectorButton = styled(Button)`
   }
 `;
 
-const shadowScrollbarProps = {
-  autoHeight: true,
-  autoHeightMax: 320
-};
-
 const ContentGroup = styled.div`
   display: flex;
   flex-flow: column nowrap;
@@ -143,7 +138,7 @@ function MapOptions(props: MapOptionsProps) {
         <DropTitle>Map options</DropTitle>
       </DropHeader>
       <DropBody>
-        <ShadowScrollbar scrollbarsProps={shadowScrollbarProps}>
+
           <ContentGroup>
             <ContentGroupHeader>
               <ContentGroupTitle>Style</ContentGroupTitle>
@@ -258,7 +253,7 @@ function MapOptions(props: MapOptionsProps) {
               </DropMenu>
             </ContentGroupBody>
           </ContentGroup>
-        </ShadowScrollbar>
+
       </DropBody>
     </MapOptionsDropdown>
   );

diff --git a/app/scripts/components/common/page-header.tsx b/app/scripts/components/common/page-header.tsx
@@ -12,7 +12,6 @@ import {
 } from '@devseed-ui/theme-provider';
 import { reveal } from '@devseed-ui/animation';
 import { Heading, Overline } from '@devseed-ui/typography';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 import { Button } from '@devseed-ui/button';
 import {
   CollecticonEllipsisVertical,
@@ -214,6 +213,9 @@ const GlobalNavInner = styled.div`
 const GlobalNavHeader = styled.div`
   padding: ${variableGlsp(1)};
   box-shadow: inset 0 -1px 0 0 ${themeVal('color.surface-200a')};
+  ${media.largeUp`
+    display: none;
+  `}
 `;
 
 const GlobalNavTitle = styled(Heading).attrs({
@@ -225,16 +227,16 @@ const GlobalNavTitle = styled(Heading).attrs({
 
 export const GlobalNavActions = styled.div`
   align-self: start;
+  ${media.largeUp`
+    display: none;
+  `}
 `;
 
 export const GlobalNavToggle = styled(Button)`
   z-index: 2000;
 `;
 
-const GlobalNavBody = styled(ShadowScrollbar).attrs({
-  topShadowVariation: 'dark',
-  bottomShadowVariation: 'dark'
-})`
+const GlobalNavBody = styled.div`
   display: flex;
   flex: 1;
 
@@ -339,6 +341,10 @@ function PageHeader() {
 
   useEffect(() => {
     // Close global nav when media query changes.
+    // NOTE: isMediumDown is returning document.body's width, not the whole window width
+    // which conflicts with how mediaquery decides the width. 
+    // JSX element susing isMediumDown is also protected with css logic because of this.
+    // ex. Look at GlobalNavActions 
     if (!isMediumDown) setGlobalNavRevealed(false);
   }, [isMediumDown]);
 

diff --git a/app/scripts/components/common/page-local-nav.js b/app/scripts/components/common/page-local-nav.js
@@ -17,7 +17,6 @@ import {
 import { reveal } from '@devseed-ui/animation';
 import { Overline } from '@devseed-ui/typography';
 import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 
 import DropdownScrollable from './dropdown-scrollable';
 
@@ -57,7 +56,7 @@ const LocalBreadcrumb = styled.ol`
   }
 `;
 
-const NavBlock = styled(ShadowScrollbar)`
+const NavBlock = styled.div`
   display: flex;
   align-items: center;
   flex-flow: row nowrap;

diff --git a/app/scripts/components/common/shadow-scrollbar-improved.tsx b/app/scripts/components/common/shadow-scrollbar-improved.tsx
diff --git a/app/scripts/styles/panel.tsx b/app/scripts/styles/panel.tsx
@@ -11,8 +11,6 @@ import { Button } from '@devseed-ui/button';
 import { variableGlsp } from './variable-utils';
 import { VarProse } from './variable-components';
 
-import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
-
 const panelWidth = {
   xsmall: '20rem',
   small: '22rem',
@@ -103,7 +101,7 @@ export const PanelToggle = styled(Button)`
   left: calc(100% + ${variableGlsp()});
 `;
 
-export const PanelBody = styled(ShadowScrollbar)`
+export const PanelBody = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;

diff --git a/package.json b/package.json
@@ -105,7 +105,6 @@
     "@devseed-ui/form": "4.1.0",
     "@devseed-ui/global-loading": "4.1.0",
     "@devseed-ui/modal": "^4.1.0",
-    "@devseed-ui/shadow-scrollbar": "4.1.0",
     "@devseed-ui/theme-provider": "4.1.0",
     "@devseed-ui/toolbar": "4.1.0",
     "@devseed-ui/typography": "4.1.0",