♿ (js) Use px instead of rem to look good on any website

2023-03-02 12:24:20 +01:00
parent b2ad91c11f
commit cce63dfea3
17 changed files with 67 additions and 29 deletions
--- a/packages/js/src/components/ConversationContainer/ChatChunk.tsx
+++ b/packages/js/src/components/ConversationContainer/ChatChunk.tsx
@ -61,7 +61,7 @@ export const ChatChunk = (props: Props) => {
            style={{
              'margin-right': props.theme.chat.guestAvatar?.isEnabled
                ? '50px'
-                : '0.5rem',
+                : '8px',
            }}
          >
            <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
--- a/packages/js/src/components/ConversationContainer/LoadingChunk.tsx
+++ b/packages/js/src/components/ConversationContainer/LoadingChunk.tsx
@ -21,7 +21,7 @@ export const LoadingChunk = (props: Props) => (
          style={{
            'margin-right': props.theme.chat.guestAvatar?.isEnabled
              ? '50px'
-              : '0.5rem',
+              : '8px',
          }}
        >
          <LoadingBubble />
--- a/packages/js/src/components/bubbles/LoadingBubble.tsx
+++ b/packages/js/src/components/bubbles/LoadingBubble.tsx
@ -7,8 +7,8 @@ export const LoadingBubble = () => (
        <div
          class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
          style={{
-            width: '4rem',
-            height: '2rem',
+            width: '64px',
+            height: '32px',
          }}
          data-testid="host-bubble"
        >