Files

Zachary D. Rowitsch 077426b4a0 Fix flex row container not expanding to contain auto-height children (F-001)

Line cross sizes were calculated before children layout using placeholder
estimates (20px), but never recalculated after items expanded. Added a
post-layout recalculation pass (Step 9b) that updates stretched_line_cross_sizes
from actual item dimensions before the container height is set in Step 10.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-10 22:13:00 -04:00

5.9 KiB

Raw Permalink Blame History

Investigation: MkDocs Wiki (twistdroach home wiki)

URL: http://wiki.home.twistdroach.com:8080 Last investigated: 2026-03-10

Summary

A MkDocs-generated documentation site using Bootstrap 5.3 for layout. The page has a top navbar, a left sidebar (table of contents), and main content with link lists organized by category. The overall structure is recognizable but a critical flex layout bug causes the footer to overlap main content, and several Bootstrap CSS custom properties fail to resolve.

Findings

F-001: Flex row container does not expand to contain children

Status: Fixed (2026-03-10)
Found: 2026-03-10
Category: Layout
Severity: High
Description: The .row flex container (node #236) has a computed height of only 20px, despite its children being much taller — the col-md-3 sidebar is 226px tall and the col-md-9 main content is 1373px tall. The flex container should expand to the height of its tallest child. This causes the parent .container div to also be undersized (400px instead of ~1373px), which cascades into the footer being mispositioned.
Evidence: Layout tree shows .row flex container: content: (40, 56, 720, 20) but its child col-md-9 div: content: (232, 56, 516, 1373.12). The flex container height (20) should be at least 1373.

F-002: Footer overlaps main content

Status: Fixed (2026-03-10)
Found: 2026-03-10
Category: Layout
Severity: High
Description: The <footer> element is positioned at y=486, which places it in the middle of the services link list. The <hr> renders at y=503 and "Documentation built with MkDocs." at y=523, overlapping with the "Video Game Collection" and nearby links. The footer should appear after all main content (~y=1429+).
Evidence: Footer layout: content: (0, 486, 800, 73). Meanwhile, content continues below: "SyncThing" at y=570, "Immich" at y=594, "osse4" at y=1393. Display list shows footer text at y=523 interleaved with link text.
Suggested fix: This is a direct consequence of F-001. Fixing the flex container height expansion will resolve footer placement.

F-003: Undefined Bootstrap CSS custom properties (false alarm — not a bug)

Status: Fixed (2026-03-10)
Found: 2026-03-10
Category: CSS Support
Severity: Low
Description: Investigation revealed these warnings are correct CSS behavior, not a bug. Three categories of warnings were analyzed: (1) --bs-body-text-align and --bs-nav-link-font-size are intentionally never defined in Bootstrap 5.3 — using var() with no fallback makes the declaration invalid at computed-value time, falling back to inherited/initial values (this is a deliberate Bootstrap pattern). (2) --bs-navbar-toggler-* and --bs-navbar-color are defined on .navbar and properly inherited by the top-navbar's .navbar-toggler button. The warnings come from a second .navbar-toggler button in the sidebar (line 148 of HTML, class="navbar-toggler collapsed") which is NOT a descendant of .navbar, so it correctly does not inherit those scoped variables. (3) The :root custom property mechanism, inheritance chain, and var() substitution all work correctly — confirmed by unit tests with full Bootstrap CSS.
Evidence: Debug tracing confirmed warnings originate from <button class="navbar-toggler collapsed"> in div.col-md-3 > div.bs-sidebar > div.navbar-header (outside .navbar scope). Unit tests with exact Bootstrap 5.3 CSS rules confirm .navbar-toggler inside .navbar correctly resolves all custom properties.
Note: The WARN-level log messages are noisy for what is expected CSS behavior. Consider downgrading var() undefined-without-fallback warnings to DEBUG level.

F-004: `position: fixed` not applied to navbar

Status: Open
Found: 2026-03-10
Category: CSS Support
Severity: Medium
Description: The navbar has Bootstrap's .fixed-top class which sets position: fixed; top: 0. The navbar appears to remain in normal document flow (positioned at y=8 in the flow) rather than being fixed to the viewport top and removed from flow. At 800px viewport width (below Bootstrap's lg breakpoint of 992px), the navbar is collapsed anyway, so the visual impact is moderate — content is pushed down by the in-flow navbar rather than overlapping it.
Evidence: Navbar div (node #46): content: (0, 8, 800, 20) with padding: 8 0 8 0. Sidebar content begins at y=56, right after the navbar, suggesting it's in normal flow rather than fixed-positioned.

F-005: Font Awesome web fonts return 404

Status: Open
Found: 2026-03-10
Category: Other
Severity: Low
Description: All FontAwesome TTF font files return HTTP 404 from the server. This is a server-side issue (missing font files), not a browser engine bug. The affected icons (search, arrow-left, arrow-right) are hidden inside the collapsed navbar at this viewport width, so there is no visible impact currently.
Evidence: font 'http://wiki.home.twistdroach.com:8080/webfonts/fa-brands-400.ttf' returned status 404 Not Found (repeated for fa-solid-900.ttf, fa-regular-400.ttf, fa-v4compatibility.ttf).

F-006: CSS `counters()` function not supported

Status: Open
Found: 2026-03-10
Category: CSS Support
Severity: Low
Description: The CSS parser fails to parse content: counters(section, ".") ". " used by Bootstrap's .list-group-numbered class. The counters() function is not implemented. This has no visible impact on this page since no numbered list groups are present.
Evidence: css parser: failed to parse value for 'content' [bootstrap.min.css byte 106513] near 'mbered>.list-group-item::before{content:counters(section, ".") ". ";counter-incr'

Stats

Status	High	Medium	Low	Total
Open	0	1	2	3
Fixed	2	0	1	3

5.9 KiB Raw Permalink Blame History