Merge pull request #1306 from showtime-xyz/fix/notifications-max-width

Fix/notifications max width
showtime-xyz · Jul 18, 2022 · 88142ea · 88142ea
2 parents 792884a + c975e3f
commit 88142ea
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/packages/app/components/camera/vision-camera.tsx b/packages/app/components/camera/vision-camera.tsx
@@ -35,9 +35,9 @@ import { View } from "@showtime-xyz/universal.view";
 
 import { CameraButtons } from "app/components/camera/camera-buttons";
 import { useIsForeground } from "app/hooks/use-is-foreground";
+import { usePlatformBottomHeight } from "app/hooks/use-platform-bottom-height";
 import { track } from "app/lib/analytics";
 import { Haptics } from "app/lib/haptics";
-import { useBottomTabBarHeight } from "app/lib/react-navigation/bottom-tabs";
 import { useIsFocused } from "app/lib/react-navigation/native";
 
 // Multi camera on Android not yet supported by CameraX
@@ -76,7 +76,7 @@ export function Camera({
   setIsLoading,
   postPhoto,
 }: Props) {
-  const tabBarHeight = useBottomTabBarHeight();
+  const tabBarHeight = usePlatformBottomHeight();
   const camera = useRef<VisionCamera>(null);
   const [showPop, setShowPop] = useState(false);
   const [isCameraInitialized, setIsCameraInitialized] = useState(false);

diff --git a/packages/app/components/feed.tsx b/packages/app/components/feed.tsx
@@ -18,11 +18,11 @@ import { SwipeList } from "app/components/swipe-list";
 import { FeedContext } from "app/context/feed-context";
 import { useTrendingNFTS } from "app/hooks/api-hooks";
 import { useFeed } from "app/hooks/use-feed";
+import { usePlatformBottomHeight } from "app/hooks/use-platform-bottom-height";
 import { useUser } from "app/hooks/use-user";
 import { TAB_LIST_HEIGHT } from "app/lib/constants";
 import { Haptics } from "app/lib/haptics";
 import { PagerView } from "app/lib/pager-view";
-import { useBottomTabBarHeight } from "app/lib/react-navigation/bottom-tabs";
 import { useNavigation } from "app/lib/react-navigation/native";
 import { MutateProvider } from "app/providers/mutate-provider";
 
@@ -142,7 +142,7 @@ const HeaderFeed = () => {
 
 const FollowingFeed = () => {
   const queryState = useFeed("/following");
-  const bottomBarHeight = useBottomTabBarHeight();
+  const bottomBarHeight = usePlatformBottomHeight();
 
   return (
     <MutateProvider mutate={queryState.updateItem}>
@@ -157,7 +157,7 @@ const FollowingFeed = () => {
 
 const AlgorithmicFeed = () => {
   const queryState = useFeed("");
-  const bottomBarHeight = useBottomTabBarHeight();
+  const bottomBarHeight = usePlatformBottomHeight();
 
   return (
     <MutateProvider mutate={queryState.updateItem}>

diff --git a/packages/app/components/notifications.tsx b/packages/app/components/notifications.tsx
@@ -13,8 +13,7 @@ import {
 import { ModalSheet } from "@showtime-xyz/universal.modal-sheet";
 import { useRouter } from "@showtime-xyz/universal.router";
 import { Spinner } from "@showtime-xyz/universal.spinner/index";
-import { tw } from "@showtime-xyz/universal.tailwind";
-import { colors } from "@showtime-xyz/universal.tailwind";
+import { colors, tw } from "@showtime-xyz/universal.tailwind";
 import { Text } from "@showtime-xyz/universal.text";
 import { View } from "@showtime-xyz/universal.view";
 
@@ -25,10 +24,10 @@ import {
   NotificationType,
   useNotifications,
 } from "app/hooks/use-notifications";
+import { usePlatformBottomHeight } from "app/hooks/use-platform-bottom-height";
 import { useUser } from "app/hooks/use-user";
 import { axios } from "app/lib/axios";
 import { CHAIN_IDENTIFIERS } from "app/lib/constants";
-import { useBottomTabBarHeight } from "app/lib/react-navigation/bottom-tabs";
 import { useHeaderHeight } from "app/lib/react-navigation/elements";
 import { useScrollToTop } from "app/lib/react-navigation/native";
 import { TextLink } from "app/navigation/link";
@@ -40,7 +39,7 @@ export const Notifications = () => {
   const { data, fetchMore, refresh, isRefreshing, isLoadingMore } =
     useNotifications();
   const { refetchMyInfo } = useMyInfo();
-  const bottomBarHeight = useBottomTabBarHeight();
+  const bottomBarHeight = usePlatformBottomHeight();
   const headerHeight = useHeaderHeight();
   const { height: windowHeight } = useWindowDimensions();
   const flatListHeight = windowHeight - bottomBarHeight - headerHeight;
@@ -102,14 +101,18 @@ export const Notifications = () => {
         data={data}
         style={Platform.select({
           native: { height: flatListHeight },
-          default: tw.style("md:max-w-sm"),
+          default: {},
         })}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         ItemSeparatorComponent={Separator}
         onEndReached={fetchMore}
         refreshing={isRefreshing}
         onRefresh={refresh}
+        contentContainerStyle={Platform.select({
+          web: tw.style("md:max-w-sm"),
+          default: {},
+        })}
         ListFooterComponent={ListFooter}
         ListEmptyComponent={ListEmptyComponent}
         ref={listRef}
@@ -160,7 +163,7 @@ const NotificationDescription = ({
   const router = useRouter();
   if (actors && actors.length > 0) {
     return (
-      <View>
+      <View tw="flex-1">
         <Text
           tw="text-13 max-w-[69vw] text-gray-600 dark:text-gray-400"
           ellipsizeMode="tail"