diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx
index caafbbf022..cb73f2861b 100644
--- a/src/components/Separator.tsx
+++ b/src/components/Separator.tsx
@@ -3,7 +3,7 @@ import { Fragment } from 'react';
import { Separator } from '@radix-ui/react-separator';
import styled, { css } from 'styled-components';
-const StyledSeparator = styled(Separator)<{ $fullHeight: boolean }>`
+const StyledSeparator = styled(Separator)<{ $fullHeight: boolean; $transparent?: boolean }>`
flex: 0 !important;
z-index: -1;
@@ -18,7 +18,8 @@ const StyledSeparator = styled(Separator)<{ $fullHeight: boolean }>`
align-self: center;
width: 0;
margin: 0 !important;
- border-right: solid var(--border-width, var(--default-border-width)) var(--color-border);
+ border-right: solid var(--border-width, var(--default-border-width))
+ ${({ $transparent }) => ($transparent ? 'transparent' : 'var(--color-border)')};
${({ $fullHeight }) =>
$fullHeight
@@ -35,16 +36,19 @@ export const VerticalSeparator = ({
className,
decorative = false,
fullHeight = false,
+ transparent = false,
}: {
className?: string;
decorative?: boolean;
fullHeight?: boolean;
+ transparent?: boolean;
}) => (
);
diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx
index b928640822..b24d07e894 100644
--- a/src/layout/Header/HeaderDesktop.tsx
+++ b/src/layout/Header/HeaderDesktop.tsx
@@ -135,16 +135,16 @@ export const HeaderDesktop = () => {
$LogoLink>
-
+
<$NavBefore>
<$LanguageSelector sideOffset={16}>
$LanguageSelector>
-
+
$NavBefore>
-
+
<$NavigationScrollBar>
<$NavigationMenu items={navItems} orientation="horizontal" dividerStyle="underline" />
diff --git a/src/pages/spot/SpotMarketsDropdown.tsx b/src/pages/spot/SpotMarketsDropdown.tsx
index 9fdb2218b5..60f2f69a86 100644
--- a/src/pages/spot/SpotMarketsDropdown.tsx
+++ b/src/pages/spot/SpotMarketsDropdown.tsx
@@ -152,7 +152,7 @@ export const SpotMarketsDropdown = ({
}
triggerType={TriggerType.MarketDropdown}
>
-
+
<$Toolbar>
<$SearchInput
placeholder="Search markets"
@@ -226,10 +226,13 @@ const $Popover = styled(Popover)`
display: flex;
flex-direction: column;
- height: calc(
+ /* Use max-height instead of height to allow the popover to be smaller if needed */
+ /* Add buffer space (4rem) to ensure pagination controls and bottom rows are visible */
+ max-height: calc(
100vh - var(--page-header-height) - var(--market-info-row-height) - var(
--page-footer-height
- ) - var(--restriction-warning-currentHeight)
+ ) - var(--restriction-warning-currentHeight) -
+ 4rem
);
width: var(--spot-marketsDropdown-openWidth);
@@ -249,7 +252,8 @@ const $Popover = styled(Popover)`
const $ScrollArea = styled.div`
overflow: scroll;
position: relative;
- height: 100%;
+ flex: 1;
+ min-height: 0; /* Allow flex item to shrink below content size */
`;
const $Table = styled(Table)`
diff --git a/src/pages/token/RewardsLeaderboardPanel.tsx b/src/pages/token/RewardsLeaderboardPanel.tsx
index fd4a7265f7..d7a4f73fb6 100644
--- a/src/pages/token/RewardsLeaderboardPanel.tsx
+++ b/src/pages/token/RewardsLeaderboardPanel.tsx
@@ -64,7 +64,7 @@ export const RewardsLeaderboardPanel = () => {
const onDownload = () => {
if (!feeLeaderboard) return;
- const csvRows = feeLeaderboard?.map((item) => ({
+ const csvRows = feeLeaderboard.map((item) => ({
rank: item.rank,
address: item.address,
estimatedRewards: item.estimatedDydxRewards,
diff --git a/src/views/MarketsDropdown.tsx b/src/views/MarketsDropdown.tsx
index d435de2197..12bd840558 100644
--- a/src/views/MarketsDropdown.tsx
+++ b/src/views/MarketsDropdown.tsx
@@ -405,10 +405,13 @@ const $Popover = styled(Popover)`
display: flex;
flex-direction: column;
- height: calc(
+ /* Use max-height instead of height to allow the popover to be smaller if needed */
+ /* Add buffer space (4rem) to ensure pagination controls and bottom rows are visible */
+ max-height: calc(
100vh - var(--page-header-height) - var(--market-info-row-height) - var(
--page-footer-height
- ) - var(--restriction-warning-currentHeight)
+ ) - var(--restriction-warning-currentHeight) -
+ 4rem
);
width: var(--marketsDropdown-openWidth);
@@ -476,7 +479,8 @@ const $TriggerFlag = styled.div`
const $ScrollArea = styled.div`
overflow: scroll;
position: relative;
- height: 100%;
+ flex: 1;
+ min-height: 0; /* Allow flex item to shrink below content size */
`;
const $Table = styled(Table)`
diff --git a/src/views/TradeSideTabs.tsx b/src/views/TradeSideTabs.tsx
index 6298568ae6..479b4165bc 100644
--- a/src/views/TradeSideTabs.tsx
+++ b/src/views/TradeSideTabs.tsx
@@ -43,21 +43,21 @@ export const TradeSideTabs = ({ sharedContent, className }: ElementProps & Style
return (
<$Container className={className}>
- <$HeaderSection>
+ <$MarginModeSection>
- <$TradeSideTabs
- fullWidthTabs
- dividerStyle="none"
- activeTab={side}
- value={side}
- items={items}
- onValueChange={(newSide: OrderSide) => {
- dispatch(tradeFormActions.setSide(newSide));
- }}
- disabled={!allowChangingOrderType}
- sharedContent={sharedContent}
- />
- $HeaderSection>
+ $MarginModeSection>
+ <$TradeSideTabs
+ fullWidthTabs
+ dividerStyle="none"
+ activeTab={side}
+ value={side}
+ items={items}
+ onValueChange={(newSide: OrderSide) => {
+ dispatch(tradeFormActions.setSide(newSide));
+ }}
+ disabled={!allowChangingOrderType}
+ sharedContent={sharedContent}
+ />
$Container>
);
};
@@ -73,23 +73,21 @@ const $Container = styled.div`
flex-direction: column;
`;
-const $HeaderSection = styled.div`
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- padding: 0.5rem;
+const $MarginModeSection = styled.div`
+ flex-shrink: 0;
+ padding: 0.5rem 0.5rem 0 0.5rem;
background-color: var(--color-layer-1);
border-top-right-radius: 0.75rem;
border-top-left-radius: 0.75rem;
- flex: 1;
- min-height: 0;
`;
const $TradeSideTabs = styled(Tabs)<{ activeTab: OrderSide }>`
--tabs-height: 2.625rem;
overflow: visible;
- padding: 0;
+ padding: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 0.5rem;
+ flex: 1;
+ min-height: 0;
/* Base styles for all tabs */
--trigger-backgroundColor: #12121280; /* #121212 at 50% opacity */
diff --git a/src/views/charts/TradingView/BaseTvChart.tsx b/src/views/charts/TradingView/BaseTvChart.tsx
index 01b265e9eb..91a7c9681a 100644
--- a/src/views/charts/TradingView/BaseTvChart.tsx
+++ b/src/views/charts/TradingView/BaseTvChart.tsx
@@ -81,6 +81,12 @@ const $PriceChart = styled.div<{ isChartReady?: boolean }>`
height: 100%;
+ ${({ isChartReady }) =>
+ !isChartReady &&
+ css`
+ background-color: var(--color-layer-1);
+ `}
+
#tv-price-chart {
${({ isChartReady }) =>
!isChartReady &&
diff --git a/src/views/dialogs/SetMarketLeverageDialog.tsx b/src/views/dialogs/SetMarketLeverageDialog.tsx
index 317afaac99..3423410489 100644
--- a/src/views/dialogs/SetMarketLeverageDialog.tsx
+++ b/src/views/dialogs/SetMarketLeverageDialog.tsx
@@ -326,10 +326,21 @@ const $LeverageSlider = styled(Slider)`
`;
const $SaveButton = styled(Button)`
- --button-textColor: var(--color-white) !important;
--button-padding: 0.5rem 1.5rem;
+ /* White text when enabled */
+ --button-textColor: var(--color-white);
+
span {
- color: var(--color-white) !important;
+ color: var(--color-white);
+ }
+
+ /* Darker, visible text when disabled */
+ &:disabled {
+ --button-textColor: var(--color-text-1) !important;
+
+ span {
+ color: var(--color-text-1) !important;
+ }
}
`;