fix(admin): restore broken table styling after focused-modules refactor #12

Merged

jocke merged 1 commit from fix/admin-table-styling into master

2026-06-17 12:39:39 +00:00

hermes commented

2026-06-17 11:56:35 +00:00

Collaborator

Why

The admin page has looked visually broken for several weeks. The root cause is the c7eeaf6 refactor that split the monolithic AdminPage.vue into focused sub-components (AdminStatsBar, AdminOrdersTable, AdminOrderDetailPanel, AdminOrderMessageModal) but left all their CSS in AdminPage.vue's <style scoped> block. Vue 3 scoped styles only apply to the parent's own template elements; they do not penetrate child components (especially the multi-root/fragment components created by the refactor). As a result, every table row, stat button, status select, expand icon, and detail panel lost its styling.

Approach

The minimal fix is to remove the scoped attribute from the <style> block in AdminPage.vue. All selectors are BEM-namespaced under .admin__*, so making them global is safe and does not leak styles to other parts of the app.

An alternative would be to move each component's styles into its own <style scoped> block, which is more idiomatic but touches 4–5 files and ~500 lines. This one-line change achieves the same visual result with minimal risk.

Changes

frontend/src/pages/AdminPage.vue — changed <style scoped> to <style>.

Compatibility / risk

Very low. The BEM namespace ensures the global styles only apply to admin elements. No JavaScript or backend logic is changed.

Test plan

Frontend lint passes (npm run lint)
Frontend unit tests pass (npm run test, 267/267)
Production build passes (npm run build)
E2E tests pass (docker compose -f docker-compose.e2e.yml up --build ..., 92/92)
Admin dashboard and admin fulfillment specs specifically exercised in E2E

Verification

Ran the full E2E suite in Docker against the branch. All 92 Playwright tests passed, including the admin dashboard and fulfillment flows that render the table, status dropdowns, expand/collapse panels, and tracking UI.

## Why The admin page has looked visually broken for several weeks. The root cause is the `c7eeaf6` refactor that split the monolithic `AdminPage.vue` into focused sub-components (`AdminStatsBar`, `AdminOrdersTable`, `AdminOrderDetailPanel`, `AdminOrderMessageModal`) but left all their CSS in `AdminPage.vue`'s `<style scoped>` block. Vue 3 scoped styles only apply to the parent's own template elements; they do not penetrate child components (especially the multi-root/fragment components created by the refactor). As a result, every table row, stat button, status select, expand icon, and detail panel lost its styling. ## Approach The minimal fix is to remove the `scoped` attribute from the `<style>` block in `AdminPage.vue`. All selectors are BEM-namespaced under `.admin__*`, so making them global is safe and does not leak styles to other parts of the app. An alternative would be to move each component's styles into its own `<style scoped>` block, which is more idiomatic but touches 4–5 files and ~500 lines. This one-line change achieves the same visual result with minimal risk. ## Changes - `frontend/src/pages/AdminPage.vue` — changed `<style scoped>` to `<style>`. ## Compatibility / risk Very low. The BEM namespace ensures the global styles only apply to admin elements. No JavaScript or backend logic is changed. ## Test plan - [x] Frontend lint passes (`npm run lint`) - [x] Frontend unit tests pass (`npm run test`, 267/267) - [x] Production build passes (`npm run build`) - [x] E2E tests pass (`docker compose -f docker-compose.e2e.yml up --build ...`, 92/92) - [x] Admin dashboard and admin fulfillment specs specifically exercised in E2E ## Verification Ran the full E2E suite in Docker against the branch. All 92 Playwright tests passed, including the admin dashboard and fulfillment flows that render the table, status dropdowns, expand/collapse panels, and tracking UI.

hermes added 1 commit 2026-06-17 11:56:36 +00:00

fix(admin): restore broken table styling after focused-modules refactor

CI / Lint, type check, unit tests, coverage (pull_request) Successful in 6m8s

Details

CI / E2E browser tests (pull_request) Successful in 5m53s

Details

4b35d8ff30

The c7eeaf6 refactor split the monolithic AdminPage into AdminStatsBar,
AdminOrdersTable, and AdminOrderDetailPanel. All CSS rules for the admin
sub-components were left in AdminPage.vue's `<style scoped>` block. Vue 3
scoped styles only apply to elements in the parent's own template — they
do not penetrate multi-root child components. Every element rendered by
the extracted sub-components lost its styling (stats grid, table layout,
column widths, status badges, expand icons, row highlighting, expanded
detail panels, etc.), making the admin page appear visually broken.

Changes:
- frontend/src/pages/AdminPage.vue: remove `scoped` attribute from the
  `<style>` block. All selectors are BEM-namespaced under `.admin__*`
  so making them global is safe and is the minimal fix.

Visual verification: N/A (sandbox cannot reach production). See git diff
for the one-character change.