Feature/fix bs5 issues - #577
Conversation
took
commented
Mar 9, 2026
took
commented
| Q | A |
|---|---|
| Is bugfix? | yes |
| New feature? | no |
| Breaks BC? | no |
| Tests pass? | yes |
| Fixed issues | Fixes Bootstrap5 issues |
|
Why do we need to add widgets to the container? |
There was a problem hiding this comment.
Pull request overview
This PR addresses Bootstrap 5 compatibility issues by updating global widget pager configuration and adding Bootstrap 5-focused validation/error styling in both frontend and backend site CSS.
Changes:
- Added enhanced invalid/validation error CSS for Bootstrap 5 (including legacy
.has-errorsupport) in frontend and backend. - Configured Yii DI container defaults so
ListViewandGridViewpagers useyii\bootstrap5\LinkPager. - Added CSS for anchor offset scrolling (
scroll-margin-top) to account for fixed navbars.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| frontend/web/css/site.css | Adds Bootstrap 5 validation/legacy error styles and new navbar/anchor-offset CSS. |
| frontend/config/main.php | Sets DI container defaults for ListView/GridView to use Bootstrap 5 LinkPager. |
| backend/web/css/site.css | Adds Bootstrap 5 validation/legacy error styles and additional navbar/anchor-offset CSS. |
| backend/config/main.php | Sets DI container defaults for ListView/GridView to use Bootstrap 5 LinkPager. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /* align the logout "link" (button in form) of the navbar */ | ||
| .nav li > form > button.logout { | ||
| padding-top: 7px; | ||
| color: rgba(255, 255, 255, 0.5); | ||
| } | ||
|
|
||
| @media(max-width:767px) { | ||
| .nav li > form > button.logout { | ||
| display:block; | ||
| text-align: left; | ||
| width: 100%; | ||
| padding: 10px 0; | ||
| } | ||
| } |
There was a problem hiding this comment.
The new logout button styles target .nav li > form > button.logout, but the frontend layout renders the logout button as a direct child of a <form class="d-flex"> inside .navbar (no .nav li wrapper). As a result, this block won’t apply; consider removing it or updating the selector to match the actual navbar markup (e.g., .navbar form > button.logout).
| /* align the logout "link" (button in form) of the navbar */ | ||
| .nav li > form > button.logout { | ||
| padding-top: 7px; | ||
| color: rgba(255, 255, 255, 0.5); | ||
| } | ||
|
|
||
| @media(max-width:767px) { | ||
| .nav li > form > button.logout { | ||
| display:block; | ||
| text-align: left; | ||
| width: 100%; | ||
| padding: 10px 0; | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
This file now contains two separate logout button styling blocks (one earlier in the file and this newly added one). Duplicating the same rules increases the chance of future divergence; please keep a single source of truth (either remove this duplicate block or consolidate with the existing one).
| /* align the logout "link" (button in form) of the navbar */ | |
| .nav li > form > button.logout { | |
| padding-top: 7px; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| @media(max-width:767px) { | |
| .nav li > form > button.logout { | |
| display:block; | |
| text-align: left; | |
| width: 100%; | |
| padding: 10px 0; | |
| } | |
| } |
| .nav li > form > button.logout { | ||
| padding-top: 7px; | ||
| color: rgba(255, 255, 255, 0.5); | ||
| } | ||
|
|
||
| @media(max-width:767px) { | ||
| .nav li > form > button.logout { |
There was a problem hiding this comment.
The newly added logout styles still use .nav li > form > button.logout, but the backend layout outputs the logout button directly inside a .navbar form (no .nav li ancestor). This selector likely won’t match and the intended styling won’t be applied; update the selector to match the current layout structure (e.g., .navbar form > button.logout) when consolidating the rules.
| .nav li > form > button.logout { | |
| padding-top: 7px; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| @media(max-width:767px) { | |
| .nav li > form > button.logout { | |
| .nav li > form > button.logout, | |
| .navbar form > button.logout { | |
| padding-top: 7px; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| @media(max-width:767px) { | |
| .nav li > form > button.logout, | |
| .navbar form > button.logout { |
I've added default configs for both widgets so the pager is properly formatted using BS5. 
vs
Alternatively, the change could be made here: |
