553 lines
28 KiB
Markdown
553 lines
28 KiB
Markdown
# Semi UI shell vNext — Design QA
|
||
|
||
- Source visual truth: `/Users/lingniu/.codex/attachments/e33960ff-ed87-40f8-9da6-8e6615a653c5/image-1.png`
|
||
- Desktop implementation: `/tmp/lingniu-ui-audit-20260720/14-after-desktop-pass2.png`
|
||
- Mobile implementation: `/tmp/lingniu-ui-audit-20260720/05-after-mobile-pass2.png`
|
||
- Mobile secondary navigation: `/tmp/lingniu-ui-audit-20260720/06-mobile-more.png`
|
||
- Mobile cross-page state: `/tmp/lingniu-ui-audit-20260720/07-mobile-statistics.png`
|
||
- 2K implementation: `/tmp/lingniu-ui-audit-20260720/15-after-2k.png`
|
||
- Full-view comparison: `/tmp/lingniu-ui-audit-20260720/16-reference-comparison-final.png`
|
||
- Focused navigation comparison: `/tmp/lingniu-ui-audit-20260720/17-sidebar-comparison.png`
|
||
- Viewports: 1440 × 900, 2560 × 1440, 390 × 844
|
||
- State: authenticated mock administrator; Monitor list mode with four vehicles
|
||
|
||
## Comparison scope
|
||
|
||
The supplied Semi image is a different product and data state, so it is not a
|
||
pixel-for-pixel content specification. The comparison treats its application
|
||
shell, navigation rhythm, whitespace, typography, surface treatment and
|
||
interaction hierarchy as the visual truth. The vehicle table keeps the width
|
||
required by the operational task instead of copying the reference's team rail.
|
||
|
||
## Findings and iteration history
|
||
|
||
### Pass 1
|
||
|
||
- **[P1] Layered navigation chrome made the shell feel heavy.**
|
||
- Evidence: the baseline used a soft square behind every icon, gradient
|
||
selection fills and several shadow layers; the reference uses quiet icons,
|
||
one selected row and neutral white space.
|
||
- Fix: removed icon plates and gradients, simplified hover/selected states,
|
||
aligned group labels and introduced one restrained active indicator.
|
||
- Post-fix evidence: focused navigation comparison.
|
||
- **[P1] Mobile hierarchy was too compressed.**
|
||
- Evidence: `/tmp/lingniu-ui-audit-20260720/02-before-mobile.png` used an
|
||
unbranded title bar, 9px navigation labels and truncated vehicle facts.
|
||
- Fix: added the supplied brand mark, rebuilt the bottom navigation rhythm,
|
||
increased the essential text scale and redistributed the four vehicle
|
||
metrics evenly without reducing the visible vehicle count.
|
||
- Post-fix evidence: mobile implementation and mobile cross-page state.
|
||
- **[P2] Page transitions rebuilt the content container.**
|
||
- Evidence: the shell keyed the entire content container by pathname.
|
||
- Fix: kept the content container stable and animated only the newly mounted
|
||
route surface; reduced-motion users receive no transition.
|
||
- Post-fix evidence: Monitor → Mileage route change retained the shell and
|
||
updated the title, active navigation and page content.
|
||
|
||
### Pass 2
|
||
|
||
- **[P2] Collapsed sidebar hid its reopen affordance.**
|
||
- Evidence: `/tmp/lingniu-ui-audit-20260720/08-desktop-collapsed.png` showed
|
||
an empty collapse footer because a legacy selector hid every nested span,
|
||
including Semi's icon wrapper.
|
||
- Fix: restored only the icon wrapper, rotated the chevron and preserved the
|
||
text-hidden compact state.
|
||
- Post-fix evidence:
|
||
`/tmp/lingniu-ui-audit-20260720/11-desktop-collapsed-final.png`; browser
|
||
state changed from `收起侧栏` to `展开侧栏` and back.
|
||
- **[P2] Desktop data type remained optically smaller than the reference.**
|
||
- Evidence: first full-view comparison showed the header, filter controls,
|
||
table headings and primary row values losing hierarchy at 1440px.
|
||
- Fix: increased the desktop shell header to 76px, raised navigation and
|
||
table type sizes, and increased control and row heights while retaining
|
||
the operational density.
|
||
- Post-fix evidence: final full-view comparison and 2K implementation.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- **Fonts and typography:** system/PingFang stack is appropriate for Chinese;
|
||
page titles, navigation, controls and primary values now form a clear scale.
|
||
Tabular figures are enabled for telemetry. No actionable P0–P2 issue remains.
|
||
- **Spacing and layout rhythm:** the shell uses a 220px desktop rail, 76px
|
||
desktop header, 56px mobile header and 64px safe-area-aware mobile
|
||
navigation. Cards use quieter 9–10px radii and one-pixel boundaries.
|
||
- **Colors and tokens:** white surfaces, `#f5f6f7` canvas, `#e6e8eb` borders
|
||
and Semi blue `#0064fa` now match the reference's foreground/background
|
||
balance. Operational green/red tones remain semantic.
|
||
- **Image quality and assets:** supplied brand SVG assets are used directly.
|
||
No placeholder illustration, custom SVG or CSS-drawn brand asset was added.
|
||
- **Icons:** all shell actions use the existing Semi icon family. Selected,
|
||
hover, pressed and collapsed states remain optically aligned.
|
||
- **Copy and content:** each page title now has a short task description on
|
||
desktop. Mobile keeps only the title to protect first-screen task density.
|
||
- **Responsiveness:** 390px mobile, 1440px desktop and 2560px 2K states were
|
||
rendered without overlap, hidden persistent controls or shell overflow.
|
||
- **Accessibility:** semantic navigation names and page headings remain intact;
|
||
mobile targets are at least 42px in the shell, focus styles are preserved,
|
||
and `prefers-reduced-motion` disables the new transitions. Screenshot review
|
||
cannot prove full assistive-technology compatibility.
|
||
|
||
## Interaction and console checks
|
||
|
||
- Mobile More opens a Semi SideSheet with grouped analysis and governance
|
||
destinations, then closes without changing page state.
|
||
- Mobile Mileage navigation changes URL, heading and active tab and renders the
|
||
fixed-column mileage matrix.
|
||
- Desktop sidebar collapses and expands with a visible affordance in both
|
||
states.
|
||
- No framework error overlay or application runtime error was observed.
|
||
Semi UI's known React `findDOMNode` development deprecation warning remains.
|
||
|
||
## Follow-up polish
|
||
|
||
- P3: continue raising secondary explanatory text on legacy page-specific
|
||
surfaces as each page enters the Semi migration.
|
||
- P3: consolidate older workspace CSS overrides after the visual migration is
|
||
complete; removing them now would expand regression scope without changing
|
||
this shell's rendered result.
|
||
|
||
final result: passed
|
||
|
||
---
|
||
|
||
# Access portrait evidence viewport — Design QA
|
||
|
||
- Source visual truth:
|
||
`/tmp/access-mobile-density-20260720/01-production-320-before.png`
|
||
- Local implementation:
|
||
`/tmp/access-mobile-density-20260720/02-local-320-after.png`
|
||
- Local detail interaction:
|
||
`/tmp/access-mobile-density-20260720/03-local-320-detail.png`
|
||
- Local 390px regression:
|
||
`/tmp/access-mobile-density-20260720/04-local-390-after.png`
|
||
- Deployed 320px evidence:
|
||
`/tmp/access-mobile-density-20260720/05-production-320-after.png`
|
||
- Deployed detail interaction:
|
||
`/tmp/access-mobile-density-20260720/06-production-320-detail.png`
|
||
- Deployed 390px evidence:
|
||
`/tmp/access-mobile-density-20260720/07-production-390-after.png`
|
||
- Same-viewport production comparison:
|
||
`/tmp/access-mobile-density-20260720/08-production-320-comparison.png`
|
||
- Viewports: 320 × 568 and 390 × 844
|
||
- State: authenticated administrator; Access directory with all vehicles
|
||
selected and live protocol evidence
|
||
|
||
## Findings and comparison history
|
||
|
||
### Baseline
|
||
|
||
- **[P1] The portrait mobile evidence list was almost entirely clipped.**
|
||
- Evidence: at 320 × 568 the page reserved 72px of redundant bottom padding,
|
||
a 72px filter trigger, a 58px repeated panel heading and a 92px metric
|
||
rail. Only 19px remained for the vehicle scroller, so the first 155px
|
||
vehicle card could not be read or selected reliably.
|
||
- Impact: the primary Access task—identifying a vehicle and opening its
|
||
protocol evidence—was effectively blocked on narrow mobile devices.
|
||
- Fix: removed the redundant portrait-only page reserve, reduced the filter
|
||
trigger to 56px, reduced the metric rail to 60px minimum height and hid the
|
||
repeated mobile panel heading. The established command bar, filters,
|
||
metrics, pagination and bottom navigation remain present.
|
||
|
||
### Final pass
|
||
|
||
- No actionable P0, P1 or P2 issue remains in this mobile Access flow.
|
||
- At 320 × 568 the evidence scroller increased from 19px to 195px, a 176px
|
||
gain and more than tenfold improvement. One complete vehicle card and the
|
||
next-card affordance are visible.
|
||
- At 390 × 844 the scroller is 471px tall and three evidence cards are visible
|
||
before pagination.
|
||
- Both viewports report document width equal to viewport width. The bottom
|
||
navigation, pagination and detail sheet do not overlap or introduce
|
||
horizontal scrolling.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- **Fonts and typography:** existing Semi UI typography, plate hierarchy and
|
||
protocol metadata remain unchanged and readable.
|
||
- **Spacing and layout rhythm:** only portrait Access density changed. Existing
|
||
short-landscape rules and Web layout are untouched.
|
||
- **Colors and visual tokens:** the existing neutral, blue, green and amber
|
||
semantic states are preserved, including partial-source warning evidence.
|
||
- **Image quality and assets:** no new imagery, icon approximation or
|
||
replacement asset was introduced.
|
||
- **Copy and content:** command, filter, vehicle, source and evidence labels are
|
||
unchanged; only the duplicate `接入差异清单` mobile heading is visually
|
||
removed.
|
||
- **Icons:** existing Semi icons and controls retain their current sizing and
|
||
active states.
|
||
- **Responsiveness:** 320px and 390px portrait layouts have no horizontal
|
||
overflow. The portrait-only media query does not alter desktop or landscape
|
||
composition.
|
||
- **Accessibility:** every vehicle remains a semantic button and the selected
|
||
vehicle opens a labeled `车辆接入详情` dialog with a labeled close action.
|
||
This visual and DOM pass does not replace a full assistive-technology audit.
|
||
|
||
## Interaction and console checks
|
||
|
||
- Production Access → first vehicle card → vehicle detail → close was exercised
|
||
successfully at 320px.
|
||
- The detail sheet measured 320px wide and 477px tall, retained its internal
|
||
scroller, and exposed `接入健康概览` plus `协议证据`.
|
||
- Automated gate: 73 test files and 383 tests passed. The targeted Access and
|
||
production-entry gate passed 14 tests.
|
||
- TypeScript, Vite, distribution preparation and the release build verifier
|
||
completed successfully with 74 current assets.
|
||
- Release `access-mobile-list-20260720182508` is active. `/access` returned
|
||
HTTP 200, the service is active, and the deployed
|
||
`app-DC_UXKeU.css` SHA-256 matches the local production asset:
|
||
`8e723387c096e156fb70e2a234ade464c0d1faca000c2d54ef8a65e402638c78`.
|
||
- No application runtime failure or visible error state was observed during
|
||
local or deployed interaction testing. Existing development-only Semi UI
|
||
`findDOMNode` warnings remain unchanged.
|
||
|
||
## Follow-up polish
|
||
|
||
- P3: revisit Access card vertical density only if future protocol evidence
|
||
adds a fourth simultaneous source; the current three-source layout is
|
||
readable at 320px.
|
||
|
||
final result: passed
|
||
|
||
---
|
||
|
||
# Account governance clarity pass — 2026-07-20
|
||
|
||
## Scope
|
||
|
||
- Route: `/users`
|
||
- Surfaces: desktop directory, mobile directory, desktop configuration
|
||
SideSheet, mobile configuration SideSheet.
|
||
- Production release: `users-clarity-20260720181338`.
|
||
|
||
## Findings and fixes
|
||
|
||
- **P1 — Mobile directory hierarchy consumed too much of the first viewport.**
|
||
- Before: at 320 × 568 the directory began at y=291, so only about three
|
||
complete customer rows were visible.
|
||
- Fix: removed the repeated mobile directory heading, reduced the metric
|
||
rail to 56px and kept the list itself as a single-row directory.
|
||
- After: the directory begins at y=227. Four complete rows plus the next-row
|
||
affordance are visible at 320 × 568; all five current accounts fit at
|
||
390 × 844.
|
||
|
||
- **P1 — Mobile configuration repeated identity information before the first
|
||
editable field.**
|
||
- Before: header, three-column summary, numbered tabs and identity overview
|
||
pushed the first editable field to roughly y=425.
|
||
- Fix: kept only the decision-critical permission scope and account-status
|
||
summary on mobile, removed duplicate step circles and hid the repeated
|
||
identity overview.
|
||
- After: the first identity field begins at y=253 in production. Permission
|
||
scope, account enable/disable state, section tabs and persistent save state
|
||
remain visible.
|
||
|
||
- **P2 — Narrow directory scrolling reduced usable row width.**
|
||
- Fix: hid the decorative inner scrollbar on mobile while preserving the
|
||
keyboard-focusable scroll region and native touch scrolling.
|
||
|
||
## Fidelity and interaction checks
|
||
|
||
- Desktop remains a true one-row directory with dedicated columns for menu
|
||
permissions, vehicle permissions, recent login and access state.
|
||
- Desktop configuration retains the complete three-part summary and detailed
|
||
identity overview; mobile removes only duplicated information.
|
||
- The mobile vehicle-permission tab was exercised in production: assigned
|
||
plates remain primary, VIN secondary, and effective periods, adjust/remove
|
||
actions, pagination and history remain reachable.
|
||
- No horizontal document overflow occurred at 390px or 1440px.
|
||
- Production console: no warnings or errors for the deployed route.
|
||
- Automated gate: 73 test files and 382 tests passed. Production build gate
|
||
passed with 74 release assets.
|
||
- Local and ECS `UsersPage-CNmDqRKT.css` SHA-256 matched:
|
||
`6d5e0f80489967fc5f4eac7c30236091969e66730e68031713740c3f8c603ba3`.
|
||
|
||
## Evidence
|
||
|
||
- `/tmp/responsive-audit-20260720/users-list-mobile-production.png`
|
||
- `/tmp/responsive-audit-20260720/users-config-mobile-production.png`
|
||
- `/tmp/responsive-audit-20260720/users-config-vehicles-mobile-after.png`
|
||
- `/tmp/responsive-audit-20260720/users-list-desktop-production.png`
|
||
|
||
final result: passed
|
||
|
||
# 2026-07-20 Operations mobile clarity audit
|
||
|
||
## Audit scope
|
||
|
||
- Surface: authenticated `/operations` quality workspace.
|
||
- User goal: scan the active reconciliation queue, understand the two urgent
|
||
counts, and move between reconciliation and diagnosis without leaving the
|
||
viewport or losing mobile navigation.
|
||
- Production baseline:
|
||
`/tmp/cross-route-audit-20260720/mobile-operations-stable.png`.
|
||
- Local implementation:
|
||
`/tmp/cross-route-audit-20260720/mobile-operations-local-after-stable.png`.
|
||
- Production verification:
|
||
`/tmp/cross-route-audit-20260720/mobile-operations-production-final.png`.
|
||
|
||
## Findings and resolution
|
||
|
||
1. **P1 — the operations command surfaces exceeded the phone viewport.**
|
||
- Baseline measurement: the 390px-wide command bar started at x=8 and
|
||
ended at x=398 because a desktop `width: 100%` combined with 8px mobile
|
||
margins. The adjacent workspace navigation inherited the same geometry.
|
||
- Impact: the global refresh action and right edge of the segmented
|
||
workspace control were visibly clipped.
|
||
- Fix: the mobile operations command bar and workspace navigation now use
|
||
their available flex width (`width: auto`) and remain inset from x=8 to
|
||
x=382.
|
||
|
||
2. **P1 — half of the reconciliation metric rail was reserved for hidden
|
||
desktop context.**
|
||
- Baseline measurement: the rail body retained `199px 180px` columns at
|
||
390px even though the context column was hidden. The two visible metrics
|
||
were compressed to 99.5px each, truncating both supporting notes.
|
||
- Impact: users could see the large numbers but not understand whether
|
||
`1,327` represented active items or what caused `1,189` SLA breaches.
|
||
- Fix: the hidden context column now collapses on phones. The visible list
|
||
occupies all 379px with two equal 189.5px columns, and each metric uses a
|
||
clear label/value/note stack.
|
||
|
||
## Final pass
|
||
|
||
- 390 × 844 production document width equals viewport width.
|
||
- Command bar and workspace navigation are both fully inside the viewport.
|
||
- `待复核 1,327 / 活跃 1,327 项` and
|
||
`SLA 超时 1,189 / 超过 24 小时` are fully legible.
|
||
- The `差异处置 → 单车诊断 → 差异处置` interaction was exercised against
|
||
ECS production. Both panels rendered correctly and document width remained
|
||
390px.
|
||
- 1440 × 900 retained the existing five-column reconciliation table, summary
|
||
context, side navigation and pagination without reflow.
|
||
- No production console warning or error was emitted during the smoke test.
|
||
The known Semi UI `findDOMNode` message remains development-only.
|
||
- Automated gate: 73 test files and 381 tests passed.
|
||
- Production build gate: 74 release assets passed.
|
||
- Release `ops-mobile-clarity-20260720175459` is active. The served
|
||
`app-BUsvckVz.css` SHA-256 matches the local build:
|
||
`feb4f945ff7dc586a31d1c65f985048b7ef6399574911db182767fc813c28121`.
|
||
|
||
## Evidence limits
|
||
|
||
- Screenshot and DOM evidence verifies responsive reflow, visible hierarchy,
|
||
interaction state and console health. It does not by itself prove full WCAG
|
||
conformance or screen-reader announcements.
|
||
- The diagnosis vehicle picker was not used to mutate production state; its
|
||
empty state and workspace transition were verified read-only.
|
||
|
||
final result: passed
|
||
|
||
---
|
||
|
||
# Account management guided onboarding — Design QA
|
||
|
||
- Source visual truth:
|
||
`/tmp/account-management-audit-20260720/07-users-mobile-create-production-baseline.png`
|
||
- Rendered implementation:
|
||
`/tmp/account-management-audit-20260720/08-users-mobile-create-local-after.png`
|
||
- Deployed production implementation:
|
||
`/tmp/account-management-audit-20260720/14-users-mobile-create-production-after.png`
|
||
- Full-view comparison:
|
||
`/tmp/account-management-audit-20260720/12-users-mobile-create-full-comparison.png`
|
||
- Focused summary/footer comparison:
|
||
`/tmp/account-management-audit-20260720/13-users-mobile-create-focus-comparison.png`
|
||
- Web implementation:
|
||
`/tmp/account-management-audit-20260720/11-users-desktop-create-local-after.png`
|
||
- Follow-on menu step:
|
||
`/tmp/account-management-audit-20260720/09-users-mobile-create-menu-local-after.png`
|
||
- Follow-on vehicle step:
|
||
`/tmp/account-management-audit-20260720/10-users-mobile-create-vehicles-local-after.png`
|
||
- Viewports: 390 × 844 and 1440 × 900
|
||
- State: authenticated administrator; customer directory, existing customer
|
||
editor and new-customer draft
|
||
|
||
## Findings and comparison history
|
||
|
||
### Baseline
|
||
|
||
- **[P1] The new-account default contradicted the page's least-privilege
|
||
promise.**
|
||
- Evidence: the production source capture opened a new customer with all
|
||
four customer menus already granted, while the header and supporting copy
|
||
said permissions were opened by minimum necessary scope.
|
||
- Impact: an administrator could create a broadly authorized account without
|
||
explicitly reviewing menu access.
|
||
- Fix: new drafts now begin with zero menu and zero vehicle permissions.
|
||
Existing accounts retain their saved menu and vehicle grants unchanged.
|
||
- Post-fix evidence: the implementation summary shows `0 菜单 · 0 辆`, the
|
||
badge reads `待开放菜单`, and every menu row begins unchecked.
|
||
- **[P2] Draft state and the primary action implied that an unsaved account was
|
||
already synchronized.**
|
||
- Evidence: before the fix, the new-account footer showed `已同步` and the
|
||
disabled action was `创建账号`, even though no server-side account existed.
|
||
- Impact: administrators could not distinguish a local draft from a saved
|
||
identity and were not prompted to review permissions in order.
|
||
- Fix: new drafts show `新建草稿`; the primary action advances through
|
||
`下一步：菜单权限`, `下一步：车辆权限`, then `创建账号`. The first step
|
||
remains disabled until username, display name and a 10–128 character
|
||
password with at least three character categories are complete.
|
||
- Post-fix evidence: the focused comparison shows the corrected state badge,
|
||
zero-permission summary and step-specific action.
|
||
|
||
### Final pass
|
||
|
||
- No actionable P0, P1 or P2 issue remains in the audited account-management
|
||
flow.
|
||
- The existing Web single-line customer directory, mobile dense customer list,
|
||
identity editor, menu editor, vehicle paging and grant-window editor were
|
||
preserved.
|
||
- A production smoke used a disposable client-side draft, advanced from
|
||
identity to the zero-menu state, then discarded the draft. No customer was
|
||
created or modified.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- **Fonts and typography:** the existing PingFang/system stack, title weights,
|
||
compact metadata and tab hierarchy remain unchanged. Step labels fit at
|
||
390px without wrapping or truncating the primary action.
|
||
- **Spacing and layout rhythm:** the established full-width mobile sheet,
|
||
sticky summary, three-step tabs, scrollable form and sticky footer remain
|
||
aligned. The Web sheet retains its 820px maximum width and two-column fields.
|
||
- **Colors and visual tokens:** existing Semi blue, neutral and semantic
|
||
green/amber states are retained. Amber now consistently communicates an
|
||
incomplete permission scope; blue communicates a local new draft.
|
||
- **Image quality and assets:** no new imagery or replacement asset was
|
||
introduced. The product's supplied vector brand mark and Semi icon family
|
||
remain unchanged.
|
||
- **Copy and content:** `新建草稿`, `待开放菜单` and the step-specific actions
|
||
accurately describe server state and the administrator's next task.
|
||
- **Icons:** the existing Semi close, eye, plus and checkbox icons remain
|
||
aligned and use the same active/disabled treatments.
|
||
- **Responsiveness:** 390px and 1440px captures show no horizontal overflow,
|
||
clipped footer, hidden close action or obscured form field.
|
||
- **Accessibility:** the flow exposes a dialog, three semantic tabs, labeled
|
||
fields, checkboxes and buttons. Disabled state prevents advancing with an
|
||
incomplete or weak identity. Screenshot and DOM review do not replace a
|
||
full assistive-technology audit.
|
||
|
||
## Interaction and console checks
|
||
|
||
- Production customer directory → new account → identity draft → menu step →
|
||
discard draft was exercised without a write.
|
||
- Local identity fields were completed with a compliant preview password; the
|
||
primary action became enabled and advanced to a zero-menu state.
|
||
- Menu and vehicle tabs rendered their unchecked/empty states and the final
|
||
create action without layout shift.
|
||
- Existing-customer identity, menu and 44-vehicle states were captured on Web
|
||
and mobile before implementation.
|
||
- Local development emitted only Semi UI's known React `findDOMNode`
|
||
deprecation warning. Deployed production emitted no warning or error.
|
||
- Automated gate: 73 test files and 380 tests passed. TypeScript, Vite and the
|
||
release build verifier completed successfully.
|
||
- Production release `account-onboarding-ux-20260720173338` is active. The
|
||
immutable release gate verified 74 current and 116 compatibility assets; the
|
||
served UsersPage bundle is byte-for-byte identical to the local build.
|
||
|
||
## Follow-up polish
|
||
|
||
- P3: add a compact password-rule checklist to the administrator's initial
|
||
password field when the shared password-input pattern is next consolidated.
|
||
|
||
final result: passed
|
||
|
||
---
|
||
|
||
# Intermediate sidebar continuity — Design QA
|
||
|
||
- Source visual truth: `/tmp/sidebar-continuity-20260720/02-monitor-901-production.png`
|
||
- Rendered implementation: `/tmp/sidebar-continuity-20260720/11-monitor-901-local-settled.png`
|
||
- Full-view comparison: `/tmp/sidebar-continuity-20260720/12-monitor-901-full-comparison.png`
|
||
- Focused navigation comparison: `/tmp/sidebar-continuity-20260720/13-monitor-901-focus-comparison.png`
|
||
- Cross-route implementation evidence: `/tmp/sidebar-continuity-20260720/09-routes-1024-local-montage.png`
|
||
- Mobile regression evidence: `/tmp/sidebar-continuity-20260720/10-statistics-390-mobile-regression.png`
|
||
- Viewports: 680 × 700, 681 × 700, 900 × 700, 901 × 700,
|
||
1024 × 700, 1100 × 700, 1101 × 700, 1280 × 700 and 390 × 844
|
||
- State: authenticated customer; Monitor map mode, plus Vehicles, Tracks and
|
||
Statistics default workspaces
|
||
|
||
## Findings and comparison history
|
||
|
||
### Baseline
|
||
|
||
- **[P2] A one-pixel viewport change caused a disproportionate workspace
|
||
reflow.**
|
||
- Evidence: production at 900px used a 72px compact rail and an 828px main
|
||
region, while 901px immediately restored a 228px rail and reduced the main
|
||
region to 673px. The full-view source capture shows the map losing about
|
||
one third of its width even though the device width increased.
|
||
- Impact: tablet and browser-zoom users could cross the breakpoint and see
|
||
filters, telemetry and the map recompose abruptly.
|
||
- Fix: aligned the React shell state and shared CSS breakpoint so the 72px
|
||
Semi icon rail remains active from 681px through 1100px. Full navigation
|
||
returns at 1101px, where the main region still has 873px.
|
||
- Post-fix evidence: the 901px implementation has a 72px rail, 829px main
|
||
region and complete 284px account action region. The focused comparison
|
||
shows the recovered workspace width without changing the page hierarchy.
|
||
|
||
### Final pass
|
||
|
||
- No actionable P0, P1 or P2 mismatch remains.
|
||
- Boundary measurements:
|
||
- 680px: mobile shell, 680px main region.
|
||
- 681px: 72px rail, 609px main region.
|
||
- 900px: 72px rail, 828px main region.
|
||
- 901px: 72px rail, 829px main region.
|
||
- 1024px: 72px rail, 952px main region.
|
||
- 1100px: 72px rail, 1028px main region.
|
||
- 1101px: 228px rail, 873px main region.
|
||
- 1280px: 228px rail, 1052px main region.
|
||
- Vehicles, Tracks and Statistics all retained the same shell geometry at
|
||
1024px and 1101px with document width equal to viewport width.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- **Fonts and typography:** the existing PingFang/system stack, weights and
|
||
hierarchy remain unchanged. Labels stay readable in the compact rail and
|
||
the 901px topbar has no wrapping or clipping.
|
||
- **Spacing and layout rhythm:** the change preserves the established 72px and
|
||
228px shell tokens and removes the unstable intermediate reflow. Page
|
||
margins, card spacing and content density remain consistent across routes.
|
||
- **Colors and visual tokens:** no palette or semantic state color changed.
|
||
Existing white surfaces, neutral borders and Semi blue selection states
|
||
remain faithful to the current production design.
|
||
- **Image quality and assets:** the supplied vector brand mark remains the
|
||
single shell asset. No raster substitute, custom SVG or CSS-drawn asset was
|
||
introduced.
|
||
- **Copy and content:** no product copy changed. Compact navigation uses the
|
||
existing accessible menu labels while hiding only visible text.
|
||
- **Icons:** the existing Semi icon set remains optically centered in the 72px
|
||
rail; selected and inactive states were checked at 901px and 1024px.
|
||
- **Responsiveness:** no horizontal document overflow occurred at any tested
|
||
boundary. The 390px mileage matrix retained fixed vehicle and total columns,
|
||
horizontal date navigation and bottom navigation.
|
||
- **Accessibility:** complementary navigation remains present at 681–1100px;
|
||
mobile navigation remains available below 681px; the account menu remains
|
||
fully inside the 901px viewport. This visual pass does not replace an
|
||
assistive-technology audit.
|
||
|
||
## Interaction and console checks
|
||
|
||
- Monitor, Vehicles, Tracks and Statistics were navigated in the authenticated
|
||
browser at 1024px and measured again at 1101px.
|
||
- Route changes retained the shell, active navigation and full-width work area.
|
||
- The 390px Statistics page preserved usable pagination and bottom navigation.
|
||
- No application runtime error was observed. Semi UI's known React
|
||
`findDOMNode` development StrictMode deprecation warning remains.
|
||
- Automated gate: 73 test files and 379 tests passed; production build and
|
||
release verification completed successfully.
|
||
- Deployed production evidence:
|
||
`/tmp/sidebar-continuity-20260720/14-monitor-901-production-after.png`.
|
||
The authenticated ECS page measured a 72px rail and 829px main region at
|
||
901px, with no horizontal overflow and no browser console warning or error.
|
||
- Release `sidebar-continuity-ux-20260720171458` is active. The immutable
|
||
release gate verified 74 current assets and 116 compatibility assets; the
|
||
served shell stylesheet is byte-for-byte identical to the local build.
|
||
|
||
## Follow-up polish
|
||
|
||
- P3: replace the remaining Semi UI components that trigger React
|
||
`findDOMNode` development warnings when the library exposes ref-safe
|
||
alternatives.
|
||
|
||
final result: passed
|