Layout broken !
Hi Baptiste
Layout has been broken for a few days (weeks?) and I didn't touch anything to trigger this issue.
It's all horizontal... and weird
Some screenshots attached
62 Replies
Can you send the link to your bot by DM?
Let me try to reproduce
Ok indeed I can reproduce, it's a recent regression
I am pushing a fix now, it will fix it automatically on your end. v0.9.8
Thanks Baptiste ! Can I have a fourchette of when the push will be live ?
Should already be fixed, maybe your site is caching the embed URL
Ventureo Academy
Assistant IA - Ventureo Academy
Cached cleared everywhere
WPRocket + Redis Object Cache
I just added both use cases on this link so you can see it live
Works on my end, so it comes with your local cache
try in private navigation
Let me check on a diff computer
Also, thanks for your extremely fast support 🙂
Try with Network tab open + Disable cache checkbox
No worries it's a critical issue
I can confirm the bug is showing on a diff computer, on the same network, with Safari
Let me do that
Better
Fonts are weird tho
And still get a weird margin left and right for the middle one
This is when I activate the official Wordpress plugin, the fonts for the bubble are back to normal
Also, might be important : this is how I call a Typebot for my WP website
I use a Snippet
Alright, this is interesting
When I call the Typebot with your official WP plug-in, it seems to work.
When I disable it for a specific page, and call it with my snippet instead, it's back to this :
Also interesting : disabling ACSS fix the issue with the bubble chat
I'm kinda lost here 😅 Sorry for the extra work, I don't really know what to test/do now
What should we fix first?
Would it be possible that Typebot chatbot stylings is being overloaded by the website stylings ?
Disabling ACSS changes the chatbot styling, notice the border radius of the buton for example
I might go insane. Is this normal ? This is the same bot for both
To be fair I don't really know. It was working fine a few days/weeks ago, and I can't find one main reason it's not working now. I checked, ACSS wasn't updated for awhile, and Typebot + ACSS was working fine before, so I don't think the issue came from them. Any ideas on your side ?
The font could be another issue, let's focus on the window size issue: that is definitely something that is cached on your end because I can load it just fine on my end for your website
You see this exactly ?
I re-flushed all cache, and restarted Safari
We can go from this if this is also what you are seing
Yes
so the only issue now is the font size
But you're also missing the drop-shadow then ?
Oh right, there's a missing drop-shadow
(I'm french btw, if you want we can continue this discussion in french)
It's better to keep EN for record
Alright, let me see if I can fix the shadow
Pushing a fix for the shadow. The only thing that'll remain is font size?
I think so ! Let me know when it's live so I can flush the cache
It's live
Is it any different on your end ?
You have your cache still
I can't see the new version on your site
But as you can see: https://cdn.jsdelivr.net/npm/@typebot.io/js@0/dist/web.js
It is updated, yours is still on 9.8
You have something that caches it, I don't know what
Flushed one more time
Drop shadow is here now !
👍
Working on fixing font-size issue
Now let's tackle the font size ?
Oh, great !
the issue is that you have font-size: 65% applied to your
html tag
Do you know why you have that?Thanks for checking this ! Can I ask how you found this ?
Nope, this seems pretty dumb imo
Inspecting the styles of the html tag
It's automatic css that applies that
Automatic.css
CSS Framework for WordPress - Automatic.css (ACSS)
Automatic.css (ACSS) is a CSS Utility Framework for WordPress that speeds up workflow, solves common problems, and makes sites easier to maintain.
If so, I wonder why I got this issue now, and it has been working for months before
Could it be that you changed something in Typebot recently ?
Something that let the website decides the styling, instead of Typebot ?
It's not a criticism, because if you did this, you might have good reasons. I'm just thinking about what could have trigger this issue
Found this in ACSS
Yes we upgraded Tailwind (which is how we apply styling to the embed widget) to the latest major version!
And there are some edge cases I did not think about
(Also, love your dedication in the investigation in order to help me 🥐🫶🏼)
Can this be turned up to 100%?
😂🥐
Sure ! Give me a sec
Done
Back to normal indeed...
OK without breaking anything else?
Let me know if you find anything else
Putting 100% broke a lot of stuff lol
But it was because I was building the website with the wrong global size, and found workaround to fix it
In short : this Typebot bug put the light on a major misconfiguration on my end !
Thanks dude 🙂
Fluid Text | Automatic CSS Documentation
Automatic.css’s typography system controls the font size of text across your site.
So it wasn't a misconfiguration on my end... it was the... default ?
I'm confused. I'm turning to you as you have more dev experience than I do : does this doc makes sense about the 62.5%. ?
I can confirm : it's also 62.5% on ALL my clients websites.
Stack Overflow
CSS 62.5% why do developers use it?
I know we all probably used before 62.5% as font body size, we used this for old IE versions to do correct scaling on zoom.
So, I understand why it is this value, and how it deals with "em". What ...
I would definitely recommend not doing that
And they say default is 100%, right?
Oh ok I can make sure typebot ignores the font-size from html
That would make it immune from such config
Will implement it ASAP and let you know
Great thanks!
Also, you wrote this awhile ago :
"I've refined my vision of what a good chatbot builder should be and it will come with a major UI/UX bump. This will be great guys, can't wait to unveil this 🔥"
I'm just (very) curious to know if you have an estimation of when this will come out 👀
I'm also available if you need some beta-testing 👀 👀
Should be fixed
Honestly, I don't have any estimation, but you will know when I'll look for beta testers 🙂