LearnNewsExamplesServices
Frontmatter
id8942
titleRefactor: DevRank Grid Location Column (VDOM + SCSS)
stateClosed
labels
airefactoring
assigneestobiu
createdAtFeb 1, 2026, 6:58 PM
updatedAtFeb 2, 2026, 12:55 AM
githubUrlhttps://github.com/neomjs/neo/issues/8942
authortobiu
commentsCount2
parentIssue8930
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 1, 2026, 7:21 PM

Refactor: DevRank Grid Location Column (VDOM + SCSS)

Closed v12.0.0 airefactoring
tobiu
tobiu commented on Feb 1, 2026, 6:58 PM

The 'Location' column in the DevRank grid suffers from layout issues when the text is too long, causing the row height to expand.

Requirements:

  1. Refactor Renderer: Switch the 'Location' column renderer from returning an HTML string to returning a VDOM object.
  2. CSS Truncation: Implement text truncation (text-overflow: ellipsis, white-space: nowrap) to handle long location names gracefully without breaking the row height.
  3. SCSS Extraction: Move all inline styles for this column into the SCSS file (apps/devrank/resources/scss/view/GridContainer.scss or similar).

Acceptance Criteria:

  • Long location names are truncated with an ellipsis.
  • Grid row heights remain consistent.
  • No inline styles in the VDOM renderer.
tobiu added the ai label on Feb 1, 2026, 6:58 PM
tobiu added the refactoring label on Feb 1, 2026, 6:58 PM
tobiu added parent issue #8930 on Feb 1, 2026, 6:59 PM
tobiu referenced in commit 62511c5 - "refactor: DevRank Grid VDOM Renderers & SCSS (#8942)" on Feb 1, 2026, 7:14 PM
tobiu
tobiu Feb 1, 2026, 7:15 PM

Input from Gemini 3 Pro:

✦ I have refactored the 'User' and 'Location' columns to use type: 'component'.

Changes:

  1. Component Columns: Switched from raw renderer functions (returning VDOM strings/objects) to component configs returning Neo.component.Base configurations. This ensures the Grid can manage the lifecycle and ID stability of these complex cells correctly, preventing flickering during scrolling.
  2. VDOM Structure: The component configurations define the exact VDOM structure needed for the avatar/user info and the flag/location text.
  3. SCSS Updates: Extracted styles to GridContainer.scss and added classes (.user-cell, .location-cell) to handle layout and text truncation (text-overflow: ellipsis) for the Location column.
  4. Country Flags: Integrated the CountryFlags utility to render the correct flag icon.

This resolves the layout issues with long location names and ensures a stable, performant scrolling experience.

tobiu referenced in commit 94775f3 - "refactor: DevRank Grid VDOM Renderers & SCSS (#8942)" on Feb 1, 2026, 7:16 PM
tobiu
tobiu Feb 1, 2026, 7:18 PM

Input from Gemini 3 Pro:

✦ I have also hardened the CountryFlags.getFlagUrl() method to strictly validate that the resolved country code is a 2-letter lowercase string (a-z). This prevents the generation of invalid URLs when the location field contains non-standard characters (like '☁︎') that might have slipped through the normalization logic.

tobiu closed this issue on Feb 1, 2026, 7:21 PM
tobiu assigned to @tobiu on Feb 2, 2026, 12:55 AM