@@ -83,91 +83,95 @@ const PortfolioPage = () => {
8383
8484 useDocumentTitle ( stringGetter ( { key : STRING_KEYS . PORTFOLIO } ) ) ;
8585
86- const routesComponent = isSimpleUi ? (
87- < Suspense fallback = { < LoadingSpace id = "portfolio" /> } >
88- < Routes >
89- < Route path = { PortfolioRoute . History } element = { < SimpleUiHistory /> } >
90- < Route index path = "*" element = { < Navigate to = { HistoryRoute . Trades } /> } />
91- < Route path = { HistoryRoute . Trades } element = { < TradeHistoryList /> } />
92- < Route path = { HistoryRoute . Transfers } element = { < AccountHistoryList /> } />
93- < Route path = { HistoryRoute . Payments } element = { < FundingHistoryList /> } />
94- </ Route >
95- < Route
96- path = "*"
97- element = { < Navigate to = { `${ PortfolioRoute . History } ${ HistoryRoute . Trades } } replace /> }
98- />
99- </ Routes >
100- </ Suspense >
101- ) : (
102- < Suspense fallback = { < LoadingSpace id = "portfolio" /> } >
103- < Routes >
104- < Route path = { PortfolioRoute . Overview } element = { < Overview /> } />
105- < Route path = { PortfolioRoute . Positions } element = { < Positions /> } />
106- < Route path = { PortfolioRoute . Orders } element = { < Orders /> } />
107- < Route path = { PortfolioRoute . Fees } element = { < Fees /> } />
108- < Route path = { PortfolioRoute . EquityTiers } element = { < EquityTiers /> } />
109- < Route path = { PortfolioRoute . History } element = { < History /> } >
110- < Route index path = "*" element = { < Navigate to = { HistoryRoute . Trades } /> } />
111- < Route
112- path = { HistoryRoute . Trades }
113- element = {
114- < FillsTable
115- initialPageSize = { initialPageSize }
116- columnKeys = {
117- isTablet
118- ? [
119- FillsTableColumnKey . Time ,
120- FillsTableColumnKey . TypeAmount ,
121- FillsTableColumnKey . PriceFee ,
122- ]
123- : [
124- FillsTableColumnKey . Market ,
125- FillsTableColumnKey . Time ,
126- FillsTableColumnKey . Type ,
127- FillsTableColumnKey . Side ,
128- FillsTableColumnKey . AmountTag ,
129- FillsTableColumnKey . Price ,
130- FillsTableColumnKey . Total ,
131- FillsTableColumnKey . Fee ,
132- FillsTableColumnKey . Liquidity ,
133- ]
86+ const routesComponent = (
87+ < div className = "p-1" >
88+ { isSimpleUi ? (
89+ < Suspense fallback = { < LoadingSpace id = "portfolio" /> } >
90+ < Routes >
91+ < Route path = { PortfolioRoute . History } element = { < SimpleUiHistory /> } >
92+ < Route index path = "*" element = { < Navigate to = { HistoryRoute . Trades } /> } />
93+ < Route path = { HistoryRoute . Trades } element = { < TradeHistoryList /> } />
94+ < Route path = { HistoryRoute . Transfers } element = { < AccountHistoryList /> } />
95+ < Route path = { HistoryRoute . Payments } element = { < FundingHistoryList /> } />
96+ </ Route >
97+ < Route
98+ path = "*"
99+ element = { < Navigate to = { `${ PortfolioRoute . History } ${ HistoryRoute . Trades } } replace /> }
100+ />
101+ </ Routes >
102+ </ Suspense >
103+ ) : (
104+ < Suspense fallback = { < LoadingSpace id = "portfolio" /> } >
105+ < Routes >
106+ < Route path = { PortfolioRoute . Overview } element = { < Overview /> } />
107+ < Route path = { PortfolioRoute . Positions } element = { < Positions /> } />
108+ < Route path = { PortfolioRoute . Orders } element = { < Orders /> } />
109+ < Route path = { PortfolioRoute . Fees } element = { < Fees /> } />
110+ < Route path = { PortfolioRoute . EquityTiers } element = { < EquityTiers /> } />
111+ < Route path = { PortfolioRoute . History } element = { < History /> } >
112+ < Route index path = "*" element = { < Navigate to = { HistoryRoute . Trades } /> } />
113+ < Route
114+ path = { HistoryRoute . Trades }
115+ element = {
116+ < FillsTable
117+ initialPageSize = { initialPageSize }
118+ columnKeys = {
119+ isTablet
120+ ? [
121+ FillsTableColumnKey . Time ,
122+ FillsTableColumnKey . TypeAmount ,
123+ FillsTableColumnKey . PriceFee ,
124+ ]
125+ : [
126+ FillsTableColumnKey . Market ,
127+ FillsTableColumnKey . Time ,
128+ FillsTableColumnKey . Type ,
129+ FillsTableColumnKey . Side ,
130+ FillsTableColumnKey . AmountTag ,
131+ FillsTableColumnKey . Price ,
132+ FillsTableColumnKey . Total ,
133+ FillsTableColumnKey . Fee ,
134+ FillsTableColumnKey . Liquidity ,
135+ ]
136+ }
137+ withOuterBorder = { isNotTablet }
138+ />
134139 }
135- withOuterBorder = { isNotTablet }
136140 />
137- }
138- />
139- < Route
140- path = { HistoryRoute . Transfers }
141- element = {
142- < TransferHistoryTable
143- initialPageSize = { initialPageSize }
144- withOuterBorder = { isNotTablet }
141+ < Route
142+ path = { HistoryRoute . Transfers }
143+ element = {
144+ < TransferHistoryTable
145+ initialPageSize = { initialPageSize }
146+ withOuterBorder = { isNotTablet }
147+ />
148+ }
145149 />
146- }
147- />
148- < Route
149- path = { HistoryRoute . VaultTransfers }
150- element = {
151- < VaultTransactionsTable
152- withOuterBorders
153- withTxHashLink
154- emptyString = { stringGetter ( { key : STRING_KEYS . YOU_HAVE_NO_VAULT_BALANCE } ) }
150+ < Route
151+ path = { HistoryRoute . VaultTransfers }
152+ element = {
153+ < VaultTransactionsTable
154+ withOuterBorders
155+ withTxHashLink
156+ emptyString = { stringGetter ( { key : STRING_KEYS . YOU_HAVE_NO_VAULT_BALANCE } ) }
157+ />
158+ }
155159 />
156- }
157- />
158- < Route
159- path = { HistoryRoute . Payments }
160- element = {
161- < FundingPaymentsTable
162- initialPageSize = { initialPageSize }
163- withOuterBorder = { isNotTablet }
160+ < Route
161+ path = { HistoryRoute . Payments }
162+ element = {
163+ < FundingPaymentsTable
164+ initialPageSize = { initialPageSize }
165+ withOuterBorder = { isNotTablet }
166+ />
167+ }
164168 />
165- }
166- />
167- </ Route >
168- < Route path = "*" element = { < Navigate to = { PortfolioRoute . Overview } replace /> } / >
169- </ Routes >
170- </ Suspense >
169+ </ Route >
170+ < Route path = "*" element = { < Navigate to = { PortfolioRoute . Overview } replace /> } />
171+ </ Routes >
172+ </ Suspense >
173+ ) }
174+ </ div >
171175 ) ;
172176
173177 if ( isSimpleUi ) {
@@ -180,9 +184,9 @@ const PortfolioPage = () => {
180184 < $MobileContent > { routesComponent } </ $MobileContent >
181185 </ $PortfolioMobile >
182186 ) : (
183- < WithSidebar
187+ < $ WithSidebar
184188 sidebar = {
185- < div tw = "flexColumn h-full justify-between bg-color-layer-0" >
189+ < div tw = "flexColumn h-full min-h-[70svh] justify-between bg-color-layer-0" >
186190 < $NavigationMenu
187191 items = { [
188192 {
@@ -317,12 +321,17 @@ const PortfolioPage = () => {
317321 }
318322 >
319323 { routesComponent }
320- </ WithSidebar >
324+ </ $ WithSidebar>
321325 ) ;
322326} ;
323327
324328export default PortfolioPage ;
325329
330+ const $WithSidebar = styled ( WithSidebar ) `
331+ height: 100%;
332+ min-height: 100%;
333+ ` ;
334+
326335const $PortfolioMobile = styled . div `
327336 min-height: 100%;
328337 ${ layoutMixins . expandingColumnWithHeader }
0 commit comments