From ff40ab482faeba43074f40a8a3299c44ac9614f0 Mon Sep 17 00:00:00 2001
From: Ken-ichi Ueda <kenichi.ueda@gmail.com>
Date: Wed, 16 Oct 2024 17:34:26 -0700
Subject: [PATCH] fix: prevent content from scrolling under ButtonBar on
 TaxonDetails

This does something similar in the Explore FiltersModal.
---
 src/components/Explore/Modals/FilterModal.tsx | 27 ++++++++-----------
 src/components/SharedComponents/ButtonBar.tsx |  2 +-
 src/components/TaxonDetails/TaxonDetails.js   |  2 +-
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/Explore/Modals/FilterModal.tsx b/src/components/Explore/Modals/FilterModal.tsx
index f1b234940..102842e0a 100644
--- a/src/components/Explore/Modals/FilterModal.tsx
+++ b/src/components/Explore/Modals/FilterModal.tsx
@@ -748,7 +748,7 @@ const FilterModal = ( {
         {/*
           The iconic taxon chooser above should fill all width so we add padding here
         */}
-        <View className="px-4">
+        <View className="px-4 pb-4">
           {/* Location Section */}
           <View className="mb-7">
             <Heading4 className="mb-5">{t( "LOCATION" )}</Heading4>
@@ -1189,7 +1189,7 @@ const FilterModal = ( {
           )}
 
           {/* Photo licensing section */}
-          <View className="mb-7">
+          <View>
             <Heading4 className="mb-5">{t( "PHOTO-LICENSING" )}</Heading4>
             <Button
               text={photoLicenseValues[photoLicense]?.label}
@@ -1203,20 +1203,15 @@ const FilterModal = ( {
           </View>
         </View>
       </ScrollView>
-      {/* This view is to offset the absolute ButtonBar below */}
-      <View className="mb-10" />
-      <ButtonBar sticky containerClass="z-9">
-        <View className="flex-1 flex-row items-center">
-          <Button
-            disabled={!differsFromSnapshot || hasError}
-            className="flex-1"
-            level="focus"
-            text={t( "APPLY-FILTERS" )}
-            onPress={closeModal}
-            accessibilityLabel={t( "Apply-filters" )}
-            accessibilityState={{ disabled: !differsFromSnapshot || hasError }}
-          />
-        </View>
+      <ButtonBar>
+        <Button
+          disabled={!differsFromSnapshot || hasError}
+          level="focus"
+          text={t( "APPLY-FILTERS" )}
+          onPress={closeModal}
+          accessibilityLabel={t( "Apply-filters" )}
+          accessibilityState={{ disabled: !differsFromSnapshot || hasError }}
+        />
       </ButtonBar>
 
       {/* BottomSheets */}
diff --git a/src/components/SharedComponents/ButtonBar.tsx b/src/components/SharedComponents/ButtonBar.tsx
index 22443cd5d..6964487e3 100644
--- a/src/components/SharedComponents/ButtonBar.tsx
+++ b/src/components/SharedComponents/ButtonBar.tsx
@@ -9,7 +9,7 @@ const DROP_SHADOW = getShadow( {
 
 interface Props extends PropsWithChildren {
   containerClass?: string,
-  onLayout: () => void,
+  onLayout?: () => void,
   sticky?: boolean
 }
 
diff --git a/src/components/TaxonDetails/TaxonDetails.js b/src/components/TaxonDetails/TaxonDetails.js
index 4283bdec6..4fb4f72b1 100644
--- a/src/components/TaxonDetails/TaxonDetails.js
+++ b/src/components/TaxonDetails/TaxonDetails.js
@@ -344,7 +344,7 @@ const TaxonDetails = ( ): Node => {
         />
       </ScrollViewWrapper>
       {showSelectButton && (
-        <ButtonBar sticky containerClass="items-center z-50">
+        <ButtonBar containerClass="items-center z-50">
           <Button
             className="max-w-[500px] w-full"
             level="focus"