add useIsDeviceLargerThanLg to DescendantsPageListModal

apps/app/src/client/components/CustomNavigation/CustomNav.tsx

@@ -50,17 +50,11 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
     }
   }, [onNavSelected]);
 
-  // Set classes to hide dropdown
-  const dropdownVisibilityClassnames: string[] = [];
-  if (breakpointToHideDropDown != null) {
-    const breakpointOneLevelLarger = getBreakpointOneLevelLarger(breakpointToHideDropDown);
-    dropdownVisibilityClassnames.push(`d-${breakpointOneLevelLarger}-none`);
-  }
 
   return (
     <div className="btn-group">
       <button
-        className={`btn btn-outline-primary btn-lg dropdown-toggle text-end ${dropdownVisibilityClassnames.join(' ')}`}
+        className="btn btn-outline-primary btn-lg dropdown-toggle text-end"
         type="button"
         data-bs-toggle="dropdown"
         aria-haspopup="true"
@@ -169,13 +163,10 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
 
   // determine inactive classes to hide NavItem
   const inactiveClassnames: string[] = [];
-  const slideHrVisibilityClassnames: string[] = [];
   if (breakpointToHideInactiveTabsDown != null) {
     const breakpointOneLevelLarger = getBreakpointOneLevelLarger(breakpointToHideInactiveTabsDown);
     inactiveClassnames.push('d-none');
     inactiveClassnames.push(`d-${breakpointOneLevelLarger}-block`);
-    // slideHrVisibilityClassnames.push('d-none');
-    // slideHrVisibilityClassnames.push(`d-${breakpointOneLevelLarger}-block`);
   }
 
   return (
@@ -203,10 +194,7 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
         </Nav>
         {navRightElement}
       </div>
-      <hr
-        className={`my-0 grw-nav-slide-hr border-none ${slideHrVisibilityClassnames.join(' ')}`}
-        style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%`, display: 'inline-block' }}
-      />
+      <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
       { !hideBorderBottom && <hr className="my-0 border-top-0 border-bottom" /> }
     </div>
   );

apps/app/src/client/components/DescendantsPageListModal.tsx

@@ -10,6 +10,7 @@ import {
 
 import { useIsSharedUser } from '~/stores-universal/context';
 import { useDescendantsPageListModal } from '~/stores/modal';
+import { useIsDeviceLargerThanLg } from '~/stores/ui';
 
 import { CustomNavDropdown, CustomNavTab } from './CustomNavigation/CustomNav';
 import CustomTabContent from './CustomNavigation/CustomTabContent';
@@ -34,6 +35,8 @@ export const DescendantsPageListModal = (): JSX.Element => {
 
   const { events } = useRouter();
 
+  const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
+
   useEffect(() => {
     events.on('routeChangeStart', close);
     return () => {
@@ -94,21 +97,25 @@ export const DescendantsPageListModal = (): JSX.Element => {
       className={`grw-descendants-page-list-modal ${styles['grw-descendants-page-list-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
       <ModalHeader className="p-0" toggle={close} close={buttons}>
-        <CustomNavTab
-          activeTab={activeTab}
-          navTabMapping={navTabMapping}
-          breakpointToHideInactiveTabsDown="md"
-          onNavSelected={v => setActiveTab(v)}
-          hideBorderBottom
-        />
+        {isDeviceLargerThanLg && (
+          <CustomNavTab
+            activeTab={activeTab}
+            navTabMapping={navTabMapping}
+            breakpointToHideInactiveTabsDown="md"
+            onNavSelected={v => setActiveTab(v)}
+            hideBorderBottom
+          />
+        )}
       </ModalHeader>
       <ModalBody>
-        <CustomNavDropdown
-          activeTab={activeTab}
-          navTabMapping={navTabMapping}
-          breakpointToHideDropDown="md"
-          onNavSelected={v => setActiveTab(v)}
-        />
+        {!isDeviceLargerThanLg && (
+          <CustomNavDropdown
+            activeTab={activeTab}
+            navTabMapping={navTabMapping}
+            breakpointToHideDropDown="md"
+            onNavSelected={v => setActiveTab(v)}
+          />
+        )}
         <CustomTabContent activeTab={activeTab} navTabMapping={navTabMapping} />
       </ModalBody>
     </Modal>