Merge branch 'main' into feat/421_accessibility

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

@@ -9,7 +9,7 @@
         selected_count={@selected_count}
       />
       <.button
-        class="secondary"
+        variant="secondary"
         id="copy-emails-btn"
         phx-hook="CopyToClipboard"
         phx-click="copy_emails"
@@ -20,7 +20,7 @@
         {gettext("Copy email addresses")} ({@selected_count})
       </.button>
       <.button
-        class="secondary"
+        variant="secondary"
         id="open-email-btn"
         href={"mailto:?bcc=" <> @mailto_bcc}
         disabled={not @any_selected?}
@@ -54,13 +54,12 @@
       boolean_filters={@boolean_custom_field_filters}
       member_count={length(@members)}
     />
-    <button
+    <.button
       type="button"
+      variant="secondary"
+      class={["gap-2", @show_current_cycle && "btn-active"]}
       phx-click="toggle_cycle_view"
-      class={[
-        "btn gap-2",
-        @show_current_cycle && "btn-active"
-      ]}
+      data-testid="toggle-cycle-view"
       aria-label={
         if(@show_current_cycle,
           do: gettext("Current Cycle Payment Status"),
@@ -81,7 +80,7 @@
           else: gettext("Last Cycle Payment Status")
         )}
       </span>
-    </button>
+    </.button>
     <.live_component
       module={MvWeb.Components.FieldVisibilityDropdownComponent}
       id="field-visibility-dropdown"
@@ -91,40 +90,53 @@
     />
   </div>
 
-  <.table
-    id="members"
-    rows={@members}
-    row_id={fn member -> "row-#{member.id}" end}
-    row_click={fn member -> JS.navigate(~p"/members/#{member}") end}
-    dynamic_cols={@dynamic_cols}
-    sort_field={@sort_field}
-    sort_order={@sort_order}
+  <%!-- On desktop (lg:), only the table area scrolls; header and filters stay visible. On mobile, normal flow. --%>
+  <div
+    class="lg:max-h-[calc(100vh-14rem)] lg:overflow-auto min-h-0"
+    data-testid="members-table-scroll"
+    role="region"
+    aria-label={gettext("Members table")}
   >
-    
+    <.table
+      id="members"
+      rows={@members}
+      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}
+      row_tooltip={gettext("Click for member details")}
+      row_selected?={fn member -> MapSet.member?(@selected_members, member.id) end}
+      dynamic_cols={@dynamic_cols}
+      sort_field={@sort_field}
+      sort_order={@sort_order}
+    >
+
 <!-- <:col :let={member} label="Id">{member.id}</:col> -->
-    <:col
-      :let={member}
-      col_click={&MvWeb.MemberLive.Index.checkbox_column_click/1}
-      label={
-        ~H"""
+      <:col
+        :let={member}
+        col_click={&MvWeb.MemberLive.Index.checkbox_column_click/1}
+        label={
+          ~H"""
+          <.input
+            type="checkbox"
+            name="select_all"
+            phx-click="select_all"
+            checked={MapSet.equal?(@selected_members, @members |> Enum.map(& &1.id) |> MapSet.new())}
+            aria-label={gettext("Select all members")}
+            role="checkbox"
+          />
+          """
+        }
+      >
         <.input
           type="checkbox"
-          name="select_all"
-          phx-click="select_all"
-          checked={MapSet.equal?(@selected_members, @members |> Enum.map(& &1.id) |> MapSet.new())}
-          aria-label={gettext("Select all members")}
+          name={member.id}
+          checked={MapSet.member?(@selected_members, member.id)}
+          aria-label={gettext("Select member")}
           role="checkbox"
         />
         """
       }
     >
-      <.input
-        type="checkbox"
-        name={member.id}
-        checked={MapSet.member?(@selected_members, member.id)}
-        aria-label={gettext("Select member")}
-        role="checkbox"
-      />
     </:col>
     <:col
       :let={member}
@@ -400,26 +412,11 @@
     </:col>
     <:action :let={member}>
       <div class="sr-only">
-        <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
+        <.link navigate={~p"/members/#{member}"} data-testid="member-show-link">
+          {gettext("Show")}
+        </.link>
       </div>
-
-      <%= if can?(@current_user, :update, member) do %>
-        <.link navigate={~p"/members/#{member}/edit"} data-testid="member-edit">
-          {gettext("Edit")}
-        </.link>
-      <% end %>
-    </:action>
-
-    <:action :let={member}>
-      <%= if can?(@current_user, :destroy, member) do %>
-        <.link
-          phx-click={JS.push("delete", value: %{id: member.id}) |> hide("#row-#{member.id}")}
-          data-confirm={gettext("Are you sure?")}
-          data-testid="member-delete"
-        >
-          {gettext("Delete")}
-        </.link>
-      <% end %>
     </:action>
   </.table>
+  </div>
 </Layouts.app>