Skip to content

Commit

Permalink
fix: ensure that token list can reduce in height
Browse files Browse the repository at this point in the history
  • Loading branch information
DNR500 committed Aug 13, 2024
1 parent 75d3471 commit 0248c05
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 22 deletions.
12 changes: 1 addition & 11 deletions packages/widget-playground/src/defaultWidgetConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export const widgetBaseConfig: WidgetConfig = {

export const defaultWidgetConfig: Partial<WidgetConfig> = {
...widgetBaseConfig,
appearance: 'light',
appearance: 'auto',
theme: {
palette: {
primary: {
Expand All @@ -219,17 +219,7 @@ export const defaultWidgetConfig: Partial<WidgetConfig> = {
typography: {
fontFamily: 'Inter, sans-serif',
},
// header: {
// position: 'fixed',
// top: 0,
// borderTopLeftRadius: '16px',
// borderTopRightRadius: '16px',
// boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
// pageBackground: '#F5F5F5',
// },
container: {
// display: 'flex',
// height: '100%',
boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
borderRadius: '16px',
},
Expand Down
1 change: 0 additions & 1 deletion packages/widget/src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {

return (
<PositionContainer
id="postion-container"
sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
maxHeight={headerHeight}
>
Expand Down
19 changes: 12 additions & 7 deletions packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
const { navigateBack } = useNavigateBack();
const headerRef = useRef<HTMLElement>(null);
const listParentRef = useRef<HTMLUListElement | null>(null);
const tokenListHeight = useTokenListHeight({ listParentRef, headerRef });
const { tokenListHeight, minListHeight } = useTokenListHeight({
listParentRef,
headerRef,
});

const swapOnly = useSwapOnly();

Expand All @@ -44,12 +47,14 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
<SearchTokenInput />
</Box>
</Box>
<TokenList
parentRef={listParentRef}
height={tokenListHeight}
onClick={navigateBack}
formType={formType}
/>
<Box height={minListHeight}>
<TokenList
parentRef={listParentRef}
height={tokenListHeight}
onClick={navigateBack}
formType={formType}
/>
</Box>
</PageContainer>
);
};
11 changes: 8 additions & 3 deletions packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ interface UseContentHeightProps {
headerRef: MutableRefObject<HTMLElement | null>;
}

const minTokenListHeight = 360;
const minMobileTokenListHeight = 160;
export const minTokenListHeight = 360;
export const minMobileTokenListHeight = 160;

export const useTokenListHeight = ({
listParentRef,
Expand Down Expand Up @@ -100,8 +100,13 @@ export const useTokenListHeight = ({
? minMobileTokenListHeight
: minTokenListHeight;

return Math.max(
const tokenListHeight = Math.max(
contentHeight - (headerRef.current?.offsetHeight ?? 0),
minListHeight,
);

return {
minListHeight,
tokenListHeight,
};
};

0 comments on commit 0248c05

Please sign in to comment.