lib/mv_web/components/core_components.ex

@@ -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">

lib/mv_web/live/member_live/index.html.heex

@@ -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}

test/mv_web/components/core_components_table_test.exs

@@ -151,4 +151,86 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
       assert html =~ "ring-primary"
     end
   end
+
+  describe "table scroll wrapper contract" do
+    test "sticky header table uses horizontal-only overflow wrapper" do
+      rows = [%{id: "1", name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: nil,
+        sticky_header: true,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ ~s(class="overflow-x-auto")
+      refute html =~ ~s(class="overflow-auto")
+    end
+
+    test "table wrapper does not enable vertical overflow by default" do
+      rows = [%{id: "1", name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: nil,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ ~s(class="overflow-x-auto")
+      refute html =~ ~s(class="overflow-auto")
+    end
+
+    test "table wrapper overflow class can be overridden by caller" do
+      rows = [%{id: "1", name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: nil,
+        wrapper_overflow_class: "overflow-visible",
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ ~s(class="overflow-visible")
+      refute html =~ ~s(class="overflow-x-auto")
+    end
+  end
 end

test/mv_web/live/global_settings_live_test.exs

@@ -3,6 +3,20 @@ defmodule MvWeb.GlobalSettingsLiveTest do
   import Phoenix.LiveViewTest
   alias Mv.Membership
 
+  defp clear_smtp_env do
+    [
+      "SMTP_HOST",
+      "SMTP_PORT",
+      "SMTP_SSL",
+      "SMTP_USERNAME",
+      "SMTP_PASSWORD",
+      "SMTP_PASSWORD_FILE",
+      "MAIL_FROM_EMAIL",
+      "MAIL_FROM_NAME"
+    ]
+    |> Enum.each(&System.delete_env/1)
+  end
+
   describe "Global Settings LiveView" do
     setup %{conn: conn} do
       user = create_test_user(%{email: "admin@example.com"})

test/mv_web/member_live/index_test.exs

@@ -78,6 +78,18 @@ defmodule MvWeb.MemberLive.IndexTest do
       assert html =~ "lg:top-0"
       assert html =~ "bg-base-100"
     end
+
+    test "members page does not nest a second overflow wrapper inside members-table-scroll", %{
+      conn: conn
+    } do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, ~p"/members")
+
+      assert html =~ ~s(id="members-keyboard")
+      assert html =~ ~s(class="overflow-visible")
+      refute html =~ ~s(id="members-keyboard" class="overflow-x-auto")
+      refute html =~ ~s(id="members-keyboard" class="overflow-auto")
+    end
   end
 
   describe "translations" do