Skip to content

Fixed styling of buttons leaking to Debug Toolbar #2041

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed

Conversation

bmispelon
Copy link
Member

This isn't a 100% fix, but it takes care of the buttons at least. I guess we could go and spread some :not(#djDebug *) all over our CSS, but I'm not sure that's a really sustainable solution (plus it might have a performance cost that could add up).

Screenshots:

Before

Screenshot 2025-04-18 at 20-49-34 The web framework for perfectionists with deadlines Django

After

Screenshot 2025-04-18 at 20-48-57 The web framework for perfectionists with deadlines Django

@bmispelon bmispelon linked an issue Apr 18, 2025 that may be closed by this pull request
@bmispelon bmispelon marked this pull request as ready for review April 18, 2025 19:13
@matthiask
Copy link
Contributor

We have something like a CSS reset in the toolbar repository near the top of toolbar.css. It doesn't reset height though, changing this might also help and would probably be a better fix for other projects too. I think this should really be fixed in the toolbar and not in individual projects using the toolbar.

@adamzap
Copy link
Member

adamzap commented Apr 19, 2025

I agree that this should probably be fixed upstream. For what it's worth, I don't think CSS related to a development dependency should leak into the production file.

@bmispelon
Copy link
Member Author

For what it's worth, I don't think CSS related to a development dependency should leak into the production file.

Hmm, that's an excellent point 🤔
As far as I know there's currently no way in our setup to have dev-only styles, right?

@adamzap
Copy link
Member

adamzap commented Apr 24, 2025

Not that I know of, but I can try to do some digging soon if you're interested in that approach.

matthiask added a commit to matthiask/django-debug-toolbar that referenced this pull request Apr 27, 2025
@matthiask
Copy link
Contributor

It would be great if someone found the time to test this alternative approach to fixing this!

django-commons/django-debug-toolbar#2130

@bmispelon
Copy link
Member Author

@matthiask 's PR fixes the issue without us having to introduce a dev-only CSS rule in our production file, so I'm going to close this PR in favor of that.

@bmispelon bmispelon closed this Apr 28, 2025
@adamzap
Copy link
Member

adamzap commented Apr 28, 2025

Great, thanks!

matthiask added a commit to django-commons/django-debug-toolbar that referenced this pull request Apr 29, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Django Debug Toolbar renders poorly
4 participants