fix: btn display

frontend/src/app-components/inputs/ToggleableInput.tsx

@@ -41,7 +41,7 @@ export const ToggleableInput = forwardRef(
     }, [readOnlyValue, isDisabled, defaultValue]);
 
     return (
-      <Box display="flex">
+      <Box display="flex" flex={1}>
         <Switch
           onChange={() => {
             const newIsDisabled = !isDisabled;

frontend/src/components/visual-editor/form/ListMessageForm.tsx

@@ -166,7 +166,7 @@ const ListMessageForm = () => {
         </ContentItem>
       </Grid>
       <Grid item xs={1}>
-        <Divider orientation="vertical" sx={{ margin: "2rem" }} />
+        <Divider orientation="vertical" sx={{ marginX: "2rem" }} />
       </Grid>
       <Grid item xs={6}>
         <FormLabel component="h4" sx={{ marginBottom: "1rem" }}>
@@ -278,7 +278,7 @@ const ListMessageForm = () => {
           />
         </ContentItem>
       </Grid>
-      <ContentItem>
+      <ContentItem width="100%">
         <FormSectionTitle title={t("label.buttons")} Icon={ButtonsIcon} />
         <Controller
           name="options.content.buttons"

frontend/src/components/visual-editor/form/inputs/message/ButtonInput.tsx

@@ -6,7 +6,7 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { Grid } from "@mui/material";
+import { Box } from "@mui/material";
 import { FC } from "react";
 import { FieldPath, useFormContext } from "react-hook-form";
 
@@ -48,13 +48,13 @@ const ButtonInput: FC<ButtonInputProps> = ({
   } = useFormContext<IBlockAttributes>();
 
   return (
-    <>
-      <Grid item xs={5}>
+    <Box display="flex" flex={1} flexGrow={1} gap={2}>
       <Input
-          fullWidth
+        fullWidth={false}
         required
-          placeholder={t("label.title")}
+        label={t("label.title")}
         value={button.title}
+        sx={{ flex: 1 }}
         inputProps={{
           maxLength: 20,
         }}
@@ -72,8 +72,6 @@ const ButtonInput: FC<ButtonInputProps> = ({
             : null)
         }
       />
-      </Grid>
-      <Grid item xs={6}>
       {button.type === ButtonType.postback ? (
         <ToggleableInput
           defaultValue={button.payload}
@@ -102,9 +100,10 @@ const ButtonInput: FC<ButtonInputProps> = ({
       ) : (
         <Input
           required
-            type="ur"
-            placeholder="URL"
+          type="url"
+          label={t("label.url")}
           value={button.url}
+          sx={{ flex: 1 }}
           {...register(buildFieldPath(fieldPath, idx, "url"), {
             validate: {
               required: (value) => {
@@ -128,8 +127,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
           helperText={errors.message?.["buttons"]?.[idx]?.url?.message}
         />
       )}
-      </Grid>
-    </>
+    </Box>
   );
 };
 

frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx

@@ -8,8 +8,8 @@
 
 import { KeyboardReturn, Link, RemoveCircleOutline } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
-import { Box, Grid, IconButton } from "@mui/material";
-import { FC, Fragment, useEffect, useMemo, useState } from "react";
+import { Box, IconButton } from "@mui/material";
+import { FC, useEffect, useMemo, useState } from "react";
 import { FieldPath } from "react-hook-form";
 
 import DropdownButton, {
@@ -96,19 +96,10 @@ const ButtonsInput: FC<ButtonsInput> = ({
   }, [buttons]);
 
   return (
-    <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={5}>
-          {t("label.title")}
-        </Grid>
-        <Grid item xs={6}>
-          {t("label.payload")} / {t("label.url")}
-        </Grid>
-        <Grid item xs={1}>
-          &nbsp;
-        </Grid>
+    <Box display="flex" flexDirection="column">
+      <Box display="flex" flexDirection="column">
         {buttons.map(({ value, id }, idx) => (
-          <Fragment key={id}>
+          <Box display="flex" flex={1} mt={2} key={id}>
             <ButtonInput
               fieldPath={fieldPath}
               idx={idx}
@@ -116,7 +107,6 @@ const ButtonsInput: FC<ButtonsInput> = ({
               onChange={updateInput(idx)}
               disablePayload={disablePayload}
             />
-            <Grid item xs={1}>
             <IconButton
               color="error"
               onClick={() => removeInput(idx)}
@@ -124,12 +114,11 @@ const ButtonsInput: FC<ButtonsInput> = ({
             >
               <RemoveCircleOutline />
             </IconButton>
-            </Grid>
-          </Fragment>
+          </Box>
         ))}
-      </Grid>
+      </Box>
       <DropdownButton
-        sx={{ m: 1, float: "right", padding: "16px" }}
+        sx={{ alignSelf: "end", marginTop: 2 }}
         label={t("button.add_button")}
         actions={actions}
         onClick={(action) => addInput(action.defaultValue)}