statamic
Bard add set button overlaps content on small bard container
Bug description
The issue occurs when the width of the bard field/container is less than 32 rem. When smaller the bard field has reduced padding, see: https://github.com/statamic/cms/blob/566eb8ba117d15e471ba48a0424a7332cb9f359d/resources/css/components/fieldtypes/bard.css#L13-L14
This issue could be resolved by adjusting the offsets for smaller screen: https://github.com/statamic/cms/blob/566eb8ba117d15e471ba48a0424a7332cb9f359d/resources/css/components/fieldtypes/bard.css#L166
How to reproduce
Use a Bard field with the + icon set to always visible while the bard container is smaller than 32rem
Logs
Environment
Environment
Application Name: x
Laravel Version: 10.48.28
PHP Version: 8.2.29
Composer Version: 2.9.2
Environment: local
Debug Mode: ENABLED
URL: x
Maintenance Mode: OFF
Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED
Drivers
Broadcasting: log
Cache: file
Database: mysql
Logs: stack / daily, flare
Mail: smtp
Queue: sync
Session: file
Statamic
Addons: 6
Sites: 4 (Nederlands, Duits, Engels, Pools)
Stache Watcher: Disabled
Static Caching: Disabled
Version: 5.48.0 PRO
Statamic Addons
aerni/advanced-seo: 2.10.2
aerni/font-awesome: 3.0.2
heidkaemper/statamic-toolbar: 1.3.0
jacksleight/statamic-bard-texstyle: 3.4.1
statamic-rad-pack/runway: 8.1.2
statamic/collaboration: 1.0.0
Installation
Fresh statamic/statamic site via CLI
Additional details
No response
Can you share a screenshot so I can visualize what you're talking about?
@jackmcdade Sure.
Currently the icon overlaps with the first character, which makes selecting hard:
I have already made a PR that fixes this, which moves the button out of the way:
We should add inner padding on the content then so we can get that + to line up right on the line. It looks heckin' weird just sorta kinda overlapping it a little.
So this is what it currently looks like when the bard field is equal or wider than 32rem:
The overlapping only happens on the smaller bard field because it reduces the inner padding, which is fine with me since it allows for more text per line.
So to keep it a simple quick fix I suggested to just move the button a little.