MinIO Console: Mobile-responsive CSS via nginx sidecar injection

forgejo_admin commented

2026-05-06 00:10:08 +00:00

Contributor

Type

Feature

Lineage

Standalone -- discovered during SSO wiring session (2026-05-05). Phase 2.5: mobile access for SSO'd services.

Repo

ldraney/pal-e-platform

User Story

As a platform admin on mobile,
I want MinIO Console to be usable on my phone
So that I can browse buckets and manage storage without a laptop.

Context

MinIO Console's React app is compiled and embedded into the Go binary via go:embed. No loose static files exist in the container -- volume mounts cannot override CSS.

How the fix works: Since MinIO has no nginx to modify, we add an nginx sidecar container in the same pod. The browser talks to the sidecar instead of directly to MinIO Console. The sidecar proxies requests to localhost:9090 (Console port), intercepts the HTML response, and uses sub_filter to inject <link rel="stylesheet" href="/custom/mobile.css"> before </head>. Our CSS loads on top of MinIO's existing styles. Requires proxy_set_header Accept-Encoding "" because sub_filter can't search gzipped responses. CSP default already permits 'unsafe-inline' and 'self' origins, so self-hosted CSS loads without CSP modification.

Operator tenant CRD supports sideCars.containers, sideCars.volumes, initContainers, env. No theming API, no CSS env vars.

File Targets

Files the agent should modify or create:

terraform/modules/storage/main.tf -- add sidecar container config and ConfigMap to Operator tenant Helm values
terraform/modules/storage/variables.tf -- new variables if needed

Files the agent should NOT touch:

terraform/modules/harbor/main.tf -- Harbor is a separate ticket
terraform/modules/forgejo/main.tf -- Forgejo is a separate ticket

Acceptance Criteria

MinIO Console usable on 390px mobile viewport (bucket list, object browser, access keys)
Nginx sidecar deployed via Operator tenant CRD Helm values
CSS served from ConfigMap, injected via sub_filter
Ingress routes through sidecar, not directly to Console port
Mobile-first responsive CSS: base styles for phone, @media (min-width: 600px) for desktop
No regressions on desktop layout

Test Expectations

tofu validate passes
tofu plan -lock=false shows expected changes to MinIO tenant
Manual: verify Console UI on mobile browser after apply

Constraints

Must use sidecar approach via Operator CRD -- no kubectl patch
Follow existing Terraform module patterns in terraform/modules/storage/
proxy_set_header Accept-Encoding "" required for sub_filter to work
Mobile-first breakpoint at 600px per platform CSS philosophy

Checklist

PR opened
tofu validate passes
No unrelated changes

project-pal-e-platform -- platform project
#339 -- SSO: Wire MinIO OIDC (completed)
Plan Tier 4 (Phases 24-27) -- custom MinIO frontend (separate, larger scope)

### Type Feature ### Lineage Standalone -- discovered during SSO wiring session (2026-05-05). Phase 2.5: mobile access for SSO'd services. ### Repo `ldraney/pal-e-platform` ### User Story As a platform admin on mobile, I want MinIO Console to be usable on my phone So that I can browse buckets and manage storage without a laptop. ### Context MinIO Console's React app is compiled and embedded into the Go binary via `go:embed`. No loose static files exist in the container -- volume mounts cannot override CSS. **How the fix works:** Since MinIO has no nginx to modify, we add an nginx **sidecar container** in the same pod. The browser talks to the sidecar instead of directly to MinIO Console. The sidecar proxies requests to `localhost:9090` (Console port), intercepts the HTML response, and uses `sub_filter` to inject `<link rel="stylesheet" href="/custom/mobile.css">` before `</head>`. Our CSS loads on top of MinIO's existing styles. Requires `proxy_set_header Accept-Encoding ""` because sub_filter can't search gzipped responses. CSP default already permits `'unsafe-inline'` and `'self'` origins, so self-hosted CSS loads without CSP modification. Operator tenant CRD supports `sideCars.containers`, `sideCars.volumes`, `initContainers`, `env`. No theming API, no CSS env vars. ### File Targets Files the agent should modify or create: - `terraform/modules/storage/main.tf` -- add sidecar container config and ConfigMap to Operator tenant Helm values - `terraform/modules/storage/variables.tf` -- new variables if needed Files the agent should NOT touch: - `terraform/modules/harbor/main.tf` -- Harbor is a separate ticket - `terraform/modules/forgejo/main.tf` -- Forgejo is a separate ticket ### Acceptance Criteria - [ ] MinIO Console usable on 390px mobile viewport (bucket list, object browser, access keys) - [ ] Nginx sidecar deployed via Operator tenant CRD Helm values - [ ] CSS served from ConfigMap, injected via sub_filter - [ ] Ingress routes through sidecar, not directly to Console port - [ ] Mobile-first responsive CSS: base styles for phone, `@media (min-width: 600px)` for desktop - [ ] No regressions on desktop layout ### Test Expectations - [ ] `tofu validate` passes - [ ] `tofu plan -lock=false` shows expected changes to MinIO tenant - [ ] Manual: verify Console UI on mobile browser after apply ### Constraints - Must use sidecar approach via Operator CRD -- no kubectl patch - Follow existing Terraform module patterns in `terraform/modules/storage/` - `proxy_set_header Accept-Encoding ""` required for sub_filter to work - Mobile-first breakpoint at 600px per platform CSS philosophy ### Checklist - [ ] PR opened - [ ] `tofu validate` passes - [ ] No unrelated changes ### Related - `project-pal-e-platform` -- platform project - `#339` -- SSO: Wire MinIO OIDC (completed) - Plan Tier 4 (Phases 24-27) -- custom MinIO frontend (separate, larger scope)