Skip to content

Put the form link under its label instead of across the column - #21

Merged
Fivell merged 2 commits into
masterfrom
fix/form-link-placement
Oct 1, 2026
Merged

Fivell merged 2 commits into
masterfrom
fix/form-link-placement

Conversation

@Fivell

@Fivell Fivell commented Oct 1, 2026

Copy link
Copy Markdown
Member

Spotted by comparing fresh screenshots of current master against the ones in the README.

What it looks like

The README shows the form's "Set range" on its own line, directly under the label text. On Active Admin 3 it renders at the far right of the label column instead — 179px from the label it belongs to, with nothing between it and the inputs it drives.

Measured on a live page before the fix:

label  left=40   width=240
link   left=219  width=53   float=right

Why

Not a regression in this gem. The rule is unchanged since 2017:

form label.datetime_preset_filter_label .btn_timerange { float: right; … }

git log on the stylesheet ends at 66973db (2017-08-16), and the line that inserts the link into the label last changed in 5a3742c (2022-05-24). Nothing in the recent run of fixes touched either.

What changed is the label width Active Admin hands it. A float is taken out of flow and placed at the right of the current line; if it does not fit, it drops to the next one. The older Active Admin's label column was narrow enough that the text and the link could not share a line, so the float wrapped underneath — the look the README captured. Active Admin 3's 240px column fits both, so it stays up and to the right.

The fix

.datetime_preset_pair > label.datetime_preset_filter_label .btn_timerange {
  float: none;
  display: table;
  margin: 2px 0 0 0;
}

display: table keeps it shrink-to-fit, so the dashed underline stays under the words rather than stretching the whole 240px column.

The sidebar filter deliberately keeps the float. There the label and link share a narrow panel, right alignment is correct, and it is what the first README screenshot shows. That is the other half of the same rule, so the spec pins it as well — a fix for one context must not move the other.

Specs

Four examples reading getBoundingClientRect() from the rendered page:

assertion before
form link left edge aligns with the label's fails — 219 vs 40
form link sits on its own line fails — top 210 vs 212
form link narrower than the label column passes — guards against the fix stretching it
filter link stays pinned right passes — guards the context that must not change

Two fail on the parent commit, two pass by design. 28 examples, 0 failures after.

Fivell added 2 commits October 1, 2026 14:47
The "Set range" link is floated right inside the label. Active Admin gives a
form label a 240px column, so the link lands at the far right of that column
with nothing between it and the fields it operates on -- 179px from the
label it belongs to. The README screenshots show it on its own line directly
under the label text, which is what the narrower label column of the Active
Admin of the time produced from the same float.

Three examples pin the form placement -- left edge aligned with the label,
own line, shrink-to-fit width -- and a fourth pins the sidebar filter, where
the same CSS rule applies and right alignment is correct and must not move.

The two form-placement examples fail here; the width guard and the sidebar
guard pass, which is the point of having them.

This commit is expected to fail CI.
Scope a rule to .datetime_preset_pair that drops the float and puts the link
on its own line under the label text, shrink-to-fit so the dashed underline
stays under the words.

The float itself is unchanged since 2017 and was right for the label widths
of the Active Admin of the time: too narrow for the text and the link to
share a line, so the float wrapped underneath, which is what the README
screenshots show. Active Admin 3 gives the label a 240px column, both fit,
and the link ends up at the far right of it.

The sidebar filter keeps the float -- its label and link share a narrow
panel, and right alignment there is both correct and what the first README
screenshot shows. The spec pins that too, so this cannot drift.
@Fivell
Fivell force-pushed the fix/form-link-placement branch from 533e424 to 884dd56 Compare October 1, 2026 12:49
@Fivell
Fivell merged commit 5519bc6 into master Oct 1, 2026
35 of 36 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant