diff --git a/src/components/ManaCalculator/index.tsx b/src/components/ManaCalculator/index.tsx
index f2ff392ab54..3c8c1d0fb2c 100644
--- a/src/components/ManaCalculator/index.tsx
+++ b/src/components/ManaCalculator/index.tsx
@@ -39,50 +39,52 @@ function ValidatorCard({
id: number;
}) {
return (
-
-
-
Validator {id + 1}
-
-
-
-
- handleStakeChange(Number(e.target.value), id)}
- >
-
-
-
-
- handleDelegatedStakeChange(Number(e.target.value), id)
- }
- >
-
-
-
- handlePFChange(Number(e.target.value), id)}
- >
-
-
-
-
handleFCChange(Number(e.target.value), id)}
- >
+
+
+
+
Validator {id + 1}
+
+
+
+
+
Stake:
+
handleStakeChange(Number(e.target.value), id)}
+ >
+
+
+
Delegated:
+
+ handleDelegatedStakeChange(Number(e.target.value), id)
+ }
+ >
+
+
+
PF:
+
handlePFChange(Number(e.target.value), id)}
+ >
+
+
+
FC:
+
handleFCChange(Number(e.target.value), id)}
+ >
+
);
@@ -393,27 +395,24 @@ export default function ManaCalculator() {
onChange={(e) => handleEpochChange(Number(e.target.value))}
>
-
-
{state.validators.map((validator, i) => (
-
-
-
+
))}
+
+
+ {state.validators.map((validator, i) => (
+
+ ))}
+
+
+
+
+
-
-
- {state.validators.map((validator, i) => (
-
- ))}
-
-
-
-
-
diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css
index 8ba719cd540..2ea9006c6ef 100644
--- a/src/components/ManaCalculator/styles.css
+++ b/src/components/ManaCalculator/styles.css
@@ -1,15 +1,8 @@
-.mana_card {
- padding: 1em;
- margin: 0 0.3em 0.3em 0;
- text-align: left;
- align-items: stretch;
+.mana--card {
+ box-sizing: border-box;
}
-.mana_card > .row {
- padding: 0.3em;
-}
-
.row > .button {
- margin: 0 var(--ifm-spacing-horizontal);
+ margin: 0;
}
.table .row {
@@ -18,10 +11,15 @@
}
.table .row .col {
- padding: 6px;
+ box-sizing: border-box;
+}
+
+.table .row .add-button {
+ margin: 0 calc(50% - var(--ifm-navbar-padding-horizontal));
}
.table .row .col--4:nth-child(1),
+.table .row .col--8:nth-child(1),
.table .row .col--4:nth-child(2),
.table .row .col--6:nth-child(1) {
border-right: var(--ifm-table-border-width) solid