@ssa-ui-kit/widgets 0.0.10-alpha → 0.0.11-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.10-alpha",
+  "version": "0.0.11-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/ExchangeAccountKeys/ExchangeAccountKeys.tsx

@@ -46,7 +46,7 @@ export const ExchangeAccountKeys = ({
           <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
             API Key
           </Typography>
-          <Typography variant="h5" weight="bold" css={S.NoWrapText}>
+          <Typography variant="h5" weight="bold" css={S.LetterWrap}>
             {apiKey}
           </Typography>
         </div>
@@ -55,7 +55,9 @@ export const ExchangeAccountKeys = ({
             Secret Key
           </Typography>
           <Typography variant="h5" weight="bold" css={S.SecretKey}>
-            {isVisible ? secretKey || placeholder : placeholder}
+            <span css={S.LetterWrap}>
+              {isVisible ? secretKey || placeholder : placeholder}
+            </span>
             <Button css={S.VisibleButton} onClick={handleClickVisible}>
               <Icon
                 name={isVisible ? 'visible' : 'invisible'}

package/src/components/ExchangeAccountKeys/styles.ts

@@ -80,18 +80,8 @@ export const SecretKey = css`
   display: flex;
   align-items: center;
   gap: 7px;
-  height: 24px;
-
-  span {
-    padding: 4px 0 0;
-  }
 `;
 
-export const NoWrapText = (theme: Theme) => css`
-  white-space: nowrap;
-  overflow-x: auto;
-
-  ${theme.mediaQueries.md} {
-    overflow-x: visible;
-  }
+export const LetterWrap = css`
+  overflow-wrap: anywhere;
 `;