From 884dd56ce3e5702aa6f9802bc647895a88934058 Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Thu, 1 Oct 2026 14:47:37 +0200 Subject: [PATCH 1/2] Show the form link floats away from the inputs it drives 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. --- spec/link_placement_spec.rb | 61 +++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 spec/link_placement_spec.rb diff --git a/spec/link_placement_spec.rb b/spec/link_placement_spec.rb new file mode 100644 index 0000000..4f6455d --- /dev/null +++ b/spec/link_placement_spec.rb @@ -0,0 +1,61 @@ +require 'spec_helper' + +describe 'where the "Set range" link sits', type: :feature, js: true do + + before { add_post_resource } + + # [left, top, width] of the label and of the link inside it. + def geometry_of(scope) + page.evaluate_script(<<~JS) + (function () { + var wrap = document.querySelector('#{scope}'); + var label = wrap.querySelector('label'); + var link = wrap.querySelector('a.btn_timerange'); + var box = function (e) { + var b = e.getBoundingClientRect(); + return { left: Math.round(b.left), top: Math.round(b.top), + width: Math.round(b.width), bottom: Math.round(b.bottom) }; + }; + return { label: box(label), link: box(link) }; + })(); + JS + end + + # Active Admin gives a form label a 240px column. Floating the link to the + # right of that column parks it far from the inputs it drives, with nothing + # between the two. The documented look -- and the one the README screenshots + # show -- is the link on its own line directly under the label text. + context 'in a form pair' do + before { visit '/admin/posts/new' } + + let(:geometry) { geometry_of('.datetime_preset_pair') } + + it 'starts at the same left edge as the label' do + expect(geometry['link']['left']).to be_within(2).of(geometry['label']['left']) + end + + it 'sits on its own line below the label text' do + expect(geometry['link']['top']).to be >= geometry['label']['top'] + end + + it 'is only as wide as its own text, so the underline does not span the column' do + expect(geometry['link']['width']).to be < geometry['label']['width'] + end + end + + # The sidebar is the other half of the same CSS rule. There the label and the + # link share a narrow panel, right alignment is what the README shows, and + # nothing here should change it. + context 'in the sidebar filter' do + before { visit '/admin/posts' } + + let(:geometry) { geometry_of('.filter_date_range') } + + it 'stays pinned to the right of the label' do + label_right = geometry['label']['left'] + geometry['label']['width'] + link_right = geometry['link']['left'] + geometry['link']['width'] + + expect(link_right).to be_within(10).of(label_right) + end + end +end From 533e424408d30c01fb8c18797674488cc49f5b22 Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Thu, 1 Oct 2026 14:48:44 +0200 Subject: [PATCH 2/2] Put the form link under its label instead of across the column 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. --- .../active_admin_date_range_preset.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/vendor/assets/stylesheets/active_admin_date_range_preset.scss b/vendor/assets/stylesheets/active_admin_date_range_preset.scss index 2fddffe..106f24f 100644 --- a/vendor/assets/stylesheets/active_admin_date_range_preset.scss +++ b/vendor/assets/stylesheets/active_admin_date_range_preset.scss @@ -9,6 +9,20 @@ form label.datetime_preset_filter_label .btn_timerange { } } +// A form pair gets Active Admin's full label column, which is wide enough +// that the float above parks the link at the far right of it, away from the +// inputs it drives. Put it on its own line under the label text instead. +// `display: table` keeps it shrink-to-fit, so the dashed underline stays +// under the words rather than stretching the whole column. +// +// The sidebar filter keeps the float: there the label and the link share a +// narrow panel and right alignment is what the plugin has always shown. +.datetime_preset_pair > label.datetime_preset_filter_label .btn_timerange { + float: none; + display: table; + margin: 2px 0 0 0; +} + .block_timerange { position: absolute; display: block;