From 6c5686a4267bda3c7002d254b5d76f1fdb3aa128 Mon Sep 17 00:00:00 2001
From: ll__ <loatheb.zhao@gmail.com>
Date: Mon, 13 Jun 2022 19:05:54 +0800
Subject: [PATCH] fix: dropdown height for width screen & FAB round border
 (#875)

---
 .../components/src/Layout/BottomBarModal/index.tsx     | 10 ++++++++--
 packages/kit/src/components/Header/ChainSelector.tsx   |  5 ++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/Layout/BottomBarModal/index.tsx b/packages/components/src/Layout/BottomBarModal/index.tsx
index ad7a62b434e..6fa21c15a0e 100644
--- a/packages/components/src/Layout/BottomBarModal/index.tsx
+++ b/packages/components/src/Layout/BottomBarModal/index.tsx
@@ -50,7 +50,10 @@ const BottomBarModal = forwardRef<TBottomBarRefAttr, TBottomBarModalProps>(
   (props, ref) => {
     const modalizeRef = useRef(null);
     const combinedRef = useCombinedRefs(ref, modalizeRef);
-    const [inactiveFontColor] = useThemeValue(['text-default']);
+    const [inactiveFontColor, defaultBgColor] = useThemeValue([
+      'text-default',
+      'background-default',
+    ]);
     return (
       <Modalize
         adjustToContentHeight
@@ -67,8 +70,11 @@ const BottomBarModal = forwardRef<TBottomBarRefAttr, TBottomBarModalProps>(
             duration: 150,
           },
         }}
+        modalStyle={{
+          backgroundColor: defaultBgColor,
+        }}
       >
-        <Box mb={props.tabBarHeight} p="16px" bgColor="background-default">
+        <Box mb={props.tabBarHeight} p="16px">
           {props.foldableList.map((foldable, index) => (
             <Pressable
               key={index}
diff --git a/packages/kit/src/components/Header/ChainSelector.tsx b/packages/kit/src/components/Header/ChainSelector.tsx
index a5ef7c95a35..fe9435e0065 100644
--- a/packages/kit/src/components/Header/ChainSelector.tsx
+++ b/packages/kit/src/components/Header/ChainSelector.tsx
@@ -70,7 +70,10 @@ const ChainSelector: FC = () => {
         setPositionOnlyMounted
         positionTranslateY={-4}
         dropdownPosition="top-left"
-        dropdownProps={{ minW: '240px', height: '320px' }}
+        dropdownProps={{
+          minW: '240px',
+          height: isVerticalLayout ? '70%' : '320px',
+        }}
         value={activeNetwork ? activeNetwork?.id : undefined}
         onChange={handleActiveChainChange}
         title={intl.formatMessage({ id: 'network__networks' })}