Chore/bootstrap 5 - #4813

text-left/right -> text-start/end, float-left/right -> float-start/end,
ml-/mr-/pl-/pr- -> ms-/me-/ps-/pe-, border-left/right -> border-start/end,
dropdown-menu-left/right -> dropdown-menu-start/end, font-weight-* -> fw-*,
font-italic -> fst-italic and sr-only -> visually-hidden. Bootstrap 5 dropped
text-justify, so the site keeps a one-line rule for it.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

badge-info/success/... -> text-bg-info/success/..., which set the background
and a readable text colour together, and badge-pill -> rounded-pill. The site's
own badge-late, badge-harvest and similar hooks are unchanged.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

col-xs-N -> col-N, col-md-offset-N -> offset-md-N, row-fluid -> row,
btn-block -> w-100, btn-xs -> btn-sm, form-group -> mb-3 (Bootstrap 5 dropped
form-group), and btn-default (Bootstrap 3) -> btn-outline-secondary. The three
helpers that combined btn-default with btn-secondary keep just btn-secondary.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

.close with a times character -> .btn-close (which draws its own cross), with an
aria-label on each. The alert helper said alert-dismissable, Bootstrap 3's
spelling; Bootstrap 5 needs alert-dismissible for the close button's spacing.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

The label-beside-input forms (label col-md-2, input col-md-8) relied on
form-horizontal and form-group acting as a row. Each field wrapper is now a real
.row.mb-3, labels are col-form-label, help text is form-text, and the leftover
form-horizontal and form-actions classes, which do nothing in Bootstrap 5, are
dropped.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

…ents

form-inline -> flex utilities, embed-responsive -> ratio ratio-16x9,
input-group-prepend wrapper removed (Bootstrap 5 puts the addon directly in
the group), and media/media-body -> d-flex/flex-grow-1.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Bootstrap 5 differs from the old Material skin in a few defaults that change how
every page looks: 1rem body text (the site uses 0.875rem), a 1.5 line height
(1.428572), underlined links, and much larger display-* headings (the home page
heading was 56px, not 34px). Set them back through Bootstrap's variables.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

The brand image was unbounded (the old skin capped the brand at 2.25rem) and the
search input collapsed to nothing inside its shrink-to-fit parent. Restore the
navbar's minimum height and padding, cap the brand, and give the search group a
minimum width. A .btn with no colour variant is plain text in Bootstrap 5 and
read as a link; give it the btn-outline-secondary look.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

The planting, harvest and activity columns were .col-xl-4.col. Bootstrap 4 wrapped
the next row after three even columns at every width below the site's xl
breakpoint; Bootstrap 5's .col let the seeds column squeeze onto the same row.
Say what was meant: full width on phones, thirds from md up.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Co-Authored-By: Claude Sonnet 5 <[email protected]>

A .dropdown-divider and a dropdown-item Delete link sat in the page body, outside
any dropdown, duplicating the Delete in the Actions menu. With the menu open the
page has two visible Delete links, and the 'Delete garden' spec, which clicks
'Actions' and then 'Delete', finds both. The Actions menu already has the
garden's Delete.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Links are not underlined, so axe's link-in-text-block rule needs enough contrast
between a link and the text around it. The old skin's body text was near black
(rgba(0, 0, 0, 0.87)); the brown I had used gave 2.28:1 against the link green,
below the 3:1 minimum, and failed two accessibility specs.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Typing a scientific name makes the page ask GBIF for suggestions after
jQuery UI's 300ms delay. Whether that request lands before Save navigates away
is a race the test only usually won, and when it lost, VCR blocked the real
request and failed the spec. Answer the suggestion with a double instead.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Bootstrap 5's cards have a thin border, a grey header and a transparent body, so
the page background showed through. Set the card variables to white, no border,
a 2px radius and the old three-layer shadow, and keep the line under the header.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Bootstrap's dark navbar draws menu links at 55% white, which on the brown navbar
is 4.47:1, just under the 4.5:1 minimum. Use 85% white (white on hover). The
breadcrumb links were grey in the old skin and are now the link green, 4.12:1 on
the beige page; make them a darker grey again.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

_variables.scss still set $progress-height: 5em, $progress-bar-color and
$progress-bg: white, Bootstrap 3 variables the old skin ignored. Bootstrap 5
reads them, which made every progress bar 52px tall with an invisible white
track. Set the height to 0.875rem (as the old bar was), the track to a lighter
green and the bar to the site green, and drop the border-bottom trick that drew
the old bar.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

The chips were solid brown-grey pills with white text, so a row of crops read as a
row of dark blobs, and they competed with the blue status badges. Use Bootstrap
5.3's subtle success colours instead: a light green fill and border with dark
green text.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Bootstrap 5 makes the text of a .badge white; Bootstrap 4 left it alone. The like
button's heart and count sit in a bare badge on a pale button, so they were white
on light grey. Set $badge-color to inherit, as before.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

The card always rendered a .card-body and a .card-footer. A seed with no details
left them empty, and Bootstrap 5 pads them into white bars under the photo. Draw
each only when it has something in it.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Bootstrap 5 buttons are flat with a border. Draw them as the old skin did:
no border, a Material shadow that deepens while pressed, 2px corners,
medium weight and uppercase. Link buttons stay plain. A bare .btn is drawn
raised with dark text instead of borrowing the outline style.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Blue while growing, green while harvesting, amber when late, red when very
late, grey when finished. The track is now neutral grey so every colour
reads against it. Planting#progress_state decides, and the garden cards,
planting progress and timeline bars use it.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

In Bootstrap 5 the close button has an auto left margin, so before the
title it sat beside it instead of at the right edge.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

It was a solid green active list item holding a green link. Use the light
list item, as the other sign in bars are.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Bootstrap 5 picked black text for the old #2196f3 on text-bg-info badges
and btn-info buttons, where the site had white. #1976d2 gets white text at
4.6:1, which also passes.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

The border was too faint to see, and Bootstrap 5 floated the checkbox to the
left edge of centred forms, away from its label.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

list-group-item outside a .list-group has no background or border in
Bootstrap 5.3, as those come from variables set on .list-group. Wrap the
homepage lists and the planting page neighbours in one, white with a light
shadow.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Bootstrap 5's chevron is a border triangle, so width: 100% stretched it into
a bar. The grid for icon, label and chevron also applied to the sign in and
sign up buttons, squeezing their labels into the icon column.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

Three across in a half-width column left them narrow enough to wrap
mid-word.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

…otstrap-5