fix: make horizontal scrollbars sticky to bottom

This commit is contained in:
Simon 2026-05-07 13:08:21 +02:00
parent 01acea6838
commit 3d6081e024
Signed by: simon
GPG key ID: 40E7A58C4AA1EDB2
5 changed files with 115 additions and 1 deletions

View file

@ -938,6 +938,11 @@ defmodule MvWeb.CoreComponents do
doc:
"when true, thead th get lg:sticky lg:top-0 bg-base-100 z-10 for use inside a scroll container on desktop"
attr :wrapper_overflow_class, :string,
default: "overflow-x-auto",
doc:
"overflow class for the table wrapper; set to overflow-visible when outer container owns scrolling"
slot :col, required: true do
attr :label, :string
attr :class, :string
@ -974,7 +979,7 @@ defmodule MvWeb.CoreComponents do
~H"""
<div
id={@row_click && "#{@id}-keyboard"}
class="overflow-auto"
class={@wrapper_overflow_class}
phx-hook={@row_click && "TableRowKeydown"}
>
<table class="table table-zebra">

View file

@ -105,6 +105,7 @@
<.table
id="members"
rows={@members}
wrapper_overflow_class="overflow-visible"
sticky_header={true}
row_id={fn member -> "row-#{member.id}" end}
row_click={fn member -> JS.push("select_row_and_navigate", value: %{id: member.id}) end}