fix(dashboard): Fix ui issues in in-app step editor

novuhq · Nov 18, 2024 · c2f0462 · c2f0462
1 parent bf67c89
commit c2f0462
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/apps/dashboard/src/components/primitives/form/avatar-picker.tsx b/apps/dashboard/src/components/primitives/form/avatar-picker.tsx
@@ -52,7 +52,7 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ n
     <div className="size-9 space-y-2">
       <Popover modal={true} open={isOpen} onOpenChange={setIsOpen}>
         <PopoverTrigger asChild>
-          <Button variant="outline" size="icon" className="text-foreground-600 relative size-full">
+          <Button variant="outline" size="icon" className="text-foreground-600 relative size-full overflow-hidden">
             {value ? (
               <Avatar className="p-px">
                 <AvatarImage src={value as string} />

diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx
@@ -1,4 +1,3 @@
-import { liquid } from '@codemirror/lang-liquid';
 import { EditorView } from '@uiw/react-codemirror';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -8,6 +7,7 @@ import { FormControl, FormField, FormItem, FormMessage } from '@/components/prim
 import { InputField } from '@/components/primitives/input';
 import { parseStepVariablesToLiquidVariables } from '@/utils/parseStepVariablesToLiquidVariables';
 import { capitalize } from '@/utils/string';
+import { liquid } from '@codemirror/lang-liquid';
 import { useStepEditorContext } from '../hooks';
 
 const bodyKey = 'body';
@@ -48,7 +48,7 @@ export const InAppBody = () => {
               />
             </InputField>
           </FormControl>
-          <FormMessage>{`This supports markdown and variables, type {{ for more.`}</FormMessage>
+          <FormMessage>{`Type {{ for variables, or wrap text in ** for bold.`}</FormMessage>
         </FormItem>
       )}
     />

diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx
@@ -32,7 +32,7 @@ export const InAppEditor = ({ uiSchema }: { uiSchema?: UiSchema }) => {
       </div>
       <div className="flex flex-col gap-1 rounded-xl border border-neutral-100 p-1">
         {(avatar || subject) && (
-          <div className="flex items-center gap-1">
+          <div className="flex gap-1">
             {avatar && getComponentByType({ component: avatar.component })}
             {subject && getComponentByType({ component: subject.component })}
           </div>

diff --git a/apps/dashboard/src/components/workflow-editor/url-input.tsx b/apps/dashboard/src/components/workflow-editor/url-input.tsx
@@ -1,5 +1,4 @@
 import { liquid } from '@codemirror/lang-liquid';
-import { EditorView } from '@uiw/react-codemirror';
 import { useFormContext } from 'react-hook-form';
 
 import { Editor } from '@/components/primitives/editor';
@@ -34,14 +33,14 @@ export const URLInput = ({
   return (
     <div className="flex flex-col gap-1">
       <div className="flex items-center justify-between space-x-2">
-        <div className="relative flex-grow">
+        <div className="relative w-full">
           <InputField className="pr-0">
             <FormField
               control={control}
               name={urlKey}
               defaultValue=""
               render={({ field }) => (
-                <FormItem className="w-full">
+                <FormItem className="w-full overflow-hidden">
                   <FormControl>
                     {asEditor ? (
                       <Editor
@@ -51,7 +50,6 @@ export const URLInput = ({
                           liquid({
                             variables,
                           }),
-                          EditorView.lineWrapping,
                         ]}
                         value={field.value}
                         onChange={field.onChange}
@@ -71,7 +69,7 @@ export const URLInput = ({
                 <FormItem>
                   <FormControl>
                     <Select value={field.value} onValueChange={field.onChange}>
-                      <SelectTrigger className="max-w-24 rounded-l-none border-0 border-l">
+                      <SelectTrigger className="h-full max-w-24 rounded-l-none border-0 border-l">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -90,7 +88,7 @@ export const URLInput = ({
         </div>
       </div>
       <FormMessagePure error={error ? String(error.message) : undefined}>
-        {withHint && 'This supports variables and relative URLs i.e /tasks/{{taskId}}'}
+        {withHint && 'Type {{ for variables'}
       </FormMessagePure>
     </div>
   );