Fix a UI bug which "Total Available" text is not centered if the amou…

…nt text is overflowed
chainapsis · Mar 27, 2024 · a4e0a82 · a4e0a82
1 parent 7d079ec
commit a4e0a82
Showing 1 changed file with 50 additions and 48 deletions.
diff --git a/packages/extension/src/pages/main/index.tsx b/packages/extension/src/pages/main/index.tsx
@@ -372,58 +372,60 @@ export const MainPage: FunctionComponent<{
                 }}
               >
                 <Skeleton isNotReady={isNotReady}>
-                  <XAxis alignY="center">
-                    <Subtitle3
-                      style={{
-                        color: ColorPalette["gray-300"],
-                      }}
-                    >
-                      {tabStatus === "available"
-                        ? intl.formatMessage({
-                            id: "page.main.chart.available",
-                          })
-                        : intl.formatMessage({
-                            id: "page.main.chart.staked",
-                          })}
-                    </Subtitle3>
-                    <animated.div
-                      style={{
-                        position: "relative",
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        height: "1px",
-                        overflowX: "clip",
-                        width: animatedPrivacyModeHover.to(
-                          (v) => `${v * 1.25}rem`
-                        ),
-                      }}
-                    >
-                      <Styles.PrivacyModeButton
-                        as={animated.div}
+                  <YAxis alignX="center">
+                    <XAxis alignY="center">
+                      <Subtitle3
                         style={{
-                          position: "absolute",
-                          right: 0,
-                          cursor: "pointer",
-                          opacity: animatedPrivacyModeHover.to((v) =>
-                            Math.max(0, (v - 0.3) * (10 / 3))
-                          ),
-                          marginTop: "2px",
+                          color: ColorPalette["gray-300"],
                         }}
-                        onClick={(e) => {
-                          e.preventDefault();
-
-                          uiConfigStore.toggleIsPrivacyMode();
+                      >
+                        {tabStatus === "available"
+                          ? intl.formatMessage({
+                              id: "page.main.chart.available",
+                            })
+                          : intl.formatMessage({
+                              id: "page.main.chart.staked",
+                            })}
+                      </Subtitle3>
+                      <animated.div
+                        style={{
+                          position: "relative",
+                          display: "flex",
+                          flexDirection: "column",
+                          justifyContent: "center",
+                          height: "1px",
+                          overflowX: "clip",
+                          width: animatedPrivacyModeHover.to(
+                            (v) => `${v * 1.25}rem`
+                          ),
                         }}
                       >
-                        {uiConfigStore.isPrivacyMode ? (
-                          <EyeSlashIcon width="1rem" height="1rem" />
-                        ) : (
-                          <EyeIcon width="1rem" height="1rem" />
-                        )}
-                      </Styles.PrivacyModeButton>
-                    </animated.div>
-                  </XAxis>
+                        <Styles.PrivacyModeButton
+                          as={animated.div}
+                          style={{
+                            position: "absolute",
+                            right: 0,
+                            cursor: "pointer",
+                            opacity: animatedPrivacyModeHover.to((v) =>
+                              Math.max(0, (v - 0.3) * (10 / 3))
+                            ),
+                            marginTop: "2px",
+                          }}
+                          onClick={(e) => {
+                            e.preventDefault();
+
+                            uiConfigStore.toggleIsPrivacyMode();
+                          }}
+                        >
+                          {uiConfigStore.isPrivacyMode ? (
+                            <EyeSlashIcon width="1rem" height="1rem" />
+                          ) : (
+                            <EyeIcon width="1rem" height="1rem" />
+                          )}
+                        </Styles.PrivacyModeButton>
+                      </animated.div>
+                    </XAxis>
+                  </YAxis>
                 </Skeleton>
                 <Gutter size="0.5rem" />
                 <Skeleton isNotReady={isNotReady} dummyMinWidth="8.125rem">