Bug: [DebugBar] Rotation applied outside of toolbar

[sanchawebo]

PHP Version

8.1

CodeIgniter4 Version

4.4

CodeIgniter4 Installation Method

Composer (using codeigniter4/appstarter)

Which operating systems have you tested for this bug?

macOS

Which server did you use?

apache

Database

MySQL 5.7.39

What happened?

Since the new update (4.4) a rotation-css-rule is applied to my icons.

Steps to Reproduce

Place an element with the rotate-class anywhere on a page where the toolbar is active.

Expected Output

No rotation.

Anything else?

In vendor/codeigniter4/framework/system/Debug/Toolbar/Views/toolbar.css I found this rule:

/* ENDLESS ROTATE */
.rotate {
  animation: rotate 9s linear infinite;
}

This rule gets applied to my own elements which have the rotate-class, as it is not scoped.

[sanchawebo]

Workaround:

• Change rotate to .debug-bar-rotate (or anything else) in vendor/codeigniter4/framework/system/Debug/Toolbar/Views/toolbar.css
• Change/Rename all occurences of rotate to debug-bar-rotate in vendor/codeigniter4/framework/system/Debug/Toolbar/Views/toolbar.js
• (Optional) Change the name of the animation in toolbar.css to something different.

[kenjis]

Thank you for reporting.

The class="rotate" is too big. It should be, e.g., class="toolbar rotate".

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR4nN2US04CQRCGv/DaiBxEvYWuBRPDKSCIXsCdcg0ULqTI8xIGN7JwTCU/ScV5tTO64Us6maSq/7+nuqvgkLgHopTl+QAWwBToAg3+wMTzM7YBrihp4jkCToEB8OJyRkCFAB5yDDxVoAd8OpNMOkrcAeMAgz3nzsQ0EqkDayXZqXy5Qugrdy2tGNdKeNWv40xCqGpvJK0YEwXt8ooylMZzUnCh4EkJgzNpmFaMrYLNEgbH0thmGVhSUVrSeE8KLv+7RBMFb0oY3EnDeihGN+WZhmJ7ZlnPtKHB5RvtNwy0d5XWaGgqRmp7a/9QLjRevoDLvOSRM+nnlKumk++0xwZlLhVnEulOhnohTS37vnU1t5M/ho7rPR03/LKW1bxNQep6ETZb5mpGW2/Ak2KpF3oYfAPX9Xpc671kqwAAAABJRU5ErkJggg==" class="rotate">

[kenjis]

PR for fixing this issue is welcome!
https://github.com/codeigniter4/CodeIgniter4/blob/develop/contributing/pull_request.md