add staking page

This commit is contained in:
2026-06-16 17:46:19 +03:00
parent 90d0e29e8b
commit ba505f4405
3 changed files with 149 additions and 109 deletions

View File

@@ -2,10 +2,44 @@
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 24px;
overflow: hidden;
}
.inner {
display: flex;
flex-direction: column;
gap: 14px;
padding: 24px;
}
/* Шапка (заголовок + сумма) закреплена, скроллится только список ниже. */
.body {
display: flex;
flex-direction: column;
gap: 14px;
}
/* На десктопе (две колонки) высота блока позиций не превышает карточку стейкинга:
.inner вынесен из потока, поэтому высоту строки грида задаёт только левая колонка,
а список позиций при переполнении скроллится внутри. */
@media (min-width: 1101px) {
.panel {
position: relative;
}
.inner {
position: absolute;
inset: 0;
}
.body {
flex: 1;
min-height: 0;
overflow-y: auto;
/* отступ, чтобы контент не уходил под полосу прокрутки */
padding-right: 4px;
margin-right: -4px;
}
}
.head {

View File

@@ -39,6 +39,7 @@ export function PositionsPanel({ chain, onUnstakeEth, onUnstakeSol, onClaim, uns
return (
<div className={styles.panel}>
<div className={styles.inner}>
<div className={styles.head}>
<span className={styles.title}>Мои позиции</span>
<div className={styles.total}>
@@ -46,6 +47,7 @@ export function PositionsPanel({ chain, onUnstakeEth, onUnstakeSol, onClaim, uns
</div>
</div>
<div className={styles.body}>
<WithdrawNotice compact />
{isLoading && <Spinner label="Загрузка позиций" />}
@@ -160,5 +162,7 @@ export function PositionsPanel({ chain, onUnstakeEth, onUnstakeSol, onClaim, uns
</div>
)}
</div>
</div>
</div>
)
}

View File

@@ -8,7 +8,9 @@
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 20px;
align-items: start;
/* stretch: обе колонки получают высоту строки = высоту карточки стейкинга
(блок позиций вынесен из потока и сам высоту строки не задаёт). */
align-items: stretch;
}
@media (max-width: 1100px) {