Better modal scrolling

This commit is contained in:
Jonathon Leight committed 2026-07-07 21:39:35 -04:00
1 parent fc3c811335
commit 446b6bd864
5 files changed
+30 -21

No files matched your search

+9
View File
@@ -232,6 +232,11 @@ func TestRepeaterOrgLimitsPosts(t *testing.T) {
if !strings.Contains(frag, "Manage access") || !strings.Contains(frag, `name="cmd"`) || !strings.Contains(frag, `name="include"`) {
t.Fatalf("manage-access fragment missing expected content:\n%s", frag)
}
// Footer buttons live outside the form (referencing it via form=) so the modal
// body can scroll with header/footer pinned; guard that structure.
if !strings.Contains(frag, `form="org-access-form"`) {
t.Fatal("manage-access footer button should reference the form via form= (scrollable body)")
}
if strings.Contains(frag, "back-link") {
t.Fatal("limits fragment should be modal chrome, not a full page")
}
@@ -389,6 +394,10 @@ func TestCreateInviteWithCommands(t *testing.T) {
if !strings.Contains(frag, `name="description"`) || !strings.Contains(frag, `name="cmd"`) {
t.Fatalf("new-invite fragment missing expected fields:\n%s", frag)
}
// Footer button references the form via form= so the modal body scrolls.
if !strings.Contains(frag, `form="new-invite-form"`) {
t.Fatal("new-invite footer button should reference the form via form= (scrollable body)")
}
if strings.Contains(frag, "back-link") {
t.Fatal("new-invite fragment should be modal chrome, not a full page")
}
+1 -1
View File
@@ -113,7 +113,7 @@
<!-- Shared modals; the People "Create single-use link" button and each org's
"Manage access" button load their fragments here via htmx. -->
<div class="modal modal-blur fade" id="invite-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content" id="invite-modal-content"></div>
</div>
</div>
@@ -6,8 +6,8 @@
<h5 class="modal-title">Create single-use link</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="post" action="/repeaters/{{.Repeater.PublicID}}/share/link">
<div class="modal-body">
<div class="modal-body">
<form method="post" action="/repeaters/{{.Repeater.PublicID}}/share/link" id="new-invite-form">
<div class="mb-3">
<label class="form-label" for="share_description">Description <span class="text-secondary">(optional)</span></label>
<input type="text" class="form-control" id="share_description" name="description" placeholder="e.g. for Bob's modem" maxlength="100">
@@ -17,10 +17,10 @@
afterwards. Risky commands can take over or brick the node; grant them only with care.
</p>
{{template "command-grid" .}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Create link</button>
</div>
</form>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" form="new-invite-form" class="btn btn-primary">Create link</button>
</div>
{{end}}
+11 -11
View File
@@ -8,8 +8,8 @@
<h5 class="modal-title">Manage access — {{.Org.Name}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="post" action="/repeaters/{{.Repeater.PublicID}}/orgs/{{.Org.Slug}}/limits">
<div class="modal-body">
<div class="modal-body">
<form method="post" action="/repeaters/{{.Repeater.PublicID}}/orgs/{{.Org.Slug}}/limits" id="org-access-form">
<label class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" name="include" value="1" {{if not .Excluded}}checked{{end}}>
<span class="form-check-label"><strong>Shared with {{.Org.Name}}</strong></span>
@@ -38,13 +38,13 @@
admins; <span class="badge bg-azure-lt">Members</span> to everyone.
</p>
{{template "command-grid" .}}
</div>
<div class="modal-footer">
{{if .Restricted}}
<button type="submit" name="clear" value="1" class="btn btn-link link-secondary me-auto">Remove restriction (allow all)</button>
{{end}}
<button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</form>
</div>
<div class="modal-footer">
{{if .Restricted}}
<button type="submit" form="org-access-form" name="clear" value="1" class="btn btn-link link-secondary me-auto">Remove restriction (allow all)</button>
{{end}}
<button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" form="org-access-form" class="btn btn-primary">Save</button>
</div>
{{end}}
+1 -1
View File
@@ -29,7 +29,7 @@
their org-limits fragment into via htmx. */}}
{{define "limits-modal-shell"}}
<div class="modal modal-blur fade" id="limits-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content" id="limits-modal-content"></div>
</div>
</div>