In Stage 1 (Target Generation), the collapsible section "Advanced Target Generation Options" (#targenAdvancedDetails) exhibits staggered, uneven vertical alignment across its two-column layout. Form controls of varying types (numeric inputs, sliders with monospace readouts, dropdown selects, and checkboxes) are placed side-by-side without consistent control heights or label structures.
Root Cause Analysis
Height Mismatches Between Form Control Types:
Number inputs (input[type="number"]) have defined padding, borders, and a rendered height of ~36px plus label margins.
Range sliders (input[type="range"]) with inline monospace value displays have a different intrinsic height (~20px), resulting in baseline and bottom margin misalignment when paired with text/number inputs (e.g., Neutral Axis Steps paired with Neutral Axis Concentration; OFPS Adaptation paired with Total Ink Limit).
Ad-Hoc Layout Alignment Hacks:
In the Algorithm & Quality row, targenAlgorithm (<select>) is paired with targenHighQuality (<input type="checkbox">). Because the checkbox lacks a top label, inline CSS display: flex; flex-direction: column; justify-content: flex-end; was used to push the checkbox down. Any font scaling or viewport resize causes the checkbox to stagger relative to the select input.
Broken Grid Flow:
Preconditioning Profile (-c) is rendered as a full-width row (.input-row.has-btn) directly between two-column rows, breaking visual grouping and vertical rhythm.
Proposed Solution
Logical Semantic Grouping:
Reorganize the advanced options into clear, titled visual sub-groups/cards:
Neutral Axis & Preconditioning:
Preconditioning Profile (-c) [Full width with file picker]
OFPS Adaptation (-A), Dark Region Emphasis (-V), Device Value Power (-p)
Algorithm & Quality:
Full-spread Algorithm (<select>) & High Quality OFPS (-G) (Checkbox with proper label container)
Ink Limiting (CMYK):
Total Ink Limit / TAC (-l %)
CSS Layout Normalization:
Standardize .form-group and .slider-row / .slider-container so that slider groups share identical vertical footprint and baseline alignment with text/number input groups.
Give checkbox options a dedicated wrapper that maintains proper vertical alignment with adjacent select/input fields without resorting to justify-content: flex-end.
Utilize a unified CSS Grid (grid-template-columns: repeat(2, 1fr)) with explicit row alignment (align-items: start) for consistent multi-column spacing.
### Problem Description
In Stage 1 (Target Generation), the collapsible section **"Advanced Target Generation Options"** (`#targenAdvancedDetails`) exhibits staggered, uneven vertical alignment across its two-column layout. Form controls of varying types (numeric inputs, sliders with monospace readouts, dropdown selects, and checkboxes) are placed side-by-side without consistent control heights or label structures.
### Root Cause Analysis
1. **Height Mismatches Between Form Control Types**:
- Number inputs (`input[type="number"]`) have defined padding, borders, and a rendered height of ~36px plus label margins.
- Range sliders (`input[type="range"]`) with inline monospace value displays have a different intrinsic height (~20px), resulting in baseline and bottom margin misalignment when paired with text/number inputs (e.g., Neutral Axis Steps paired with Neutral Axis Concentration; OFPS Adaptation paired with Total Ink Limit).
2. **Ad-Hoc Layout Alignment Hacks**:
- In the Algorithm & Quality row, `targenAlgorithm` (`<select>`) is paired with `targenHighQuality` (`<input type="checkbox">`). Because the checkbox lacks a top label, inline CSS `display: flex; flex-direction: column; justify-content: flex-end;` was used to push the checkbox down. Any font scaling or viewport resize causes the checkbox to stagger relative to the select input.
3. **Broken Grid Flow**:
- Preconditioning Profile (`-c`) is rendered as a full-width row (`.input-row.has-btn`) directly between two-column rows, breaking visual grouping and vertical rhythm.
---
### Proposed Solution
1. **Logical Semantic Grouping**:
Reorganize the advanced options into clear, titled visual sub-groups/cards:
- **Neutral Axis & Preconditioning**:
- Preconditioning Profile (`-c`) [Full width with file picker]
- Neutral Axis Steps (`-n`) & Neutral Axis Concentration (`-N`) [Side-by-side with normalized row heights]
- **Patch Distribution & Sampling**:
- Combined Grey Axis Steps (`-g`) & Single-Channel Steps (`-s`)
- OFPS Adaptation (`-A`), Dark Region Emphasis (`-V`), Device Value Power (`-p`)
- **Algorithm & Quality**:
- Full-spread Algorithm (`<select>`) & High Quality OFPS (`-G`) (Checkbox with proper label container)
- **Ink Limiting (CMYK)**:
- Total Ink Limit / TAC (`-l %`)
2. **CSS Layout Normalization**:
- Standardize `.form-group` and `.slider-row` / `.slider-container` so that slider groups share identical vertical footprint and baseline alignment with text/number input groups.
- Give checkbox options a dedicated wrapper that maintains proper vertical alignment with adjacent select/input fields without resorting to `justify-content: flex-end`.
- Utilize a unified CSS Grid (`grid-template-columns: repeat(2, 1fr)`) with explicit row alignment (`align-items: start`) for consistent multi-column spacing.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Problem Description
In Stage 1 (Target Generation), the collapsible section "Advanced Target Generation Options" (
#targenAdvancedDetails) exhibits staggered, uneven vertical alignment across its two-column layout. Form controls of varying types (numeric inputs, sliders with monospace readouts, dropdown selects, and checkboxes) are placed side-by-side without consistent control heights or label structures.Root Cause Analysis
input[type="number"]) have defined padding, borders, and a rendered height of ~36px plus label margins.input[type="range"]) with inline monospace value displays have a different intrinsic height (~20px), resulting in baseline and bottom margin misalignment when paired with text/number inputs (e.g., Neutral Axis Steps paired with Neutral Axis Concentration; OFPS Adaptation paired with Total Ink Limit).targenAlgorithm(<select>) is paired withtargenHighQuality(<input type="checkbox">). Because the checkbox lacks a top label, inline CSSdisplay: flex; flex-direction: column; justify-content: flex-end;was used to push the checkbox down. Any font scaling or viewport resize causes the checkbox to stagger relative to the select input.-c) is rendered as a full-width row (.input-row.has-btn) directly between two-column rows, breaking visual grouping and vertical rhythm.Proposed Solution
Logical Semantic Grouping:
Reorganize the advanced options into clear, titled visual sub-groups/cards:
-c) [Full width with file picker]-n) & Neutral Axis Concentration (-N) [Side-by-side with normalized row heights]-g) & Single-Channel Steps (-s)-A), Dark Region Emphasis (-V), Device Value Power (-p)<select>) & High Quality OFPS (-G) (Checkbox with proper label container)-l %)CSS Layout Normalization:
.form-groupand.slider-row/.slider-containerso that slider groups share identical vertical footprint and baseline alignment with text/number input groups.justify-content: flex-end.grid-template-columns: repeat(2, 1fr)) with explicit row alignment (align-items: start) for consistent multi-column spacing.Issue is not resolved