Skip to content

Feat/ibm plex mono table font #1578

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 6 commits into from
Feb 6, 2026
Merged

Feat/ibm plex mono table font #1578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
86be681
feat(frontend): use IBM Plex Mono font for data tables
gugu Feb 6, 2026
9a3e9e3
fix(frontend): ensure foreign key widget inherits IBM Plex Mono font
gugu Feb 6, 2026
3c700d4
feat(frontend): right-align number, money and ID widgets in row list
gugu Feb 6, 2026
6273d30
Merge branch 'main' into feat/ibm-plex-mono-table-font
gugu Feb 6, 2026
a5f5d04
fix(frontend): show copy button on left side for right-aligned widgets
gugu Feb 6, 2026
cbf0404
Merge branch 'main' into feat/ibm-plex-mono-table-font
lyubov-voloshko Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@
"node_modules/@fontsource/noto-sans/300.css",
"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",

Copilot AI Feb 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
"node_modules/@fontsource/ibm-plex-mono/500.css",
"node_modules/@fontsource/ibm-plex-mono/500.css",
"node_modules/@fontsource/ibm-plex-mono/700.css",

Copilot uses AI. Check for mistakes.
"node_modules/@material-symbols/font-400/outlined.css",
"src/custom-theme.scss",
"src/styles.scss"
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@angular/platform-browser-dynamic": "~20.3.16",
"@angular/router": "~20.3.16",
"@brumeilde/ngx-theme": "^1.2.1",
"@fontsource/ibm-plex-mono": "^5.2.7",
"@fontsource/noto-sans": "^5.2.10",
"@jsonurl/jsonurl": "^1.1.8",
"@material-symbols/font-400": "^0.40.2",
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,10 @@
.db-table {
display: grid;
width: 100%;
font-family: "IBM Plex Mono", monospace;
--mat-table-header-headline-font: "IBM Plex Mono", monospace;
--mat-table-row-item-label-text-font: "IBM Plex Mono", monospace;
--mat-table-footer-supporting-text-font: "IBM Plex Mono", monospace;
}

@media (width <= 600px) {
Expand Down
51 changes: 26 additions & 25 deletions ...c/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,37 @@
.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);
Comment on lines 1 to +5

Copilot AI Feb 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
cursor: pointer;
font-family: inherit;
font-size: inherit;
padding: 2px 8px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
max-width: 100%;
transition:
background 100ms,
border-color 100ms;
}

@media (prefers-color-scheme: dark) {
.foreign-key-button:hover{
background-color: var(--color-accentedPalette-900);
border: 1px solid var(--color-accentedPalette-700);
}
.foreign-key-button:hover {
background-color: var(--color-accentedPalette-900);
border: 1px solid var(--color-accentedPalette-700);
}
}

@media (prefers-color-scheme: light) {
.foreign-key-button:hover{
background-color: var(--color-accentedPalette-100);
border: 1px solid var(--color-accentedPalette-300);
}
.foreign-key-button:hover {
background-color: var(--color-accentedPalette-100);
border: 1px solid var(--color-accentedPalette-300);
}
}

.foreign-key-button_selected {
background-color: var(--color-accentedPalette-100);
border-radius: 12px;
border: 1px solid var(--color-accentedPalette-300);
background-color: var(--color-accentedPalette-100);
border-radius: 12px;
border: 1px solid var(--color-accentedPalette-300);
}


18 changes: 14 additions & 4 deletions frontend/src/app/components/ui-components/table-display-fields/id/id.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
:host {
text-align: right;
}

Comment on lines +1 to +4

Copilot AI Feb 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
.field-display-id {
display: flex;
align-items: center;
display: flex;
align-items: center;
justify-content: flex-end;
}

.field-value-id {
font-weight: 500;
flex-grow: 1;
font-weight: 500;
flex-grow: 1;
}

.field-copy-button {
right: auto;
left: 0;
}
11 changes: 11 additions & 0 deletions frontend/src/app/components/ui-components/table-display-fields/money/money.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
:host {
text-align: right;
}
Comment on lines +1 to +3

Copilot AI Feb 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

.field-display {
justify-content: flex-end;
}

.field-copy-button {
right: auto;
left: 0;
}
Comment on lines +1 to +12

Copilot AI Feb 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
25 changes: 19 additions & 6 deletions frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
:host {
text-align: right;
}
Comment on lines +1 to +3

Copilot AI Feb 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

.field-display {
justify-content: flex-end;
}

.field-copy-button {
right: auto;
left: 0;
}

.out-of-threshold {
display: flex;
align-items: center;
gap: 2px;
display: flex;
align-items: center;
gap: 2px;
}

.out-of-threshold__icon {
font-size: 16px;
width: 16px;
height: 16px;
font-size: 16px;
width: 16px;
height: 16px;
}
8 changes: 8 additions & 0 deletions frontend/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2750,6 +2750,13 @@ __metadata:
languageName: node
linkType: hard

"@fontsource/ibm-plex-mono@npm:^5.2.7":
version: 5.2.7
resolution: "@fontsource/ibm-plex-mono@npm:5.2.7"
checksum: e9f3c3825cebc5f4829cc4f48c7fba9f8c18fb837338ec9b81bab778bd3e69a4e632580df5647831ca3fd782ff7baecd0e2d38585d9a3a6c6db1eb45102afe19
languageName: node
linkType: hard

"@fontsource/noto-sans@npm:^5.2.10":
version: 5.2.10
resolution: "@fontsource/noto-sans@npm:5.2.10"
Expand Down Expand Up @@ -12046,6 +12053,7 @@ __metadata:
"@angular/platform-browser-dynamic": ~20.3.16
"@angular/router": ~20.3.16
"@brumeilde/ngx-theme": ^1.2.1
"@fontsource/ibm-plex-mono": ^5.2.7
"@fontsource/noto-sans": ^5.2.10
"@jsonurl/jsonurl": ^1.1.8
"@material-symbols/font-400": ^0.40.2
Expand Down
Loading