Improve member view table behavior+style, fix config settings (#493)

## Description of the implemented changes
The changes were:
- [x] Bugfixing
- [x] New Feature
- [ ] Breaking Change
- [x] Refactoring

This PR standardizes interactive table behavior and improves settings robustness.
It makes the new hover/focus-visible row highlight the default for clickable tables, keeps sticky first-column behavior configurable (and optimized for member selection UX), and tightens SMTP source-of-truth handling so ENV-based and UI-based configuration do not conflict.

## What has been changed?
- Refactored `CoreComponents.table` to expose interaction state via `data-row-interactive` and moved default row hover/focus styling to CSS.
- Made the new row highlight behavior (`hover` + `:has(:focus-visible)`) the default for clickable zebra tables.
- Kept sticky-first-column as an explicit table option and preserved sticky-specific selection accent behavior.
- Updated member overview table usage to the sticky-first-column mode and refined scrolling behavior (table scrollbar within container, not page-coupled).
- Adjusted table-related tests to validate the new interaction contract (attribute/CSS-driven behavior instead of legacy ring classes).
- Improved SMTP config handling:
  - clearer ENV-vs-Settings behavior (ENV-only mode when host env is set),
  - read-only and warning behavior in global settings UI when required env keys are missing,
  - updated related config/tests/docs.
- Updated docs and changelog (`CHANGELOG.md`, `DESIGN_GUIDELINES.md`, `CODE_GUIDELINES.md`, SMTP concept docs).
- Updated gettext catalogs (`default.pot`, `en`, `de`) for new/changed UI strings.

## Definition of Done
### Code Quality
- [x] No new technical depths
- [x] Linting passed
- [x] Documentation is added were needed

### Accessibility
- [x] New elements are properly defined with html-tags
- [x] Colour contrast follows WCAG criteria
- [x] Aria labels are added when needed
- [x] Everything is accessible by keyboard
- [x] Tab-Order is comprehensible
- [x] All interactive elements have a visible focus

### Testing
- [x] Tests for new code are written
- [x] All tests pass
- [ ] axe-core dev tools show no critical or major issues

## Additional Notes
- Branch includes 4 commits:
  - `fix: make sure smtp can be set either via env or ui`
  - `fix: make horizontal scrollbars sticky to bottom`
  - `docs: update changelog`
  - `feat: make checkbox column in member view sticky`
- Full fast suite passed (`mix test --exclude slow --exclude ui`): 2017 tests, 0 failures (plus expected non-failing warning logs in test output).
- Reviewer focus areas:
  1. **Cross-table UX consistency** after moving row interaction styling to component/CSS contract.
  2. **Sticky table behavior** (selection accent stripe, zebra background, keyboard focus visibility).
  3. **SMTP precedence and UI constraints** in global settings when ENV mode is active.
  4. **Regression risk in tests** that previously asserted ring-based row classes.
- No breaking API changes expected; behavior change is primarily visual/interaction-level and intentional.

Reviewed-on: #493
Co-authored-by: Simon <s.thiessen@local-it.org>
Co-committed-by: Simon <s.thiessen@local-it.org>

test/mv/config_smtp_test.exs

@@ -2,7 +2,7 @@ defmodule Mv.ConfigSmtpTest do
   @moduledoc """
   Unit tests for Mv.Config SMTP-related helpers.
 
-  ENV overrides Settings (same pattern as OIDC/Vereinfacht). Uses real ENV and
+  SMTP uses ENV-only mode when SMTP_HOST is set. Uses real ENV and
   Settings; no mocking so we test the actual precedence. async: false because
   we mutate ENV.
   """
@@ -23,7 +23,8 @@ defmodule Mv.ConfigSmtpTest do
   end
 
   describe "smtp_port/0" do
-    test "returns parsed integer when SMTP_PORT ENV is set" do
+    test "returns parsed integer when SMTP_PORT ENV is set in ENV-only mode" do
+      set_smtp_env("SMTP_HOST", "smtp.example.com")
       set_smtp_env("SMTP_PORT", "587")
       assert Mv.Config.smtp_port() == 587
     after
@@ -51,30 +52,40 @@ defmodule Mv.ConfigSmtpTest do
     end
   end
 
-  describe "smtp_env_configured?/0" do
-    test "returns true when any SMTP ENV variable is set" do
+  describe "smtp_env_mode?/0" do
+    test "returns true when SMTP_HOST is set" do
       set_smtp_env("SMTP_HOST", "smtp.example.com")
-      assert Mv.Config.smtp_env_configured?() == true
+      assert Mv.Config.smtp_env_mode?() == true
+    after
+      clear_smtp_env()
+    end
+
+    test "returns false when SMTP_HOST is not set even if other SMTP ENV variables are set" do
+      set_smtp_env("SMTP_USERNAME", "user@example.com")
+      set_smtp_env("SMTP_PASSWORD", "secret")
+      refute Mv.Config.smtp_env_mode?()
     after
       clear_smtp_env()
     end
 
     test "returns false when no SMTP ENV variables are set" do
       clear_smtp_env()
-      refute Mv.Config.smtp_env_configured?()
+      refute Mv.Config.smtp_env_mode?()
     end
   end
 
   describe "smtp_password/0 and SMTP_PASSWORD_FILE" do
-    test "returns value from SMTP_PASSWORD when set" do
+    test "returns value from SMTP_PASSWORD when set in ENV-only mode" do
+      set_smtp_env("SMTP_HOST", "smtp.example.com")
       set_smtp_env("SMTP_PASSWORD", "env-secret")
       assert Mv.Config.smtp_password() == "env-secret"
     after
       clear_smtp_env()
     end
 
-    test "returns content of file when SMTP_PASSWORD_FILE is set and SMTP_PASSWORD is not" do
+    test "returns content of file when SMTP_PASSWORD_FILE is set in ENV-only mode and SMTP_PASSWORD is not" do
       clear_smtp_env()
+      set_smtp_env("SMTP_HOST", "smtp.example.com")
       path = Path.join(System.tmp_dir!(), "mv_smtp_test_#{System.unique_integer([:positive])}")
       File.write!(path, "file-secret\n")
       Process.put(:smtp_password_file_path, path)
@@ -85,7 +96,8 @@ defmodule Mv.ConfigSmtpTest do
       if path = Process.get(:smtp_password_file_path), do: File.rm(path)
     end
 
-    test "SMTP_PASSWORD overrides SMTP_PASSWORD_FILE when both are set" do
+    test "SMTP_PASSWORD overrides SMTP_PASSWORD_FILE in ENV-only mode when both are set" do
+      set_smtp_env("SMTP_HOST", "smtp.example.com")
       path = Path.join(System.tmp_dir!(), "mv_smtp_test_#{System.unique_integer([:positive])}")
       File.write!(path, "file-secret")
       Process.put(:smtp_password_file_path, path)

test/mv_web/components/core_components_table_test.exs

@@ -9,7 +9,7 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
   alias MvWeb.CoreComponents
 
   describe "table row_click styling" do
-    test "when row_click is set, table rows have hover and focus-within ring classes" do
+    test "when row_click is set, rows are marked interactive and omit ring hover classes" do
       rows = [%{id: "1", name: "Alice"}, %{id: "2", name: "Bob"}]
 
       assigns = %{
@@ -31,12 +31,12 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
 
       html = render_component(&CoreComponents.table/1, assigns)
 
-      assert html =~ "hover:ring-2"
-      assert html =~ "focus-within:ring-2"
-      assert html =~ "hover:ring-base-content/10"
+      assert html =~ ~s(data-row-interactive="true")
+      refute html =~ "hover:ring-2"
+      refute html =~ "focus-within:ring-2"
     end
 
-    test "when row_click is nil, table rows do not have hover ring classes" do
+    test "when row_click is nil, rows are not marked interactive" do
       rows = [%{id: "1", name: "Alice"}]
 
       assigns = %{
@@ -58,8 +58,7 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
 
       html = render_component(&CoreComponents.table/1, assigns)
 
-      refute html =~ "hover:ring-2"
-      refute html =~ "focus-within:ring-2"
+      refute html =~ ~s(data-row-interactive="true")
     end
   end
 
@@ -151,4 +150,183 @@ 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
+
+  describe "sticky first column contract" do
+    test "when sticky_first_col is enabled, first header and body cells render sticky-left classes" do
+      rows = [%{id: "1", selected: true, name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: nil,
+        sticky_first_col: true,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Select",
+            inner_block: fn _socket, item -> [if(item[:selected], do: "x", else: "")] end
+          },
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ "sticky"
+      assert html =~ "left-0"
+      assert html =~ "z-20"
+      assert html =~ "z-30"
+    end
+
+    test "sticky first column marks wrapper and uses CSS row backgrounds instead of row ring classes" do
+      rows = [%{id: "1", name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: fn _ -> nil end,
+        sticky_first_col: true,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Select",
+            inner_block: fn _socket, _item -> ["x"] end
+          },
+          %{
+            __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(data-sticky-first-col-rows="true")
+      assert html =~ "sticky-first-col-cell"
+      refute html =~ "hover:ring-2"
+    end
+
+    test "sticky first column with selection sets data-selected without ring-primary" do
+      rows = [%{id: "one", name: "Alice"}, %{id: "two", name: "Bob"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: fn _ -> nil end,
+        sticky_first_col: true,
+        selected_row_id: "two",
+        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(data-selected="true")
+      refute html =~ "ring-primary"
+    end
+  end
 end

test/mv_web/live/global_settings_live_test.exs

@@ -1,8 +1,22 @@
 defmodule MvWeb.GlobalSettingsLiveTest do
-  use MvWeb.ConnCase, async: true
+  use MvWeb.ConnCase, async: false
   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"})
@@ -124,6 +138,85 @@ defmodule MvWeb.GlobalSettingsLiveTest do
       {:ok, _view, html} = live(conn, ~p"/settings")
       assert html =~ "SMTP" or html =~ "E-Mail" or html =~ "Settings"
     end
+
+    @tag :ui
+    test "disables all SMTP inputs when SMTP_HOST is set", %{conn: conn} do
+      clear_smtp_env()
+      System.put_env("SMTP_HOST", "smtp.env-only.example")
+      on_exit(fn -> clear_smtp_env() end)
+
+      {:ok, view, _html} = live(conn, ~p"/settings")
+
+      assert has_element?(view, "#setting_smtp_host[disabled]")
+      assert has_element?(view, "#setting_smtp_port[disabled]")
+      assert has_element?(view, "#setting_smtp_ssl[disabled]")
+      assert has_element?(view, "#setting_smtp_username[disabled]")
+      assert has_element?(view, "#setting_smtp_password[disabled]")
+      assert has_element?(view, "#setting_smtp_from_email[disabled]")
+      assert has_element?(view, "#setting_smtp_from_name[disabled]")
+    end
+
+    @tag :ui
+    test "does not render SMTP save action when SMTP_HOST is set", %{conn: conn} do
+      clear_smtp_env()
+      System.put_env("SMTP_HOST", "smtp.env-only.example")
+      on_exit(fn -> clear_smtp_env() end)
+
+      {:ok, view, _html} = live(conn, ~p"/settings")
+      refute has_element?(view, "#smtp-form button", "Save SMTP Settings")
+    end
+
+    @tag :ui
+    test "shows explicit ENV-only mode hint when SMTP_HOST is set", %{conn: conn} do
+      clear_smtp_env()
+      System.put_env("SMTP_HOST", "smtp.env-only.example")
+      on_exit(fn -> clear_smtp_env() end)
+
+      {:ok, _view, html} = live(conn, ~p"/settings")
+      assert html =~ "SMTP is fully managed via environment variables"
+    end
+
+    @tag :ui
+    test "shows warning block for missing required SMTP ENV values in ENV-only mode", %{
+      conn: conn
+    } do
+      clear_smtp_env()
+      System.put_env("SMTP_HOST", "smtp.env-only.example")
+      on_exit(fn -> clear_smtp_env() end)
+
+      {:ok, _view, html} = live(conn, ~p"/settings")
+      assert html =~ "SMTP environment configuration appears incomplete"
+      assert html =~ "SMTP_USERNAME"
+      assert html =~ "SMTP_PASSWORD/SMTP_PASSWORD_FILE"
+    end
+
+    @tag :ui
+    test "does not enter ENV-only mode when SMTP_HOST is not set", %{conn: conn} do
+      clear_smtp_env()
+      System.put_env("SMTP_USERNAME", "leftover@example.com")
+      on_exit(fn -> clear_smtp_env() end)
+
+      {:ok, view, html} = live(conn, ~p"/settings")
+
+      refute html =~ "SMTP is fully managed via environment variables"
+      refute html =~ "SMTP environment configuration appears incomplete"
+      refute has_element?(view, "#setting_smtp_host[disabled]")
+      refute has_element?(view, "#setting_smtp_username[disabled]")
+    end
+
+    @tag :ui
+    test "shows effective ENV SMTP host value in disabled field", %{conn: conn} do
+      clear_smtp_env()
+      System.put_env("SMTP_HOST", "smtp.env-active.example")
+      on_exit(fn -> clear_smtp_env() end)
+
+      {:ok, settings} = Membership.get_settings()
+      {:ok, _} = Membership.update_settings(settings, %{smtp_host: "smtp.db-legacy.example"})
+
+      {:ok, _view, html} = live(conn, ~p"/settings")
+      assert html =~ ~s(value="smtp.env-active.example")
+      refute html =~ ~s(value="smtp.db-legacy.example")
+    end
   end
 
   describe "Authentication section when OIDC-only is enabled" do

test/mv_web/member_live/index_test.exs

@@ -78,6 +78,37 @@ 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
+
+    test "members table keeps checkbox column sticky while horizontally scrolling", %{conn: conn} do
+      system_actor = SystemActor.get_system_actor()
+
+      {:ok, _member} =
+        Membership.create_member(
+          %{first_name: "Sticky", last_name: "Column", email: "sticky-column@example.com"},
+          actor: system_actor
+        )
+
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, ~p"/members")
+
+      # Contract: first column (select-all header + row checkbox cells) is sticky on the left
+      assert html =~ "left-0"
+      assert html =~ "sticky"
+      assert html =~ "z-30"
+      assert html =~ "z-20"
+    end
   end
 
   describe "translations" do
@@ -339,10 +370,12 @@ defmodule MvWeb.MemberLive.IndexTest do
     assert_redirect(view, ~p"/members/#{member}")
   end
 
-  describe "table row outline (hover and selected)" do
+  describe "table row highlight (hover and selected)" do
     @describetag :ui
 
-    test "clickable rows have hover and focus-within ring classes", %{conn: conn} do
+    test "clickable rows with sticky first column use hover/focus background highlight", %{
+      conn: conn
+    } do
       system_actor = SystemActor.get_system_actor()
 
       {:ok, _member} =
@@ -354,10 +387,9 @@ defmodule MvWeb.MemberLive.IndexTest do
       conn = conn_with_oidc_user(conn)
       {:ok, _view, html} = live(conn, "/members")
 
-      # CoreComponents table adds hover and focus-within ring when row_click is set
-      assert html =~ "hover:ring-2"
-      assert html =~ "focus-within:ring-2"
-      assert html =~ "hover:ring-base-content/10"
+      # Sticky-first-column tables: hover/focus fills live in CSS; wrapper is marked for tests.
+      assert html =~ ~s(data-sticky-first-col-rows="true")
+      refute html =~ "hover:ring-2"
     end
 
     test "selected outline only from checkbox selection, not from highlight param", %{conn: conn} do