Text width block updates and autofill/highlight new variant name (#3120)

zesty-io · Jan 6, 2025 · e440333 · e440333
1 parent 77fff8c
commit e440333
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/apps/active-preview/Preview.js b/src/apps/active-preview/Preview.js
@@ -277,25 +277,24 @@ export function Preview(props) {
             </Typography>
           </Box>
         )}
-        {isBlockItem ? (
+        <IconButton
+          size="small"
+          onClick={() => setRefresh(Date.now())}
+          sx={{
+            ml: 1,
+            mr: 0.5,
+          }}
+        >
+          <RefreshRounded />
+        </IconButton>
+        {isBlockItem && (
           <IconButton
             size="small"
             onClick={() => handleCopyClick(`${domain}${route}`)}
             mr={0.25}
           >
             {isCopied ? <CheckRounded /> : <LinkRounded />}
           </IconButton>
-        ) : (
-          <IconButton
-            size="small"
-            onClick={() => setRefresh(Date.now())}
-            sx={{
-              ml: 1,
-              mr: 0.5,
-            }}
-          >
-            <RefreshRounded />
-          </IconButton>
         )}
         <IconButton
           size="small"

diff --git a/src/apps/blocks/components/CreateVariantDialog.tsx b/src/apps/blocks/components/CreateVariantDialog.tsx
@@ -28,7 +28,7 @@ export const CreateVariantDialog = ({
 }) => {
   const dispatch = useDispatch();
   const history = useHistory();
-  const [variantName, setVariantName] = useState("");
+  const [variantName, setVariantName] = useState("Untitled");
   const [isLoading, setIsLoading] = useState(false);
   const { data: fields, isFetching: isFieldsLoading } =
     useGetContentModelFieldsQuery(model?.ZUID);
@@ -86,10 +86,12 @@ export const CreateVariantDialog = ({
       <DialogContent>
         <InputLabel sx={{ mb: 0.5 }}>Variant Name</InputLabel>
         <TextField
+          autoFocus
           value={variantName}
           onChange={(event) => setVariantName(event.target.value)}
           fullWidth
           data-cy="variant-name-input"
+          onFocus={(evt) => evt.target.select()}
         />
       </DialogContent>
       <DialogActions>

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/BlockTabs.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/BlockTabs.tsx
@@ -152,9 +152,16 @@ export const BlockTabs = (props: any) => {
                   height={110}
                 ></Box>
                 <Box>
-                  <Typography variant="h4">
-                    Your search <strong>"{search}"</strong> could not find any
-                    results
+                  <Typography variant="h4" maxWidth={458}>
+                    Your search{" "}
+                    <strong
+                      style={{
+                        wordBreak: "break-all",
+                      }}
+                    >
+                      "{search}"
+                    </strong>{" "}
+                    could not find any results
                   </Typography>
                   <Typography
                     variant="body2"
@@ -264,6 +271,7 @@ const BlockVariantCard = ({ block }: { block: ContentItem }) => {
       <Box
         sx={{
           minWidth: 0,
+          maxWidth: 458,
         }}
       >
         <Typography noWrap variant="body1" fontWeight={700}>