product_control_client/docs/superpowers/specs/2026-03-27-coal-feeding-motor-grid-alignment-design.md

coalFeeding.vue Motor Grid Alignment Refinement

Overview

This design refines the already approved block-based right-panel layout in src/views/coalFeeding.vue. It does not change the overall removal of <table>. Instead, it adjusts the motor areas so they better match the desired visual structure.

The refinement introduces two requirements:

• both 中间侧 and 回车侧 motor areas should render motors two per row instead of one per row
• the left-side label blocks for those motor areas must stay height-aligned with the corresponding right-side motor blocks

Goals

• Render motor items in a 2-column layout for both motor sections
• Keep odd motor counts left-aligned on the final row
• Keep the left label block height aligned with the right motor block height
• Preserve all existing drag-and-drop, click, and status-display logic
• Avoid reworking the surrounding block layout

Non-Goals

• Do not change the current block layout order
• Do not change time-field rendering
• Do not change temperature or car-number sections
• Do not switch to a new backend data structure
• Do not introduce DOM measurement logic unless strictly necessary

Chosen Approach

Use a CSS grid for motor layout plus shared computed heights for label and motor sections.

Why this approach:

• It preserves the current block-based layout structure
• It keeps the change small and local to the motor sections
• It avoids fragile DOM measurement code
• It guarantees left/right alignment by making both sides use the same computed height source

Motor Layout Rules

Both 中间侧 and 回车侧 motor groups will render with:

• two columns per row
• consistent gaps between motor items
• left-aligned final item when the count is odd

Implementation shape:

• wrap each motor list in a dedicated grid container
• use grid-template-columns: repeat(2, minmax(0, 1fr))
• allow each motor item to occupy one cell
• do not center or span the final odd item

Expected examples:

• 2 motors -> 1 row of 2
• 3 motors -> 2 rows, with the last item on the left of the second row
• 4 motors -> 2 rows of 2

Height Alignment Rules

The left labels for 中间侧 and 回车侧 must visually align with the height of their corresponding motor blocks across all unit columns.

To achieve this, compute two shared height values:

• middleMotorHeight
• returnMotorHeight

These values will be derived from the largest motor-group row count in the current data.

Row count formula:

• Math.ceil(motorCount / 2)

Height formula:

• sectionPaddingTop + sectionPaddingBottom + rows * itemHeight + (rows - 1) * rowGap

Also enforce a minimum height so single-row sections do not become too short.

Both the left label block and the right motor block must use the same computed height source for each section.

Rendering Changes

Keep the existing right-panel block structure. Only refine the motor section internals and the matching left labels.

Changes:

• 中间侧 label gets :style="{ minHeight: middleMotorHeight }"
• 回车侧 label gets :style="{ minHeight: returnMotorHeight }"
• upper motor section gets :style="{ minHeight: middleMotorHeight }"
• lower motor section gets :style="{ minHeight: returnMotorHeight }"
• motor items render inside a control-panel__motor-grid container

The individual motor cards keep their current:

• drag-and-drop handlers
• run/stop toggles
• local/remote badges
• fault/normal text

Styling Changes

Add a motor-grid wrapper class with:

• display: grid
• two equal-width columns
• fixed row gap
• fixed column gap
• left-aligned item flow

The motor section wrapper should:

• keep the current blue-tinted background
• use the shared computed minimum height
• align its content to the top instead of stretching awkwardly

The left label blocks should:

• continue using the current label styling
• adopt the same computed minimum height as their corresponding right-side section

Risks and Mitigations

Risk 1: heights drift if units have different motor counts

Mitigation:

• compute height from the maximum row count across all units for each motor section

Risk 2: odd counts look visually off

Mitigation:

• keep the final odd item left-aligned and do not stretch it to full width

Risk 3: click and drag interactions break during markup changes

Mitigation:

• keep the motor card markup intact
• move only the grouping wrapper and layout styles

Testing Plan

After implementation, verify:

• 中间侧 motors render two per row
• 回车侧 motors render two per row
• odd motor counts leave the last motor on the left side
• left label heights align with right motor-section heights
• motor clicks still toggle state
• drag-and-drop still works on motor items
• the surrounding right-panel layout remains unchanged

Open Constraints

• The workspace is still not a Git repository, so this design file cannot be committed here.
• This refinement assumes the existing block-based right-panel layout remains the baseline for implementation.