bug: Sidebar menu invisible in Docker builds — Tailwind @source path broken

[dmcnaught]

Summary

The sidebar navigation menu (SidebarMenu from @penguintechinc/react-libs) is invisible in Docker-built images since the migration from inline sidebar code to the shared react-libs component (v3.1.0+). The @source directive in web/src/index.css resolves to a non-existent directory inside Docker, causing Tailwind v4 to silently skip scanning react-libs — any CSS utility class unique to react-libs is missing from the built stylesheet.

Root Cause

web/src/index.css line 2:

@source "../../node_modules/@penguintechinc/react-libs/dist";

In the monorepo dev environment (correct):

• web/src/index.css → ../../node_modules/ resolves to the project root node_modules/ where packages are hoisted. Works fine.

In the Docker build (broken):

• The Dockerfile copies web/ contents into /app/, so the CSS is at /app/src/index.css.
• ../../node_modules/ resolves to /node_modules/ — which does not exist.
• Packages are installed at /app/node_modules/, which would require ../node_modules/.
• Tailwind v4 silently skips the invalid @source path and never scans react-libs dist files.

Evidence

Inspecting the built CSS in a running elder-web container (v3.1.4, tag 3.1.4.1773251978-beta):

Class	Used in SidebarMenu	In Elder web src	In built CSS
left-0	Yes (fixed inset-y-0 left-0)	No	Missing
lg:block	Likely (responsive sidebar)	No	Missing
border-r	Yes (sidebar right border)	No	Missing
bg-slate-800	Yes (sidebar bg)	Yes (other pages)	Present
w-64	Yes (sidebar width)	Yes (lg:pl-64)	Present
fixed	Yes (sidebar position)	Yes (modals)	Present

Only 5 lg: responsive classes exist in the CSS — none for the sidebar (lg:block, lg:flex, lg:translate-x-0). The hidden class IS present, so if the SidebarMenu uses hidden lg:block, the sidebar is permanently display: none.

How to Reproduce

1. Build the web container via Docker (as CI does)
2. Inspect /app/dist/assets/index-*.css in the running container
3. Search for left-0 — 0 occurrences
4. The sidebar renders in the DOM but is invisible due to missing CSS classes

Suggested Fix

Option A — Fix the @source path for Docker (may break monorepo dev):

@source "../node_modules/@penguintechinc/react-libs/dist";

Option B — Use two @source directives to cover both contexts:

@source "../node_modules/@penguintechinc/react-libs/dist";
@source "../../node_modules/@penguintechinc/react-libs/dist";

Option C — Restructure the Dockerfile to maintain monorepo-like directory layout during build.

Affected Versions

• v3.1.0 through v3.1.4 (any version using the react-libs SidebarMenu)
• Pre-v3.1.0 versions are unaffected (sidebar was inline in Layout.tsx)

Related

• Commit 9e27289 — migrated Layout.tsx to shared SidebarMenu
• Commit 156d64b (v3.1.0) — first release with react-libs SidebarMenu
• Issue fix(ci): docker-build.yml passes wrong version build-arg names to Dockerfiles #74 — separate CI build arg mismatch for version display

[dmcnaught]

Confirmed still present in v3.1.5 (3.1.5.1774490516-beta). The @source path in web/src/index.css line 2 is unchanged — sidebar remains invisible in Docker-built images.