I have a long list of records in a table (~1000 records) - if I scroll down about 4 times, then I can no longer return to the top of the list - it seems to stop about 20 records or so before the first record. I was able to fix the scrolling up problem with a lot of javascript, it breaks with socket updates or document uploads, so I have reverted to the phoenix default as suggested at: Bindings — Phoenix LiveView v1.2.5 , except that we are using a table with a sticky header - just the table body scrolls and not the header. If I reload the page I can get back to the top record.

Does anyone see what we are doing wrong? Here is our code and what we versions we are running.

We are using:

"phoenix": "1.8.0",
"phoenix_ecto": "4.6.5",
"phoenix_html": "4.2.1",
"phoenix_live_reload": "1.6.0", 
"phoenix_live_view": "1.1.3",

and

erlang 26.2.5.9
elixir 1.18.3-otp-26

Here is our index.heex

<div class="flex">
  <div class="m-auto text-center text-2xl font-semibold leading-8 text-zinc-800">
    {gettext("Listing Invoices")}
  </div>
  <form class="m-auto px-16 text-center flex-auto" phx-change="search">
    <input
      class="w-full rounded-lg border-zinc-400 text-zinc-900 placeholder-zinc-400 text-sm focus:ring-0"
      type="text"
      name="search"
      phx-debounce="100"
      placeholder={gettext("type to search invoices...")}
    />
  </form>
  <.link patch={~p"/invoices/new"}>
    <.button>{gettext("Upload")}</.button>
  </.link>
  <%= if @has_sftp_host do %>
    <.button phx-click="sftp_import" class="ml-2 bg-sky-600 hover:bg-sky-700 text-white">
      <.icon name="hero-arrow-down-tray" class="mr-1 h-5 w-5 inline-block align-middle" />
      {gettext("SFTP Import")}
    </.button>
  <% end %>
</div>
<.table id="invoices" rows={@streams.invoices}>
  <:col :let={{_id, invoice}} label={gettext("Created")}>
    {invoice.inserted_at |> DateTime.shift(hour: 1) |> Calendar.strftime("%d.%m.%Y %H:%M")}
  </:col>
  <:col :let={{_id, invoice}} label={gettext("Original filename")}>
    {invoice.original_filename}
  </:col>
  <:col :let={{_id, invoice}} label={gettext("Storage file")}>
    <.link :if={invoice.storage_filepath} navigate={~p"/invoices/#{invoice.storage_filepath}"}>
      {invoice.storage_filepath}
    </.link>
  </:col>
  <:col :let={{_id, invoice}} label={gettext("State")} class="min-w-48">
    <.tooltip>
      <span class={state_color_for(invoice)}>{invoice.state}</span>
      <.tooltip_content :if={invoice.error_reason} class="bg-primary text-white">
        <p>{invoice.stage} stage:</p>
        <p>{invoice.error_reason}</p>
      </.tooltip_content>
    </.tooltip>
  </:col>
  <:action :let={{_id, invoice}}>
    <.link class="events" phx-click={show_events_modal(invoice.id)}>
      <.icon
        name="hero-information-circle text-sky-500"
        class="h-5 w-5 hidden group-hover:inline-block"
      />
    </.link>
  </:action>

  <:action :let={{id, invoice}}>
    <.link
      :if={invoice.tenant.allow_invoice_deletion}
      class="delete"
      phx-click={JS.push("delete", value: %{id: invoice.id}) |> hide("##{id}")}
      data-confirm={gettext("Are you sure?")}
    >
      <.icon name="hero-trash text-red-600" class="h-5 w-5 hidden group-hover:inline-block" />
    </.link>
  </:action>
</.table>

<.modal :if={@live_action in [:new]} id="invoice-modal" show on_cancel={JS.patch(~p"/invoices")}>
  <.live_component
    module={AvkServiceWeb.InvoiceLive.FormComponent}
    id="file-upload"
    title={@page_title}
    action={@live_action}
    auth_context={@auth_context}
    patch={~p"/invoices"}
  />
</.modal>

<.modal id="invoice-events-modal">
  <.header>
    {@invoice_filename}
    <:subtitle>{gettext("Processing Pipeline Log")}</:subtitle>
  </.header>

  <div class="flex flex-row text-sm font-semibold mt-8">
    <div class="basis-1/4 pr-2">Timestamp</div>
    <div class="basis-3/4 pr-2">Message</div>
  </div>

  <div class="max-h-80 overflow-scroll mt-2">
    <div :for={event <- @invoice_events} class="flex flex-row text-sm">
      <div class="basis-1/4 pr-2">{event.timestamp}</div>
      <div class="basis-3/4 pr-2">
        <span class={state_color_for(event)}>{event.message}</span>
      </div>
    </div>
  </div>
</.modal>

Here is our index.ex

