Hive
fix(server): contain wide docs tables
GitHub issue · Closed
Resolves no linked issue.
What changed
This contains wide documentation tables inside the article column instead of letting them overlap the right-side “On this page” navigation.
The table wrapping is now shared by static documentation pages and generated command reference pages. Tuist.Docs.HTML.wrap_tables/1 parses the rendered document fragment with Floki and uses Floki.traverse_and_update/2 to wrap every table node in the same shell emitted by the Noora table component: the noora-table root, NooraTable hook, scroll container, proxy scrollbar, and overlay scrollbar.
Why
The screenshot shows wide environment-variable tables escaping the documentation content column. That makes the page hard to read and covers the page navigation, especially on pages with long variable names and descriptions.
Root cause
Markdown tables were rendered with the outer noora-table wrapper but without the rest of the Noora table shell. The missing scroll container and scrollbar elements meant the table could expand beyond the content area instead of behaving like other Noora tables.
Approach
Markdown tables cannot call the Noora <.table> component directly because the component expects row data and column slots, while Markdown produces raw table markup. Instead, the renderer preserves the Markdown-generated table and wraps it in Noora’s table shell so it uses the same styling and client-side table hook as first-class Noora tables.
The first implementation used text matching around table fragments. This version lets Floki identify actual table nodes during traversal, which avoids table-specific regular expression matching and handles each table as part of the parsed tree.
The docs renderer can include Phoenix component tags such as <.localized_link> and Noora.Alert.alert. Floki normalizes those custom tag names when parsing, so the implementation temporarily protects component tag boundaries as placeholders, runs the Floki traversal over regular document nodes, and then restores the original component tags before the template is compiled.
Impact
Documentation pages with wide tables now keep the table inside the article layout and expose horizontal scrolling through Noora’s existing table behavior. Generated command reference pages receive the same behavior through the shared helper.
Validation
mix format --check-formatted lib/tuist/docs/html.ex test/tuist/docs/html_test.exs test/tuist/docs_test.exs test/tuist/docs/cli/renderer_test.exsMIX_ENV=test mix run --no-start -e 'Application.ensure_all_started(:mimic); Application.ensure_all_started(:cachex); case Cachex.start_link(:tuist, []) do {:ok, _pid} -> :ok; {:error, {:already_started, _pid}} -> :ok end; Cachex.put(:tuist, :cli_spec_data, %{pages: [], pages_by_slug: %{}, sidebar_items: []}); ExUnit.start(capture_log: true); Mimic.copy(Tuist.Docs.CLI); Code.require_file("test/tuist/docs/html_test.exs"); Code.require_file("test/tuist/docs_test.exs"); Code.require_file("test/tuist/docs/cli/renderer_test.exs"); result = ExUnit.run(); if result.failures > 0, do: System.halt(1)'ran 27 tests with 0 failures.git diff --checkmix test test/tuist/docs/html_test.exsstill fails before running assertions because the localtuist_testdatabase in this worktree is stale and the alias migration cannot find theuserstable. The no-start run above exercises the same assertions without touching the database.
No GitHub comments yet.