secret is grided to same width as encoded

danielschwartz85 · Jul 27, 2023 · 48c6d95 · 48c6d95
1 parent 0f6bd05
commit 48c6d95
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/src/components/secret/secret.tsx b/src/components/secret/secret.tsx
@@ -3,10 +3,10 @@ import { StyledCard, StyledHeader } from '../common/common'
 import ErrorOutline from '@mui/icons-material/ErrorOutline'
 import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline'
 
-import Box from '@mui/material/Box'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import SecretInput from './secretInput'
+import Grid from '@mui/material/Grid'
 
 export interface ISecretProps {
   value?: string
@@ -30,25 +30,22 @@ export default function Secret(props: ISecretProps) {
     <>
       <StyledHeader variant="h5">{'Secret'}</StyledHeader>
       <StyledCard>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <SecretInput value={value} onChange={onChange} />
-          {isVerified ? (
-            <SignatureTooltip value="Verified">
-              <CheckCircleOutline sx={{ pr: 2, fontSize: 30, color: 'success.main' }} />
-            </SignatureTooltip>
-          ) : (
-            <SignatureTooltip value="Invalid">
-              <ErrorOutline sx={{ pr: 2, fontSize: 30, color: 'error.main' }} />
-            </SignatureTooltip>
-          )}
-        </Box>
+        <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item md={4} xs={6}>
+            <SecretInput value={value} onChange={onChange} />
+          </Grid>
+          <Grid item md={'auto'} xs={'auto'}>
+            {isVerified ? (
+              <SignatureTooltip value="Verified">
+                <CheckCircleOutline sx={{ pr: 2, fontSize: 30, color: 'success.main' }} />
+              </SignatureTooltip>
+            ) : (
+              <SignatureTooltip value="Invalid">
+                <ErrorOutline sx={{ pr: 2, fontSize: 30, color: 'error.main' }} />
+              </SignatureTooltip>
+            )}
+          </Grid>
+        </Grid>
       </StyledCard>
     </>
   )

diff --git a/src/components/secret/secretInput.tsx b/src/components/secret/secretInput.tsx
@@ -142,7 +142,6 @@ export default function SecretInput(props: ISecretInputProps) {
             <TextWithSave onSave={onSecretSave} value={value} {...params} />
           )
         }
-        sx={{ width: '50%' }}
         PopperComponent={CustomPopper}
         ListboxProps={{
           style: {

diff --git a/src/src/util.ts b/src/src/util.ts
@@ -79,6 +79,6 @@ export const SecretManager = {
   },
 }
 
-export function ellipsePad(str: string, limit = 50) {
+export function ellipsePad(str: string, limit = 70) {
   return str.length >= limit ? `${str.substring(0, limit - 3)}...` : str
 }