defmodule AvkServiceWeb.InvoiceLive.Index do
  use AvkServiceWeb, :live_view

  require Logger

  alias AvkService.Admin
  alias AvkService.Invoicing
  alias AvkService.Repo
  alias AvkService.Util.PubSubTopic

  @sftp_consumer Application.compile_env(
                   :avk_service,
                   [:boundaries, :sftp_consumer],
                   AvkService.Boundary.SftpConsumer
                 )
  @storage Application.compile_env(
             :avk_service,
             [:boundaries, :storage],
             AvkService.Boundary.Storage
           )

  @impl true
  def mount(_params, _session, socket) do
    tenant_id = socket.assigns.auth_context.tenant_id
    AvkServiceWeb.Endpoint.subscribe(PubSubTopic.invoices(tenant_id))
    sftp_host = Admin.get_sftp_host_from_tenant_id(tenant_id)
    has_sftp_host = sftp_host != nil

    {:ok,
     socket
     |> assign(:has_sftp_host, has_sftp_host)
     |> assign(:render_events, false)
     |> assign(:invoice_events, [])
     |> assign(:invoice_filename, "")
     |> assign(page: 1, per_page: 20, search_terms: "")
     |> paginate_invoices(1)}
  end

  defp paginate_invoices(socket, new_page, reset \\ false) when new_page >= 1 do
    %{per_page: per_page, page: cur_page, search_terms: search_terms} = socket.assigns

    invoices =
      Invoicing.list_invoices(
        tenant_id: socket.assigns.auth_context.tenant_id,
        offset: (new_page - 1) * per_page,
        limit: per_page,
        search: search_terms
      )

    {invoices, at, limit} =
      if new_page >= cur_page do
        {invoices, -1, per_page * 3 * -1}
      else
        {Enum.reverse(invoices), 0, per_page * 3}
      end

    socket =
      case invoices do
        [] ->
          socket
          |> assign(end_of_timeline?: at == -1)

        [_ | _] ->
          socket
          |> assign(end_of_timeline?: false)
          |> assign(:page, new_page)
      end

    socket |> stream(:invoices, invoices, at: at, limit: limit, reset: reset)
  end

  @impl true
  def handle_params(params, _url, socket) do
    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
  end

  defp apply_action(socket, :index, _params) do
    socket
    |> assign(:page_title, gettext("Listing Invoices"))
    |> assign(:invoice, nil)
  end

  defp apply_action(socket, :new, _params) do
    socket
    |> assign(:page_title, gettext("Upload Invoices"))
  end

  @impl true
  def handle_info(%{event: "created", payload: new_invoice}, socket) do
    {:noreply, stream_insert(socket, :invoices, new_invoice, at: 0)}
  end

  @impl true
  def handle_info(%{event: "failed", payload: new_invoice}, socket) do
    {:noreply, stream_insert(socket, :invoices, new_invoice, at: 0)}
  end

  @impl true
  def handle_info(%{event: "state_changed", payload: invoice}, socket) do
    {:noreply, stream_insert(socket, :invoices, invoice)}
  end

  def handle_event("next-page", _params, socket) do
    {:noreply, paginate_invoices(socket, socket.assigns.page + 1)}
  end

  def handle_event("prev-page", %{"_overran" => true} = _params, socket) do
    # When overran, reset to the first page and reset the stream/window
    {:noreply, paginate_invoices(socket, 1, true)}
  end

  def handle_event("prev-page", _params, socket) do
    if socket.assigns.page > 1 do
      {:noreply, paginate_invoices(socket, socket.assigns.page - 1)}
    else
      {:noreply, socket}
    end
  end

  def handle_event("search", %{"search" => search_terms}, socket) do
    {:noreply, paginate_invoices(socket |> assign(page: 1, search_terms: search_terms), 1, true)}
  end

  @impl true
  def handle_event("show_events", %{"id" => id}, socket) do
    invoice = Invoicing.get_invoice!(id) |> Repo.preload(:events)

    socket =
      socket
      |> assign(:render_events, true)
      |> assign(:invoice_filename, invoice.original_filename)
      |> assign(:invoice_events, invoice.events |> format_event_data())

    {:noreply, socket}
  end

  @impl true
  def handle_event("delete", %{"id" => id}, socket) do
    invoice = Invoicing.get_invoice!(id)

    with {:ok, :deleted} <- @storage.maybe_delete(invoice.storage_filepath),
         {:ok, _} <- Invoicing.delete_invoice(invoice) do
      {:noreply, stream_delete(socket, :invoices, invoice)}
    else
      _ -> {:noreply, socket |> put_flash(:error, gettext("Delete failed"))}
    end
  end

  @impl true
  def handle_event("sftp_import", _params, socket) do
    username = socket.assigns.auth_context.username
    tenant_id = socket.assigns.auth_context.tenant_id
    tenant = Admin.get_tenant!(tenant_id)
    Logger.info("SFTP Import: for tenant '#{tenant.name}' manually triggered by #{username}")
    fetch_results = @sftp_consumer.consume(tenant)

    case fetch_results do
      {:ok, files_results} when is_list(files_results) and length(files_results) > 0 ->
        success_message = summarized_results(files_results)
        {:noreply, put_flash(socket, :info, success_message)}

      {:ok, _} ->
        {:noreply, put_flash(socket, :info, gettext("No SFTP files to import."))}

      {:error, reason} ->
        {:noreply,
         put_flash(
           socket,
           :error,
           gettext("SFTP import failed: %{reason}", reason: inspect(reason))
         )}
    end
  end

  def state_color_for(invoice) do
    case invoice.state do
      "SUCCESS" -> "text-green-600 font-semibold"
      "WARNING" -> "text-yellow-600 font-semibold"
      "ERROR" -> "text-red-600 font-semibold"
      "REJECTED" -> "text-red-600 font-semibold"
      "OK" -> "text-green-600 font-semibold"
      _ -> "text-black"
    end
  end

  def show_events_modal(js \\ %JS{}, invoice_id) do
    dom_id = "invoice-events-modal"

    js
    |> JS.push("show_events", value: %{id: invoice_id})
    |> JS.show(to: "##{dom_id}")
    |> JS.show(
      to: "##{dom_id}-bg",
      transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
    )
    |> show("##{dom_id}-container")
    |> JS.add_class("overflow-hidden", to: "body")
    |> JS.focus_first(to: "##{dom_id}-content")
  end

  defp format_event_data(events) do
    events
    |> Enum.map(fn event ->
      %{
        timestamp:
          event.inserted_at |> DateTime.shift(hour: 1) |> Calendar.strftime("%d.%m.%Y %H:%M:%S"),
        message: event.message |> String.replace(",", ", "),
        state: event.state
      }
    end)
  end

  defp summarized_results(file_results) do
    # Count the different types of results
    total_files = length(file_results)

    # Count submitted files
    submitted_count =
      Enum.count(file_results, fn
        {:ok, {_filename, _process_action, _archive_action}} -> true
        _ -> false
      end)

    # Count ignored files (invalid mime type)
    ignored_count =
      Enum.count(file_results, fn
        {:ignore, {_filename, _process_action, _archive_action}} -> true
        _ -> false
      end)

    # All other errors are failures
    failed_count =
      Enum.count(file_results, fn
        {:error, {_filename, _process_action, _archive_action}} -> true
        _ -> false
      end)

    gettext(
      "SFTP Import Results: %{total} files imported, (%{submitted} submitted, %{ignored} ignored, %{failed} failed)",
      total: total_files,
      submitted: submitted_count,
      ignored: ignored_count,
      failed: failed_count
    )
  end
