fix: b2Tob2b page title wrapping

bigcommerce · Aug 29, 2023 · 05f0dc1 · 05f0dc1
1 parent f67cf25
commit 05f0dc1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx b/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx
@@ -10,6 +10,7 @@ import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 import type { OpenPageState } from '@b3/hooks'
 import { useB3Lang } from '@b3/lang'
+import styled from '@emotion/styled'
 import { Alert, Box, ImageListItem } from '@mui/material'
 
 import { B3Card, B3CustomForm, B3Sping, CustomButton } from '@/components'
@@ -62,6 +63,20 @@ interface RegisteredProps {
   setOpenPage: Dispatch<SetStateAction<OpenPageState>>
 }
 
+export const StyledRegisterContent = styled(Box)({
+  '& #b3-customForm-id-name': {
+    '& label[data-shrink="true"]': {
+      whiteSpace: 'break-spaces',
+      minWidth: 'calc(133% - 24px)',
+      transition: 'unset',
+    },
+
+    '& label[data-shrink="false"]': {
+      whiteSpace: 'break-spaces',
+    },
+  },
+})
+
 export default function RegisteredBCToB2B(props: RegisteredProps) {
   const [errorMessage, setErrorMessage] = useState('')
   const [showFinishPage, setShowFinishPage] = useState<boolean>(false)
@@ -552,7 +567,7 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
                 isBCToB2B
               />
             ) : (
-              <Box
+              <StyledRegisterContent
                 sx={{
                   width: isMobile ? '100%' : '537px',
                   boxShadow:
@@ -656,7 +671,7 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
                     </CustomButton>
                   </Box>
                 )}
-              </Box>
+              </StyledRegisterContent>
             )}
           </Box>
         </B3Sping>

diff --git a/apps/storefront/src/utils/b3GetTextLenPX.ts b/apps/storefront/src/utils/b3GetTextLenPX.ts
@@ -15,7 +15,7 @@ const getLineNumber = (text: string, fontSize = 14) => {
 
   // pc padding: 12.8 + 12.8 + 8 + 8 + 12 + 12, origin width: 537px
   // mobile padding: (12.8 + 16 + 8 + 12) * 2, origin width: screenWidth, body margin: 16
-  const pcLen = 470
+  const pcLen = 500
   const mobileLen = screenWidth + 16 - 98
 
   const screenLen = isMobile ? mobileLen : pcLen