Conversation
Replace Noto Sans with IBM Plex Mono in the table view for better data readability using a monospace typeface. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add font-family: inherit to the foreign key button so it picks up IBM Plex Mono from the parent table instead of the browser default. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Numeric values are conventionally right-aligned in data tables for easier scanning and comparison of figures. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
gugu
requested review from
Copilot and
lyubov-voloshko
and removed request for
Copilot
Position the copy button at left: 0 within the field-display container so it appears in the empty space left of the right-aligned value, staying within the overflow bounds of the cell. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds IBM Plex Mono as the font for the DB table and updates several table field display components to right-align numeric-ish values and reposition the copy button accordingly.
Changes:
- Add
@fontsource/ibm-plex-monodependency and lockfile entry. - Include IBM Plex Mono font CSS via
angular.jsonand apply it to.db-table(including Angular Material table font CSS variables). - Adjust CSS for number/money/id table display fields (right alignment + copy button placement); minor CSS refactor in foreign-key field styles.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/package.json | Adds IBM Plex Mono font package dependency. |
| frontend/yarn.lock | Locks the newly added @fontsource/ibm-plex-mono package version. |
| frontend/angular.json | Loads IBM Plex Mono CSS assets into the global styles pipeline. |
| frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css | Applies IBM Plex Mono to the DB table and sets Material table font variables. |
| frontend/src/app/components/ui-components/table-display-fields/number/number.component.css | Right-aligns number field display and moves copy button positioning. |
| frontend/src/app/components/ui-components/table-display-fields/money/money.component.css | Right-aligns money field display and moves copy button positioning. |
| frontend/src/app/components/ui-components/table-display-fields/id/id.component.css | Right-aligns ID field display and moves copy button positioning. |
| frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css | CSS formatting + explicit font-family: inherit for button. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| :host { | ||
| text-align: right; | ||
| } |
There was a problem hiding this comment.
This file switched to tab indentation, but the repo’s .editorconfig requires 2-space indentation (indent_style=space, indent_size=2). Please reformat these new styles to use spaces to match the established formatting and avoid formatter/lint churn.
| :host { | ||
| text-align: right; | ||
| } |
There was a problem hiding this comment.
This file uses tab indentation, but .editorconfig specifies 2-space indentation. Please reformat to spaces for consistency with the rest of the table-display-fields CSS and to align with tooling.
| :host { | ||
| text-align: right; | ||
| } | ||
|
|
||
| .field-display { | ||
| justify-content: flex-end; | ||
| } | ||
|
|
||
| .field-copy-button { | ||
| right: auto; | ||
| left: 0; | ||
| } |
There was a problem hiding this comment.
The right-alignment/copy-button positioning rules here are duplicated across multiple field display components (money/number/id). Consider moving these shared overrides into the base table display field stylesheet (or a shared utility class) to reduce duplication and keep layout behavior consistent across similar numeric fields.
| :host { | ||
| text-align: right; | ||
| } | ||
|
|
There was a problem hiding this comment.
This file also switched to tab indentation, which conflicts with the repository’s .editorconfig (2-space indentation). Please reformat to spaces for consistency and to prevent formatting-only diffs in future edits.
| .foreign-key-button { | ||
| background: transparent; | ||
| border: 1px solid transparent; | ||
| border-radius: 12px; | ||
| color: var(--color-accentedPalette-500); | ||
| cursor: pointer; | ||
| font-size: inherit; | ||
| padding: 2px 8px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| text-align: left; | ||
| max-width: 100%; | ||
| transition: background 100ms, border-color 100ms; | ||
| background: transparent; | ||
| border: 1px solid transparent; | ||
| border-radius: 12px; | ||
| color: var(--color-accentedPalette-500); |
There was a problem hiding this comment.
This file’s indentation was converted from spaces to tabs. Since .editorconfig mandates 2-space indentation, please revert to spaces to match the codebase formatting rules.
| "node_modules/@fontsource/noto-sans/400.css", | ||
| "node_modules/@fontsource/noto-sans/500.css", | ||
| "node_modules/@fontsource/ibm-plex-mono/400.css", | ||
| "node_modules/@fontsource/ibm-plex-mono/500.css", |
There was a problem hiding this comment.
Only IBM Plex Mono weights 400 and 500 are being included, but the table CSS uses bold text in places (e.g., mobile cell labels use font-weight: bold). To avoid faux-bolding/rendering inconsistencies, either include the 700 weight CSS here as well or change the table styles to use an included weight (e.g., 500) instead of bold.
| "node_modules/@fontsource/ibm-plex-mono/500.css", | |
| "node_modules/@fontsource/ibm-plex-mono/500.css", | |
| "node_modules/@fontsource/ibm-plex-mono/700.css", |
2 participants
No description provided.