end

Here is our table core_component (in case it is out of date):

  @doc ~S"""
  Renders a table with generic styling.

  ## Examples

      <.table id="users" rows={@users}>
        <:col :let={user} label="id"><%= user.id %></:col>
        <:col :let={user} label="username"><%= user.username %></:col>
      </.table>
  """
  attr :id, :string, required: true
  attr :rows, :list, required: true
  attr :row_id, :any, default: nil, doc: "the function for generating the row id"
  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
  attr :page, :integer, default: 1, doc: "page to render"
  attr :end_of_timeline?, :boolean, default: false, doc: "are we at the end of the endless page?"

  attr :row_item, :any,
    default: &Function.identity/1,
    doc: "the function for mapping each row before calling the :col and :action slots"

  slot :col, required: true do
    attr :label, :string
    attr :class, :string
  end

  slot :action, doc: "the slot for showing user actions in the last table column"

  def table(assigns) do
    assigns =
      with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
        assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
      end

    ~H"""
    <%!-- We calc the height with a magic number since I couldn't make the flexbox auto sizing work --%>
    <div class="h-[calc(100vh_-_280px)] overflow-auto pr-4 mt-12">
      <table class="w-[40rem] sm:w-full">
        <thead class="text-left leading-6 text-zinc-600 bg-white">
          <tr>
            <th
              :for={col <- @col}
              class={"p-0 pb-4 pr-6 font-old #{col[:class]} sticky top-0 bg-white z-50"}
            >
              {col[:label]}
            </th>
            <th :if={@action != []} class="relative p-0 pb-4">
              <span class="sr-only">{gettext("Actions")}</span>
            </th>
          </tr>
        </thead>
        <tbody
          id={@id}
          phx-update="stream"
          phx-viewport-top={@page > 1 && "prev-page"}
          phx-viewport-bottom={@id == "invoices" && !@end_of_timeline? && "next-page"}
          phx-page-loading
          class={[
            if(@end_of_timeline?, do: "pb-10", else: "pb-[calc(200vh)]"),
            if(@page == 1, do: "pt-10", else: "pt-[calc(200vh)]")
          ]}
          class="relative divide-y divide-zinc-100 border-t border-zinc-200 leading-6 text-zinc-700"
        >
          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
            <td
              :for={col <- @col}
              phx-click={@row_click && @row_click.(row)}
              class={["relative p-0", @row_click && "hover:cursor-pointer"]}
            >
              <div class="block py-4 pr-6">
                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
                <span class={["relative"]}>
                  {render_slot(col, @row_item.(row))}
                </span>
              </div>
            </td>
            <td :if={@action != []} class="relative w-20 p-0">
              <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
                <span
                  :for={action <- @action}
                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
                >
                  {render_slot(action, @row_item.(row))}
                </span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    """
  end