💄 (js) Fix spacings related to avatars

packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -30,7 +30,7 @@ export const AudioBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "

packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx

@@ -29,7 +29,7 @@ export const EmbedBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col w-full animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div
           class={'flex relative z-10 items-start typebot-host-bubble w-full'}
         >

packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx

@@ -40,7 +40,7 @@ export const ImageBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "

packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -33,7 +33,7 @@ export const VideoBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "

packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx

@@ -8,7 +8,6 @@ import { createSignal, onMount } from 'solid-js'
 type Props = {
   block: EmailInputBlock
   defaultValue?: string
-  hasGuestAvatar: boolean
   onSubmit: (value: InputSubmitContent) => void
 }
 
@@ -40,7 +39,6 @@ export const EmailInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx

@@ -9,7 +9,6 @@ type NumberInputProps = {
   block: NumberInputBlock
   defaultValue?: string
   onSubmit: (value: InputSubmitContent) => void
-  hasGuestAvatar: boolean
 }
 
 export const NumberInput = (props: NumberInputProps) => {
@@ -40,7 +39,6 @@ export const NumberInput = (props: NumberInputProps) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx

@@ -13,7 +13,6 @@ type PhoneInputProps = Pick<
 > & {
   defaultValue?: string
   onSubmit: (value: InputSubmitContent) => void
-  hasGuestAvatar: boolean
 }
 
 export const PhoneInput = (props: PhoneInputProps) => {
@@ -88,7 +87,6 @@ export const PhoneInput = (props: PhoneInputProps) => {
       class={'flex items-end justify-between rounded-lg pr-2 typebot-input'}
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '400px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -8,7 +8,6 @@ import { createSignal, onMount } from 'solid-js'
 type Props = {
   block: TextInputBlock
   defaultValue?: string
-  hasGuestAvatar: boolean
   onSubmit: (value: InputSubmitContent) => void
 }
 
@@ -41,7 +40,6 @@ export const TextInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': props.block.options.isLong ? undefined : '350px',
       }}
       onKeyDown={submitWhenEnter}

packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx

@@ -9,7 +9,6 @@ type Props = {
   block: UrlInputBlock
   defaultValue?: string
   onSubmit: (value: InputSubmitContent) => void
-  hasGuestAvatar: boolean
 }
 
 export const UrlInput = (props: Props) => {
@@ -46,7 +45,6 @@ export const UrlInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}