Fix Bootstrap 5 visual regressions and modal behavior - #46
Draft
SpiderQubit wants to merge 6 commits into
Draft
Conversation
SpiderQubit
added
dependencies
SpiderQubit
force-pushed
the
copilot/issue-45-bootstrap5-regressions
branch
from
April 30, 2026 23:04
a04b79c to
35afc9b
Compare
Collaborator
Author
|
This is tested, and does not work fine. Issues are with rendering and menu items. Also different look in different browsers. Edge did not work correctly and would guess chrome also has issues. |
Collaborator
Author
|
Also on release, we have to change bootstrap4 to django_bootstrap5 in the settings.py |
Owner
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe PR migrates the project from Bootstrap 4 to Bootstrap 5: swaps the Bootstrap dependency and installed app, updates template tags and HTML attributes (data-dismiss/data-toggle → data-bs-...), adjusts utilities and badge classes, updates JS wrappers for Bootstrap 5, and tweaks CSS and several input-group/modal markups. ChangesBootstrap 5 migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
rodatraden/static/rodatraden/rodatraden.css (1)
151-160: ⚡ Quick winAdd a keyboard-visible state for global links.
Line 157 styles
:hoveronly, while Line 154 removes underlines globally. Add:focus-visiblestyling so keyboard users still get a clear interaction cue.Proposed change
-a:not(.default):hover { +a:not(.default):hover, +a:not(.default):focus-visible { color: `#b30018`; - text-decoration: none; + text-decoration: underline; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@rodatraden/static/rodatraden/rodatraden.css` around lines 151 - 160, The global link rules use a:not(.default) and a:not(.default):hover but omit a keyboard-visible state; update styles so keyboard users get a clear cue by adding a:not(.default):focus-visible (or include :focus-visible alongside :hover) and mirror the hover visual (e.g., change color and restore a visible indicator such as an underline or an accessible outline) to the existing a:not(.default) / a:not(.default):hover declarations so focus-visible provides the same interaction cue.requirements.txt (1)
2-2: Pindjango-bootstrap5to version 26.2 for reproducible deploys.Line 2 is unpinned, so dependency resolution can drift between environments and unexpectedly change template/runtime behavior. Use
django-bootstrap5==26.2, the latest stable version compatible with Django 6.0.4.Proposed change
-django-bootstrap5 # CSS base +django-bootstrap5==26.2 # CSS base🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@requirements.txt` at line 2, Pin the django-bootstrap5 dependency to a fixed version to ensure reproducible installs: update the unpinned package entry "django-bootstrap5" in requirements to "django-bootstrap5==26.2" so dependency resolution is deterministic and consistent across environments; commit the updated requirements entry.rodatraden/templates/rodatraden/tables/course_edit.html (1)
3-3: Bind tooltip to the button instead of the inner icon.The tooltip initialization code in the codebase uses a generic selector that works on any element with
data-bs-toggle="tooltip", so moving the tooltip attribute from the<span>to the<button>is safe and compatible. Placing the tooltip on the interactive button improves keyboard/focus behavior, gives a larger trigger area, and maintains consistency with accessibility best practices. This pattern appears across 10+ template files and would benefit from a systematic refactor.Suggested change
<button type='button' class='delete-item btn btn-gone' - data-id="{% url 'course-delete' record.slug %}"> - <span class='fa fa-trash' data-bs-toggle='tooltip' title='radera'></span> + data-id="{% url 'course-delete' record.slug %}" + data-bs-toggle='tooltip' title='radera'> + <span class='fa fa-trash'></span> </button> <button type='button' class='update-item btn btn-gone' - data-id="{% url 'course-update' record.slug %}"> - <span class='fa fa-pen' data-bs-toggle='tooltip' title='Ändra'></span> + data-id="{% url 'course-update' record.slug %}" + data-bs-toggle='tooltip' title='Ändra'> + <span class='fa fa-pen'></span> </button>Also applies to: 7-7
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@rodatraden/templates/rodatraden/tables/course_edit.html` at line 3, The tooltip is currently applied to the inner icon element (<span class='fa fa-trash' data-bs-toggle='tooltip' title='radera'>) which harms keyboard/focus behavior; move the tooltip attributes to the interactive control by removing data-bs-toggle="tooltip" and title="radera" from the span.fa.fa-trash and adding them to the surrounding button element (the parent <button> that contains the span) so the tooltip is bound to the button instead of the inner icon; keep the same attribute values (data-bs-toggle and title) to remain compatible with the existing tooltip initializer.rodatraden/templates/rodatraden/course/course_form.html (1)
50-54: Wrap the category input +hpsuffix in an.input-groupcontainer.The
.input-group-textclass on line 53 is rendered without a required.input-groupparent. Bootstrap 5 specifies that.input-group-textmust be a direct child of.input-groupto function correctly; using it outside that container loses the integrated input group behavior and proper alignment.Suggested fix
<div class="form-group {% if forloop.last %}category-list-new d-none{% endif %} row px-3"> + <div class="input-group"> {{ category_field }} <span class="input-group-text">hp</span> + </div> <button type="button" class="btn btn-gone remove-category">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@rodatraden/templates/rodatraden/course/course_form.html` around lines 50 - 54, The category input and its "hp" suffix are not wrapped in an input group; update the template so that the rendered {{ category_field }} and the <span class="input-group-text">hp</span> are direct children of a container with class "input-group" (keeping the surrounding form-group row px-3 and the existing remove-category button intact) so Bootstrap's .input-group-text functions correctly; locate the block rendering category_field and move or wrap it and the span inside an element with class "input-group".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@rodatraden/static/rodatraden/rodatraden.js`:
- Around line 23-29: The $.fn.dropdown wrapper currently treats any
non-'show'/'hide' action (including undefined) as a toggle; update the function
(the $.fn.dropdown wrapper) so that calling it with no arguments only
initializes the Bootstrap instance via
window.bootstrap.Dropdown.getOrCreateInstance(this) and performs no action, and
perform toggle only when action === 'toggle' (preserve existing behavior for
action === 'show' and action === 'hide').
In `@rodatraden/templates/rodatraden/base.html`:
- Around line 83-87: The template includes a script tag for
js/bootstrap5.modal.forms.js which is missing from static and causes runtime
errors when templates call the .modalForm() plugin; add a defensive guard
immediately after the static script tag in the base template that checks for the
jQuery plugin (e.g., $.fn.modalForm) or the global (e.g.,
window.bootstrapModalForms) and defines a safe no-op implementation if absent so
existing calls to .modalForm() and any bootstrapModalForms globals won't throw;
also note to collect the package's static assets (collectstatic/install) for
proper deployment.
In `@rodatraden/templates/rodatraden/course/course_confirm_delete.html`:
- Line 6: Replace the hard-coded aria-label="Close" on the modal close button in
course_confirm_delete.html with a translatable value and ensure the template
loads the i18n tags; specifically, add {% load i18n %} if missing and change the
close button's aria-label to use {% trans "Close" %} (which will render "Stäng"
for Swedish) — apply the same change to the other modal templates that use
aria-label="Close".
---
Nitpick comments:
In `@requirements.txt`:
- Line 2: Pin the django-bootstrap5 dependency to a fixed version to ensure
reproducible installs: update the unpinned package entry "django-bootstrap5" in
requirements to "django-bootstrap5==26.2" so dependency resolution is
deterministic and consistent across environments; commit the updated
requirements entry.
In `@rodatraden/static/rodatraden/rodatraden.css`:
- Around line 151-160: The global link rules use a:not(.default) and
a:not(.default):hover but omit a keyboard-visible state; update styles so
keyboard users get a clear cue by adding a:not(.default):focus-visible (or
include :focus-visible alongside :hover) and mirror the hover visual (e.g.,
change color and restore a visible indicator such as an underline or an
accessible outline) to the existing a:not(.default) / a:not(.default):hover
declarations so focus-visible provides the same interaction cue.
In `@rodatraden/templates/rodatraden/course/course_form.html`:
- Around line 50-54: The category input and its "hp" suffix are not wrapped in
an input group; update the template so that the rendered {{ category_field }}
and the <span class="input-group-text">hp</span> are direct children of a
container with class "input-group" (keeping the surrounding form-group row px-3
and the existing remove-category button intact) so Bootstrap's .input-group-text
functions correctly; locate the block rendering category_field and move or wrap
it and the span inside an element with class "input-group".
In `@rodatraden/templates/rodatraden/tables/course_edit.html`:
- Line 3: The tooltip is currently applied to the inner icon element (<span
class='fa fa-trash' data-bs-toggle='tooltip' title='radera'>) which harms
keyboard/focus behavior; move the tooltip attributes to the interactive control
by removing data-bs-toggle="tooltip" and title="radera" from the
span.fa.fa-trash and adding them to the surrounding button element (the parent
<button> that contains the span) so the tooltip is bound to the button instead
of the inner icon; keep the same attribute values (data-bs-toggle and title) to
remain compatible with the existing tooltip initializer.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: bdebc9e3-f0a3-42a3-813c-b293062e5f65
📥 Commits
Reviewing files that changed from the base of the PR and between f29ed5b and b67c576ff0f522f989156cb4504a77021a625d2b.
📒 Files selected for processing (64)
requirements.txtrodatraden/static/rodatraden/block_detail.jsrodatraden/static/rodatraden/block_schedule/block_schedule_renderer.jsrodatraden/static/rodatraden/category_form.jsrodatraden/static/rodatraden/course/form_categories.jsrodatraden/static/rodatraden/rodatraden.cssrodatraden/static/rodatraden/rodatraden.jsrodatraden/templates/rodatraden/base.htmlrodatraden/templates/rodatraden/block/block_confirm_delete.htmlrodatraden/templates/rodatraden/block/block_create.htmlrodatraden/templates/rodatraden/block/block_detail.htmlrodatraden/templates/rodatraden/block/block_list.htmlrodatraden/templates/rodatraden/block/block_update.htmlrodatraden/templates/rodatraden/category/category_confirm_delete.htmlrodatraden/templates/rodatraden/category/category_create.htmlrodatraden/templates/rodatraden/category/category_detail.htmlrodatraden/templates/rodatraden/category/category_list.htmlrodatraden/templates/rodatraden/category/category_update.htmlrodatraden/templates/rodatraden/course/course_confirm_delete.htmlrodatraden/templates/rodatraden/course/course_detail.htmlrodatraden/templates/rodatraden/course/course_form.htmlrodatraden/templates/rodatraden/course/course_list.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_confirm_delete.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_create.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_detail.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_info.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_update.htmlrodatraden/templates/rodatraden/exam/exam_confirm_delete.htmlrodatraden/templates/rodatraden/exam/exam_create.htmlrodatraden/templates/rodatraden/exam/exam_detail.htmlrodatraden/templates/rodatraden/exam/exam_list.htmlrodatraden/templates/rodatraden/exam/exam_update.htmlrodatraden/templates/rodatraden/footer.htmlrodatraden/templates/rodatraden/navigation.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_base_form.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_confirm_delete.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_create.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_detail.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_list.htmlrodatraden/templates/rodatraden/profile/profile_confirm_delete.htmlrodatraden/templates/rodatraden/profile/profile_create.htmlrodatraden/templates/rodatraden/profile/profile_detail.htmlrodatraden/templates/rodatraden/profile/profile_list.htmlrodatraden/templates/rodatraden/profile/profile_update.htmlrodatraden/templates/rodatraden/report/report_confirm_delete.htmlrodatraden/templates/rodatraden/report/report_create.htmlrodatraden/templates/rodatraden/report/report_list.htmlrodatraden/templates/rodatraden/report/report_update.htmlrodatraden/templates/rodatraden/rt_modal/modal.htmlrodatraden/templates/rodatraden/segment/segment_confirm_delete.htmlrodatraden/templates/rodatraden/segment/segment_create.htmlrodatraden/templates/rodatraden/segment/segment_execute.htmlrodatraden/templates/rodatraden/segment/segment_update.htmlrodatraden/templates/rodatraden/tables/category_table.htmlrodatraden/templates/rodatraden/tables/category_table_occ.htmlrodatraden/templates/rodatraden/tables/course_edit.htmlrodatraden/templates/rodatraden/tables/courseoccasion_edit.htmlrodatraden/templates/rodatraden/tables/exam_edit.htmlrodatraden/templates/rodatraden/tables/level_table.htmlrodatraden/templates/rodatraden/tables/official_table.htmlrodatraden/templates/rodatraden/tables/privatecourse_edit.htmlrodatraden/templates/rodatraden/tables/report_edit.htmlrodatraden/templates/rodatraden/tables/report_fixed.htmltf/settings-template.py
Comment on lines
+83
to
+87
| <script src="https://code.jquery.com/jquery-3.7.1.min.js" | ||
| integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" | ||
| crossorigin="anonymous"></script> | ||
| <script src="{% static 'rodatraden/rodatraden.js' %}"></script> | ||
| <script src="{% static 'js/jquery.bootstrap.modal.forms.js' %}"></script> | ||
| <script src="{% static 'js/bootstrap5.modal.forms.js' %}"></script> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Locate modal forms plugin assets that actually exist.
fd -i 'modal.forms.js'
# 2) Find script includes that reference modal form assets.
rg -n 'bootstrap5\.modal\.forms\.js|jquery\.bootstrap\.modal\.forms\.js' rodatraden/templates
# 3) Find all modalForm call sites that depend on the plugin.
rg -nP '\.modalForm\s*\(' rodatraden/templates rodatraden/staticRepository: it-amanuens/rodatraden
Length of output: 1951
🏁 Script executed:
# Check if the static/js directory exists and what files are in it
fd -type f -name '*.js' rodatraden/static/
# Also check the full path structure
tree rodatraden/static/ -L 3 2>/dev/null || find rodatraden/static -type f | head -20Repository: it-amanuens/rodatraden
Length of output: 1100
🏁 Script executed:
# Read the exact lines from base.html around line 87
sed -n '80,95p' rodatraden/templates/rodatraden/base.html
# Search for any bootstrap modal related files anywhere
find . -iname '*modal*' -o -iname '*bootstrap*' 2>/dev/null | grep -v '.git' | head -20Repository: it-amanuens/rodatraden
Length of output: 1008
🏁 Script executed:
# Search for requirements or package files that might list this dependency
find . -name 'requirements*.txt' -o -name 'package.json' -o -name 'setup.py' -o -name 'pyproject.toml' 2>/dev/null | head -10
# Check if there's any reference to where bootstrap modal forms should come from
rg 'bootstrap.*modal|modal.*form' rodatraden/templates rodatraden/static --type html --type js -i | head -20Repository: it-amanuens/rodatraden
Length of output: 2211
🏁 Script executed:
# Check package.json for bootstrap modal forms
cat package.json
# Check requirements.txt
cat requirements.txt | grep -i bootstrap || cat requirements.txtRepository: it-amanuens/rodatraden
Length of output: 589
🌐 Web query:
django-bootstrap-modal-forms 3.0.5 bootstrap5.modal.forms.js static files location
💡 Result:
The static file bootstrap5.modal.forms.js for django-bootstrap-modal-forms version 3.0.5 is located in the package's static directory, specifically at bootstrap_modal_forms/static/js/bootstrap5.modal.forms.js (or bootstrap_modal_forms/static/bootstrap5.modal.forms.js). In Django templates, include it using the static template tag as: <script src="{% static 'js/bootstrap5.modal.forms.js' %}"></script> This matches the official documentation and examples in the GitHub repository and PyPI page for version 3.0.5 (released 2024-09-28), which explicitly show this path for Bootstrap 5 support. A minified version bootstrap5.modal.forms.min.js is also available at the same location. Django's staticfiles app will serve it from your project's collected static directory after running collectstatic, following standard Django static file conventions (app/static/app/...).
Citations:
- 1: https://github.com/trco/django-bootstrap-modal-forms
- 2: https://pypi.org/project/django-bootstrap-modal-forms/
- 3: https://github.com/trco/django-bootstrap-modal-forms/tree/master
- 4: https://github.com/trco/django-bootstrap-modal-forms/blob/master/README.rst
Asset path is correct, but file is missing from static directory—add defensive guard to prevent runtime breakage.
The path js/bootstrap5.modal.forms.js is correct per the django-bootstrap-modal-forms package (v3.0.5) documentation. However, this file is not present in the repository's static directory, indicating it has not been collected via Django's collectstatic command. The multiple .modalForm() calls throughout templates will fail at runtime if this file is unavailable. Add the defensive guard to gracefully handle its absence:
🛠 Suggested defensive guard
<script type="text/javascript">
$(function () {
+ if (typeof $.fn.modalForm !== 'function') {
+ console.warn('modalForm plugin is unavailable; skipping modal bindings.');
+ return;
+ }
+
/* Send the user report */
$(".send-report").each(function () {
$(this).modalForm({formURL: $(this).data('id')});
});Ensure static files are collected during deployment and development setup.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@rodatraden/templates/rodatraden/base.html` around lines 83 - 87, The template
includes a script tag for js/bootstrap5.modal.forms.js which is missing from
static and causes runtime errors when templates call the .modalForm() plugin;
add a defensive guard immediately after the static script tag in the base
template that checks for the jQuery plugin (e.g., $.fn.modalForm) or the global
(e.g., window.bootstrapModalForms) and defines a safe no-op implementation if
absent so existing calls to .modalForm() and any bootstrapModalForms globals
won't throw; also note to collect the package's static assets
(collectstatic/install) for proper deployment.
SpiderQubit
force-pushed
the
copilot/issue-45-bootstrap5-regressions
branch
from
May 5, 2026 20:13
b67c576 to
93b41b1
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@rodatraden/templates/rodatraden/block/block_detail.html`:
- Around line 103-108: The <input id="download"> element is invalidly closed and
has an invalid "for" attribute; remove the stray </input> closing tag and delete
the for="download" attribute from the input element (refer to the input with id
"download") so the submit button is a proper void <input> element.
In `@rodatraden/templates/rodatraden/course/course_form.html`:
- Line 8: Update the modal close button's aria-label on the <button
class="btn-close"> element to be localized instead of the hardcoded English
"Close": either replace aria-label="Close" with the Swedish string
aria-label="Stäng" or, preferably for i18n, use Django's translation tag
aria-label="{% trans 'Close' %}" (ensuring {% load i18n %} is present in the
template) so screen readers match the rest of the Swedish UI.
In `@rodatraden/templates/rodatraden/courseoccasion/courseoccasion_info.html`:
- Line 7: The close button in the modal uses an English aria-label; update the
button element with class "btn-close" (the modal close control) to use the
Swedish aria-label (e.g., aria-label="Stäng") so screen readers match the page
language—modify the button in the courseoccasion_info.html template by replacing
the current aria-label value "Close" with the Swedish equivalent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 31c3bd58-8ec6-48af-96b6-854f15e63e0c
📥 Commits
Reviewing files that changed from the base of the PR and between b67c576ff0f522f989156cb4504a77021a625d2b and 93b41b1.
📒 Files selected for processing (64)
requirements.txtrodatraden/static/rodatraden/block_detail.jsrodatraden/static/rodatraden/block_schedule/block_schedule_renderer.jsrodatraden/static/rodatraden/category_form.jsrodatraden/static/rodatraden/course/form_categories.jsrodatraden/static/rodatraden/rodatraden.cssrodatraden/static/rodatraden/rodatraden.jsrodatraden/templates/rodatraden/base.htmlrodatraden/templates/rodatraden/block/block_confirm_delete.htmlrodatraden/templates/rodatraden/block/block_create.htmlrodatraden/templates/rodatraden/block/block_detail.htmlrodatraden/templates/rodatraden/block/block_list.htmlrodatraden/templates/rodatraden/block/block_update.htmlrodatraden/templates/rodatraden/category/category_confirm_delete.htmlrodatraden/templates/rodatraden/category/category_create.htmlrodatraden/templates/rodatraden/category/category_detail.htmlrodatraden/templates/rodatraden/category/category_list.htmlrodatraden/templates/rodatraden/category/category_update.htmlrodatraden/templates/rodatraden/course/course_confirm_delete.htmlrodatraden/templates/rodatraden/course/course_detail.htmlrodatraden/templates/rodatraden/course/course_form.htmlrodatraden/templates/rodatraden/course/course_list.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_confirm_delete.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_create.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_detail.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_info.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_update.htmlrodatraden/templates/rodatraden/exam/exam_confirm_delete.htmlrodatraden/templates/rodatraden/exam/exam_create.htmlrodatraden/templates/rodatraden/exam/exam_detail.htmlrodatraden/templates/rodatraden/exam/exam_list.htmlrodatraden/templates/rodatraden/exam/exam_update.htmlrodatraden/templates/rodatraden/footer.htmlrodatraden/templates/rodatraden/navigation.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_base_form.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_confirm_delete.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_create.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_detail.htmlrodatraden/templates/rodatraden/privatecourse/privatecourse_list.htmlrodatraden/templates/rodatraden/profile/profile_confirm_delete.htmlrodatraden/templates/rodatraden/profile/profile_create.htmlrodatraden/templates/rodatraden/profile/profile_detail.htmlrodatraden/templates/rodatraden/profile/profile_list.htmlrodatraden/templates/rodatraden/profile/profile_update.htmlrodatraden/templates/rodatraden/report/report_confirm_delete.htmlrodatraden/templates/rodatraden/report/report_create.htmlrodatraden/templates/rodatraden/report/report_list.htmlrodatraden/templates/rodatraden/report/report_update.htmlrodatraden/templates/rodatraden/rt_modal/modal.htmlrodatraden/templates/rodatraden/segment/segment_confirm_delete.htmlrodatraden/templates/rodatraden/segment/segment_create.htmlrodatraden/templates/rodatraden/segment/segment_execute.htmlrodatraden/templates/rodatraden/segment/segment_update.htmlrodatraden/templates/rodatraden/tables/category_table.htmlrodatraden/templates/rodatraden/tables/category_table_occ.htmlrodatraden/templates/rodatraden/tables/course_edit.htmlrodatraden/templates/rodatraden/tables/courseoccasion_edit.htmlrodatraden/templates/rodatraden/tables/exam_edit.htmlrodatraden/templates/rodatraden/tables/level_table.htmlrodatraden/templates/rodatraden/tables/official_table.htmlrodatraden/templates/rodatraden/tables/privatecourse_edit.htmlrodatraden/templates/rodatraden/tables/report_edit.htmlrodatraden/templates/rodatraden/tables/report_fixed.htmltf/settings-template.py
✅ Files skipped from review due to trivial changes (48)
- rodatraden/templates/rodatraden/footer.html
- rodatraden/templates/rodatraden/report/report_list.html
- rodatraden/templates/rodatraden/tables/report_fixed.html
- rodatraden/templates/rodatraden/category/category_list.html
- rodatraden/templates/rodatraden/tables/level_table.html
- requirements.txt
- rodatraden/templates/rodatraden/tables/category_table_occ.html
- rodatraden/templates/rodatraden/privatecourse/privatecourse_detail.html
- rodatraden/templates/rodatraden/category/category_detail.html
- rodatraden/templates/rodatraden/exam/exam_list.html
- rodatraden/templates/rodatraden/tables/category_table.html
- rodatraden/templates/rodatraden/tables/official_table.html
- rodatraden/templates/rodatraden/course/course_confirm_delete.html
- rodatraden/templates/rodatraden/block/block_update.html
- rodatraden/templates/rodatraden/block/block_create.html
- rodatraden/templates/rodatraden/privatecourse/privatecourse_confirm_delete.html
- rodatraden/templates/rodatraden/segment/segment_update.html
- rodatraden/templates/rodatraden/category/category_create.html
- rodatraden/templates/rodatraden/courseoccasion/courseoccasion_update.html
- rodatraden/templates/rodatraden/profile/profile_confirm_delete.html
- rodatraden/templates/rodatraden/report/report_update.html
- rodatraden/templates/rodatraden/segment/segment_execute.html
- rodatraden/templates/rodatraden/segment/segment_create.html
- rodatraden/templates/rodatraden/course/course_detail.html
- rodatraden/templates/rodatraden/category/category_update.html
- rodatraden/templates/rodatraden/profile/profile_list.html
- rodatraden/templates/rodatraden/exam/exam_create.html
- rodatraden/templates/rodatraden/tables/courseoccasion_edit.html
- rodatraden/templates/rodatraden/tables/exam_edit.html
- rodatraden/templates/rodatraden/tables/privatecourse_edit.html
- rodatraden/templates/rodatraden/tables/report_edit.html
- rodatraden/templates/rodatraden/exam/exam_confirm_delete.html
- rodatraden/templates/rodatraden/profile/profile_create.html
- rodatraden/templates/rodatraden/courseoccasion/courseoccasion_confirm_delete.html
- rodatraden/templates/rodatraden/tables/course_edit.html
- rodatraden/templates/rodatraden/report/report_create.html
- rodatraden/templates/rodatraden/block/block_list.html
- rodatraden/static/rodatraden/course/form_categories.js
- rodatraden/templates/rodatraden/profile/profile_update.html
- rodatraden/templates/rodatraden/exam/exam_detail.html
- rodatraden/templates/rodatraden/category/category_confirm_delete.html
- rodatraden/static/rodatraden/block_detail.js
- rodatraden/templates/rodatraden/base.html
- tf/settings-template.py
- rodatraden/templates/rodatraden/rt_modal/modal.html
- rodatraden/templates/rodatraden/course/course_list.html
- rodatraden/templates/rodatraden/navigation.html
- rodatraden/static/rodatraden/block_schedule/block_schedule_renderer.js
🚧 Files skipped from review as they are similar to previous changes (11)
- rodatraden/templates/rodatraden/privatecourse/privatecourse_create.html
- rodatraden/templates/rodatraden/courseoccasion/courseoccasion_create.html
- rodatraden/templates/rodatraden/courseoccasion/courseoccasion_detail.html
- rodatraden/templates/rodatraden/block/block_confirm_delete.html
- rodatraden/templates/rodatraden/segment/segment_confirm_delete.html
- rodatraden/templates/rodatraden/profile/profile_detail.html
- rodatraden/templates/rodatraden/privatecourse/privatecourse_list.html
- rodatraden/templates/rodatraden/privatecourse/privatecourse_base_form.html
- rodatraden/static/rodatraden/rodatraden.js
- rodatraden/templates/rodatraden/exam/exam_update.html
- rodatraden/static/rodatraden/rodatraden.css
Comment on lines
+103
to
+108
| <input id="download" | ||
| class="btn btn-outline-secondary" | ||
| type="submit" | ||
| value="Ladda ner" | ||
| for="download"> | ||
| </input> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -path "*rodatraden/templates/rodatraden/block/block_detail.html" -type fRepository: it-amanuens/rodatraden
Length of output: 124
🏁 Script executed:
cat -n rodatraden/templates/rodatraden/block/block_detail.html | sed -n '95,115p'Repository: it-amanuens/rodatraden
Length of output: 966
🌐 Web query:
HTML5 input void element closing tag specification
💡 Result:
In HTML (HTML5 / HTML Living Standard), is a void element, so it must not have an end (closing) tag; void elements “only have a start tag; end tags must not be specified for void elements.”[1] Therefore, markup like <input...> is invalid HTML, and the correct form is just the start tag, e.g. (or without the trailing slash: ).[1][2] Also note: HTML self-closing syntax with a trailing slash is not “real” self-closing in HTML. The spec says that if a single trailing “/” appears in a start tag, it has no effect on void elements (it’s unnecessary); it’s primarily relevant for foreign elements.[1]
Citations:
- 1: https://html.spec.whatwg.org/multipage/syntax.html
- 2: https://github.com/mdn/content/blob/main/files/en-us/glossary/void_element/index.md
🌐 Web query:
HTML for attribute label element only valid locations
💡 Result:
The for attribute of the HTML <label> element is valid only on <label> elements themselves. It is used to explicitly associate the label with a form control by referencing the control's id [1][2][3]. The <label> element (which bears the for attribute) is permitted in any context where phrasing content is expected [4][3][5]. Phrasing content includes locations inside paragraphs (<p>), headings (<h1>-<h6>), <div>, <span>, <li>, form elements like <form> and <fieldset>, and many others, but not block-level contexts that only accept flow content excluding phrasing (e.g., directly in <body> without wrapping, though browsers often parse permissively) [6][7]. The attribute's value must be the ID of a labelable form control (like <input>, <textarea>, <select>) in the same document [1][4][5].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Label
- 2: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/for
- 3: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
- 4: http://www.w3.org/TR/html5-author/the-label-element.html
- 5: https://html.spec.whatwg.org/multipage/forms.html
- 6: http://www.w3.org/TR/html5/elements.html
- 7: https://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html
Remove invalid </input> closing tag and for attribute from the submit button.
The <input> element is void in HTML and must not have a closing tag. The for attribute is only valid on <label> elements, not on <input>. Both issues cause HTML validation errors.
Proposed fix
- <input id="download"
- class="btn btn-outline-secondary"
- type="submit"
- value="Ladda ner"
- for="download">
- </input>
+ <input id="download"
+ class="btn btn-outline-secondary"
+ type="submit"
+ value="Ladda ner">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <input id="download" | |
| class="btn btn-outline-secondary" | |
| type="submit" | |
| value="Ladda ner" | |
| for="download"> | |
| </input> | |
| <input id="download" | |
| class="btn btn-outline-secondary" | |
| type="submit" | |
| value="Ladda ner"> |
🧰 Tools
🪛 HTMLHint (1.9.2)
[error] 108-108: Tag must be paired, no start tag: [ ]
(tag-pair)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@rodatraden/templates/rodatraden/block/block_detail.html` around lines 103 -
108, The <input id="download"> element is invalidly closed and has an invalid
"for" attribute; remove the stray </input> closing tag and delete the
for="download" attribute from the input element (refer to the input with id
"download") so the submit button is a proper void <input> element.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
rodatraden/templates/rodatraden/course/course_form.html (1)
53-57:⚠️ Potential issue | 🟠 Major | ⚡ Quick winWrap input fields in
.input-groupcontainer (Line 53).The
.input-group-textaddon should be placed inside an.input-groupwrapper alongside the input it decorates. Bootstrap 5 requires this structure for proper styling and layout consistency across browsers.Proposed fix
- <div class="form-group {% if forloop.last %}category-list-new d-none{% endif %} - row px-3"> - {{ category_field }} - <span class="input-group-text">hp</span> + <div class="form-group {% if forloop.last %}category-list-new d-none{% endif %} + row px-3"> + <div class="input-group p-0"> + {{ category_field }} + <span class="input-group-text">hp</span> + </div> <button type="button" class="btn btn-gone remove-category"> <span class="fa fa-trash"></span> </button> </div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@rodatraden/templates/rodatraden/course/course_form.html` around lines 53 - 57, The span with class "input-group-text" and the related input/button need to be wrapped in a div with class "input-group" so Bootstrap applies correct styling; update the template to place the <span class="input-group-text">hp</span> together with its associated input and the <button class="btn btn-gone remove-category">...</button> inside a parent <div class="input-group"> (adjust surrounding closing tags so that input, span and button are all children of that .input-group container) so the input-group-text decorates the input correctly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@rodatraden/static/rodatraden/rodatraden.js`:
- Around line 30-32: The dropdown wrapper function ends with two closing tokens
(a solitary `}` followed by an extraneous `};`) which causes a parse error;
remove the redundant `};` so the function/object is closed only once (leave the
single `}` that properly closes the function) and verify the surrounding block
(the dropdown wrapper) still returns/exports correctly and passes the linter.
---
Outside diff comments:
In `@rodatraden/templates/rodatraden/course/course_form.html`:
- Around line 53-57: The span with class "input-group-text" and the related
input/button need to be wrapped in a div with class "input-group" so Bootstrap
applies correct styling; update the template to place the <span
class="input-group-text">hp</span> together with its associated input and the
<button class="btn btn-gone remove-category">...</button> inside a parent <div
class="input-group"> (adjust surrounding closing tags so that input, span and
button are all children of that .input-group container) so the input-group-text
decorates the input correctly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: b531da29-57c6-4e3a-932e-d896eb8c08a2
📒 Files selected for processing (4)
rodatraden/static/rodatraden/rodatraden.jsrodatraden/templates/rodatraden/course/course_confirm_delete.htmlrodatraden/templates/rodatraden/course/course_form.htmlrodatraden/templates/rodatraden/courseoccasion/courseoccasion_info.html
SpiderQubit
marked this pull request as draft
May 6, 2026 10:08
There was a problem hiding this comment.
♻️ Duplicate comments (1)
rodatraden/static/rodatraden/rodatraden.js (1)
22-40:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix nested duplicate dropdown wrapper causing JS parse failure.
Line 30 starts a second
if (!$.fn.dropdown...)before the first wrapper is closed, leaving blocks unbalanced and breaking script parsing (matching the parse error around Line 40). This prevents the whole file from executing.💡 Proposed fix
if (!$.fn.dropdown && window.bootstrap.Dropdown) { $.fn.dropdown = function (action) { return this.each(function () { const instance = window.bootstrap.Dropdown.getOrCreateInstance(this); if (action === 'show') instance.show(); else if (action === 'hide') instance.hide(); else if (action === 'toggle') instance.toggle(); }); - if (!$.fn.dropdown && window.bootstrap.Dropdown) { - $.fn.dropdown = function (action) { - return this.each(function () { - const instance = window.bootstrap.Dropdown.getOrCreateInstance(this); - if (action === 'show') instance.show(); - else if (action === 'hide') instance.hide(); - else if (action === 'toggle') instance.toggle(); - }); - }; - } + }; + } })(window);#!/bin/bash # Verify parse validity and duplicate dropdown wrapper definitions. python -m pip -q install esprima >/dev/null 2>&1 python - <<'PY' import pathlib, re, sys import esprima path = pathlib.Path("rodatraden/static/rodatraden/rodatraden.js") src = path.read_text(encoding="utf-8") try: esprima.parseScript(src, tolerant=False) print("PARSE_OK") except Exception as e: print("PARSE_ERROR:", e) sys.exit(1) count = len(re.findall(r'\$\.fn\.dropdown\s*=\s*function\s*\(action\)', src)) print("DROPDOWN_WRAPPER_DEFINITION_COUNT:", count) PY🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@rodatraden/static/rodatraden/rodatraden.js` around lines 22 - 40, The file contains a duplicated/nested bootstrap dropdown wrapper causing unbalanced braces and a parse error: remove the nested duplicate if-block for "$.fn.dropdown" (the second "if (!$.fn.dropdown && window.bootstrap.Dropdown) { ... }") so only one wrapper remains, ensure the original wrapper function (the $.fn.dropdown = function(action) { ... }) is properly closed with its "});" and "};" and that the surrounding IIFE end "})(window);" remains intact; verify braces and semicolons around the function and the if-statement so the script parses.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@rodatraden/static/rodatraden/rodatraden.js`:
- Around line 22-40: The file contains a duplicated/nested bootstrap dropdown
wrapper causing unbalanced braces and a parse error: remove the nested duplicate
if-block for "$.fn.dropdown" (the second "if (!$.fn.dropdown &&
window.bootstrap.Dropdown) { ... }") so only one wrapper remains, ensure the
original wrapper function (the $.fn.dropdown = function(action) { ... }) is
properly closed with its "});" and "};" and that the surrounding IIFE end
"})(window);" remains intact; verify braces and semicolons around the function
and the if-statement so the script parses.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 30799011-dc88-406f-b26b-ed975cf3fa40
📒 Files selected for processing (1)
rodatraden/static/rodatraden/rodatraden.js
…info.html Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
it-amanuens
force-pushed
the
copilot/issue-45-bootstrap5-regressions
branch
from
May 6, 2026 21:28
e312497 to
268c7b4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Validation
Closes #45
Summary by CodeRabbit
New Features
Bug Fixes
Style
Chores