docs(theme): 📝 Add RTL guide

baptisteArno · Mar 10, 2022 · 533fdb1 · 533fdb1 · vercel · Mar 10, 2022
1 parent 9123977
commit 533fdb1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/apps/docs/docs/guides/rtl.md b/apps/docs/docs/guides/rtl.md
@@ -0,0 +1,28 @@
+# Enable RTL
+
+- Head over to the "Theme" tab
+- Paste the following Custom CSS:
+
+```css
+body {
+  direction: rtl;
+}
+
+.typebot-avatar-container {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.typebot-guest-bubble {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.bubble1,
+.bubble2 {
+  margin-right: 0;
+  margin-left: 0.25rem;
+}
+```
+
+If there is any visual flaw, [contact me](mailto:support@typebot.freshdesk.com) so that I can adjust the CSS rules
diff --git a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
@@ -43,7 +43,7 @@ export const AvatarSideContainer = forwardRef(
 
     return (
       <div
-        className="flex w-6 xs:w-10 mr-2 mb-2 flex-shrink-0 items-center relative "
+        className="flex w-6 xs:w-10 mr-2 mb-2 flex-shrink-0 items-center relative typebot-avatar-container "
         ref={scrollingSideBlockRef}
       >
         <CSSTransition