DESIGN_DUIDELINES.md

@@ -272,6 +272,11 @@ Notes:
 - **MUST:** Truncate long values consistently (same max widths for name/email-like fields).
 - **MUST:** Tooltip reveals full value when truncated.
 
+### 8.5 Loading/Lists/Tables: keep filters visible on desktop
+- On **desktop (lg: breakpoint)** only: list pages with large datasets (e.g. Members overview) keep the page header and filter/search bar visible while the user scrolls. Only the table body scrolls inside a constrained area (`lg:max-h-[calc(100vh-<offset>)] lg:overflow-auto`). This preserves context and avoids losing filters when scrolling.
+- On **mobile**, sticky headers are not used; the layout uses normal flow (header and table scroll with the page) to preserve vertical space.
+- When the table is inside such a scroll container, use the CoreComponents table’s `sticky_header={true}` so the table’s `<thead>` stays sticky within the scroll area on desktop (`lg:sticky lg:top-0`, opaque background `bg-base-100`, z-index). Sticky areas must not overlap content at 200% zoom; focus order must remain header → filters → table.
+
 ---
 
 ## 9) Flash / Toast messages (mandatory UX)

lib/mv_web/components/core_components.ex

@@ -715,6 +715,11 @@ defmodule MvWeb.CoreComponents do
   attr :sort_field, :any, default: nil, doc: "current sort field"
   attr :sort_order, :atom, default: nil, doc: "current sort order"
 
+  attr :sticky_header, :boolean,
+    default: false,
+    doc:
+      "when true, thead th get lg:sticky lg:top-0 bg-base-100 z-10 for use inside a scroll container on desktop"
+
   slot :col, required: true do
     attr :label, :string
     attr :class, :string
@@ -745,12 +750,12 @@ defmodule MvWeb.CoreComponents do
           <tr>
             <th
               :for={col <- @col}
-              class={Map.get(col, :class)}
+              class={table_th_class(col, @sticky_header)}
               aria-sort={table_th_aria_sort(col, @sort_field, @sort_order)}
             >
               {col[:label]}
             </th>
-            <th :for={dyn_col <- @dynamic_cols}>
+            <th :for={dyn_col <- @dynamic_cols} class={table_th_sticky_class(@sticky_header)}>
               <.live_component
                 module={MvWeb.Components.SortHeaderComponent}
                 id={:"sort_custom_field_#{dyn_col[:custom_field].id}"}
@@ -760,7 +765,7 @@ defmodule MvWeb.CoreComponents do
                 sort_order={@sort_order}
               />
             </th>
-            <th :if={@action != []}>
+            <th :if={@action != []} class={table_th_sticky_class(@sticky_header)}>
               <span class="sr-only">{gettext("Actions")}</span>
             </th>
           </tr>
@@ -891,6 +896,18 @@ defmodule MvWeb.CoreComponents do
     end
   end
 
