fix(mesh-ui): small style issues

cosmology-tech · Apr 3, 2024 · 0405f9e · 0405f9e
1 parent 9b7ee69
commit 0405f9e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/packages/react/.storybook/story-global.css b/packages/react/.storybook/story-global.css
@@ -42,7 +42,8 @@ svg {
 input,
 button,
 textarea,
-select {
+select,
+output {
   font: inherit;
 }
 

diff --git a/packages/react/stories/mesh/MeshStaking.stories.tsx b/packages/react/stories/mesh/MeshStaking.stories.tsx
@@ -68,6 +68,7 @@ const MeshSlider = () => {
               as="output"
               color="$text"
               fontSize="$md"
+              fontFamily="$body"
               attributes={outputProps}
             >
               {`${formatNumeric(valuePercent * TOTAL_TOKENS, 2)}`}
@@ -78,6 +79,7 @@ const MeshSlider = () => {
               color={useColorModeValue("$textSecondary", "$textPlaceholder")}
               fontSize="$sm"
               fontWeight="$light"
+              fontFamily="$body"
               attributes={labelProps}
             >
               OSMO

diff --git a/packages/react/stories/mesh/MeshStakingValidatorSquadEmpty.stories.tsx b/packages/react/stories/mesh/MeshStakingValidatorSquadEmpty.stories.tsx
@@ -53,8 +53,7 @@ const Header = (props: {
       space="$14"
       attributes={{
         position: "relative",
-        // Parent width + x padding
-        width: "calc(100% + 64px)",
+        width: "100%",
       }}
     >
       <Stack
@@ -146,7 +145,7 @@ const Header = (props: {
       <Divider
         position="absolute"
         bottom="0"
-        transform="translateX(-32px)"
+        transform="scaleX(1.2)"
         zIndex={0}
       />
     </Stack>
@@ -170,7 +169,12 @@ export const InterchainUITheme: Story = {
 
     return (
       <Box maxWidth={MAX_CONTAINER_WIDTH}>
-        <Box backgroundColor="$cardBg" p="$12" borderRadius="$md">
+        <Box
+          overflow="hidden"
+          backgroundColor="$cardBg"
+          p="$12"
+          borderRadius="$md"
+        >
           <Header isDefaultTheme assets={headerAssets} />
 
           <Box
@@ -223,7 +227,12 @@ export const MeshUICustomTheme: Story = {
     return (
       <MeshProvider>
         <Box maxWidth={MAX_CONTAINER_WIDTH}>
-          <Box backgroundColor="$cardBg" p="$12" borderRadius="$md">
+          <Box
+            overflow="hidden"
+            backgroundColor="$cardBg"
+            p="$12"
+            borderRadius="$md"
+          >
             <Header assets={headerAssets} />
 
             <Box

diff --git a/src/styles/global.css.ts b/src/styles/global.css.ts
@@ -24,7 +24,7 @@ globalStyle(`img, picture, video, canvas, svg`, {
   maxWidth: `100%`,
 });
 
-globalStyle(`input, button, textarea, select`, {
+globalStyle(`input, button, textarea, select, output`, {
   font: `inherit`,
 });
 

diff --git a/src/ui/mesh-staking/mesh-table.lite.tsx b/src/ui/mesh-staking/mesh-table.lite.tsx
@@ -106,11 +106,11 @@ export default function MeshTable(props: MeshTableProps) {
 
     if (pinnedTableMeasureRef) {
       const scrollHandler2 = () => {
-        const isScrollable1 =
+        const isScrollable2 =
           pinnedTableMeasureRef.scrollHeight >
           pinnedTableMeasureRef.clientHeight;
 
-        if (!isScrollable1) {
+        if (!isScrollable2) {
           return (state.displayPinnedTableBottomShadow = false);
         }
 
@@ -487,6 +487,9 @@ export default function MeshTable(props: MeshTableProps) {
         <Box
           boxRef={shadowRef}
           position="absolute"
+          display={
+            !props.pinnedIds || props.pinnedIds.length === 0 ? "none" : "block"
+          }
           width="$full"
           bottom="$0"
           className={standardTransitionProperties}