Scroll area
A box that scrolls, with shadows where there is more to see and a thin themed scrollbar. No script: the shadows are scroll-bound backgrounds.
A long list, capped
max_height: caps it; label: makes it a named region a keyboard can reach and scroll.
- Applied
- Screened
- Phone screen
- Take-home
- Onsite
- Offer
- Accepted
- Started
- Probation
- Confirmed
- Promoted
- Alumni
<%= scroll_area max_height: "14rem", label: "Pipeline stages", class: "rounded-lg border border-neutral-200 dark:border-neutral-800" do %>
<ul class="m-0 list-none divide-y divide-neutral-200 p-0 text-sm dark:divide-neutral-800">
<% %w[Applied Screened Phone\ screen Take-home Onsite Offer Accepted Started Probation Confirmed Promoted Alumni].each do |stage| %>
<li class="px-4 py-2.5"><%= stage %></li>
<% end %>
</ul>
<% end %>Sideways
axis: :x for a board wider than its box.
Backlog
Ready
Doing
Review
Done
Shipped
Archived
<%= scroll_area axis: :x, label: "Board" do %>
<div class="flex gap-3 py-1">
<% %w[Backlog Ready Doing Review Done Shipped Archived].each do |column| %>
<div class="w-56 shrink-0 rounded-lg border border-neutral-200 bg-neutral-50 p-3 text-sm dark:border-neutral-800 dark:bg-neutral-900">
<div class="font-medium"><%= column %></div>
<div class="mt-2 h-16 rounded-md border border-dashed border-neutral-300 dark:border-neutral-700"></div>
</div>
<% end %>
</div>
<% end %>