+  # Combines column class with optional sticky header classes (desktop only; theme-friendly bg).
+  defp table_th_class(col, sticky_header) do
+    base = Map.get(col, :class)
+    sticky = if sticky_header, do: "lg:sticky lg:top-0 bg-base-100 z-10", else: nil
+    [base, sticky] |> Enum.filter(& &1) |> Enum.join(" ")
+  end
+
+  defp table_th_sticky_class(true),
+    do: "lg:sticky lg:top-0 bg-base-100 z-10"
+
+  defp table_th_sticky_class(_), do: nil
+
   @doc """
   Renders a data list.
 

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

@@ -90,9 +90,17 @@
     />
   </div>
 
+  <%!-- 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")}
@@ -388,4 +396,5 @@
         </div>
       </:action>
     </.table>
+  </div>
 </Layouts.app>

lib/mv_web/live/role_live/show.ex

@@ -174,7 +174,11 @@ defmodule MvWeb.RoleLive.Show do
             {gettext("Back")}
           </.button>
           <%= if can?(@current_user, :update, Mv.Authorization.Role) do %>
-            <.button variant="primary" navigate={~p"/admin/roles/#{@role}/edit"} data-testid=role-edit">
+            <.button
+              variant="primary"
+              navigate={~p"/admin/roles/#{@role}/edit"}
+              data-testid="role-show-edit-btn"
+            >
               {gettext("Edit role")}
             </.button>
           <% end %>

priv/gettext/de/LC_MESSAGES/default.po

@@ -3116,6 +3116,7 @@ msgid "Edit member"
 msgstr "Mitglied bearbeiten"
 
 #: lib/mv_web/live/role_live/index.html.heex
+#: lib/mv_web/live/role_live/show.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Edit role"
 msgstr "Rolle bearbeiten"
@@ -3125,16 +3126,6 @@ msgstr "Rolle bearbeiten"
 msgid "Edit user"
 msgstr "Benutzer*in bearbeiten"
 
-#: lib/mv_web/live/role_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Rolle bearbeiten"
-msgstr "Rolle bearbeiten"
-
-#: lib/mv_web/live/custom_field_live/index_component.ex
-#, elixir-autogen, elixir-format
-msgid "Click for custom field details"
-msgstr "Klicke für Datenfeld-Details"
-
 #: lib/mv_web/live/member_field_live/index_component.ex
 #, elixir-autogen, elixir-format
 msgid "Click for datafield details"
@@ -3160,11 +3151,26 @@ msgstr "Klicke für Rollen-Details"
 msgid "Click for user details"
 msgstr "Klicke für Benutzer*innen-Details"
 
+#: lib/mv_web/live/custom_field_live/index_component.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Click for dataield details"
+msgstr "Klicke für Datenfeld-Details"
+
+#: lib/mv_web/live/member_live/index.html.heex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Members table"
+msgstr "Mitglieder"
+
 #~ #: lib/mv_web/live/member_field_live/form_component.ex
 #~ #, elixir-autogen, elixir-format
 #~ msgid "Back to Settings"
 #~ msgstr "Zurück zu den Einstellungen"
 
+#~ #: lib/mv_web/live/custom_field_live/index_component.ex
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Click for custom field details"
+#~ msgstr "Klicke für Datenfeld-Details"
+
 #~ #: lib/mv_web/live/member_live/form.ex
 #~ #, elixir-autogen, elixir-format
 #~ msgid "Coming soon"
@@ -3175,6 +3181,11 @@ msgstr "Klicke für Benutzer*innen-Details"
 #~ msgid "Reset"
 #~ msgstr "Zurücksetzen"
 
+#~ #: lib/mv_web/live/role_live/show.ex
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Rolle bearbeiten"
+#~ msgstr "Rolle bearbeiten"
+
 #~ #: lib/mv_web/live/role_live/form.ex
 #~ #, elixir-autogen, elixir-format
 #~ msgid "Save Role"

priv/gettext/default.pot

@@ -3116,6 +3116,7 @@ msgid "Edit member"
 msgstr ""
 
 #: lib/mv_web/live/role_live/index.html.heex
+#: lib/mv_web/live/role_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "Edit role"
 msgstr ""
@@ -3125,16 +3126,6 @@ msgstr ""
 msgid "Edit user"
 msgstr ""
 
-#: lib/mv_web/live/role_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Rolle bearbeiten"
-msgstr ""
-
-#: lib/mv_web/live/custom_field_live/index_component.ex
-#, elixir-autogen, elixir-format
-msgid "Click for custom field details"
-msgstr ""
-
 #: lib/mv_web/live/member_field_live/index_component.ex
 #, elixir-autogen, elixir-format
 msgid "Click for datafield details"
@@ -3159,3 +3150,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Click for user details"
 msgstr ""
+
+#: lib/mv_web/live/custom_field_live/index_component.ex
+#, elixir-autogen, elixir-format
+msgid "Click for dataield details"
+msgstr ""
+
+#: lib/mv_web/live/member_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Members table"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -3116,6 +3116,7 @@ msgid "Edit member"
 msgstr ""
 
 #: lib/mv_web/live/role_live/index.html.heex
+#: lib/mv_web/live/role_live/show.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Edit role"
 msgstr ""
@@ -3125,16 +3126,6 @@ msgstr ""
 msgid "Edit user"
 msgstr ""
 
-#: lib/mv_web/live/role_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "Rolle bearbeiten"
-msgstr ""
-
-#: lib/mv_web/live/custom_field_live/index_component.ex
-#, elixir-autogen, elixir-format
-msgid "Click for custom field details"
-msgstr ""
-
 #: lib/mv_web/live/member_field_live/index_component.ex
 #, elixir-autogen, elixir-format
 msgid "Click for datafield details"
@@ -3160,11 +3151,26 @@ msgstr ""
 msgid "Click for user details"
 msgstr ""
 
+#: lib/mv_web/live/custom_field_live/index_component.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Click for dataield details"
+msgstr ""
+
+#: lib/mv_web/live/member_live/index.html.heex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Members table"
+msgstr ""
+
 #~ #: lib/mv_web/live/member_field_live/form_component.ex
 #~ #, elixir-autogen, elixir-format
 #~ msgid "Back to Settings"
 #~ msgstr ""
 
+#~ #: lib/mv_web/live/custom_field_live/index_component.ex
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Click for custom field details"
+#~ msgstr ""
+
 #~ #: lib/mv_web/live/member_live/form.ex
 #~ #, elixir-autogen, elixir-format
 #~ msgid "Coming soon"
@@ -3175,6 +3181,11 @@ msgstr ""
 #~ msgid "Reset"
 #~ msgstr ""
 
+#~ #: lib/mv_web/live/role_live/show.ex
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Rolle bearbeiten"
+#~ msgstr ""
+
 #~ #: lib/mv_web/live/role_live/form.ex
 #~ #, elixir-autogen, elixir-format, fuzzy
 #~ msgid "Save Role"

test/mv_web/member_live/index_test.exs

@@ -46,6 +46,35 @@ defmodule MvWeb.MemberLive.IndexTest do
     |> Ash.create!(actor: actor)
   end
 
+  describe "desktop layout: scroll container and sticky table header" do
+    @describetag :ui
+
+    test "header and filters are outside scroll container; table is in scroll container with lg:max-h and lg:overflow-auto",
+         %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, ~p"/members")
+
+      assert html =~ ~r/data-testid="members-table-scroll"/
+      # Scroll container has lg: overflow and max-height for desktop-only scroll
+      assert html =~ "lg:overflow-auto"
+      assert html =~ "lg:max-h-[calc(100vh-14rem)]"
+
+      # Header (page title) is present and not inside the scroll container (scroll container comes after filters)
+      assert html =~ "Members"
+      assert html =~ "id=\"members\""
+    end
+
+    test "table thead has sticky classes on desktop when sticky_header is set", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, ~p"/members")
+
+      # CoreComponents table with sticky_header adds lg:sticky lg:top-0 bg-base-100 z-10 to th
+      assert html =~ "lg:sticky"
+      assert html =~ "lg:top-0"
+      assert html =~ "bg-base-100"
+    end
+  end
+
   describe "translations" do
     @describetag :ui