From 86be681128b0751f73f75e0aee06e2c0d8a9f1db Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 6 Feb 2026 13:05:05 +0000 Subject: [PATCH 1/4] feat(frontend): use IBM Plex Mono font for data tables 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 --- frontend/angular.json | 2 ++ frontend/package.json | 1 + .../dashboard/db-table-view/db-table-view.component.css | 4 ++++ frontend/yarn.lock | 8 ++++++++ 4 files changed, 15 insertions(+) diff --git a/frontend/angular.json b/frontend/angular.json index 852ec8243..9799792b3 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -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", "node_modules/@material-symbols/font-400/outlined.css", "src/custom-theme.scss", "src/styles.scss" diff --git a/frontend/package.json b/frontend/package.json index e153a92c1..25aa239c3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index 4bbc72d47..5999140f5 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css @@ -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) { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 2810aedae..ec60dbc05 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -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" @@ -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 From 9a3e9e38fe066251fc1c0fcd88a9e7cbbbe6ebdd Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 6 Feb 2026 13:07:42 +0000 Subject: [PATCH 2/4] fix(frontend): ensure foreign key widget inherits IBM Plex Mono font 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 --- .../foreign-key/foreign-key.component.css | 51 ++++++++++--------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css index e534da063..5cd9a01db 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css @@ -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); + 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); } - - From 3c700d4302ca8a00e6b8c2baec2f4c24343297db Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 6 Feb 2026 13:10:25 +0000 Subject: [PATCH 3/4] feat(frontend): right-align number, money and ID widgets in row list Numeric values are conventionally right-aligned in data tables for easier scanning and comparison of figures. Co-Authored-By: Claude Opus 4.6 --- .../table-display-fields/id/id.component.css | 13 ++++++++---- .../money/money.component.css | 6 ++++++ .../number/number.component.css | 20 +++++++++++++------ 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css index 277f14993..48f697bff 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css @@ -1,9 +1,14 @@ +:host { + text-align: right; +} + .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; } diff --git a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css index 8b1378917..3e04c089c 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css @@ -1 +1,7 @@ +:host { + text-align: right; +} +.field-display { + justify-content: flex-end; +} diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css index bc463bdea..5a46c7b23 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css @@ -1,11 +1,19 @@ +:host { + text-align: right; +} + +.field-display { + justify-content: flex-end; +} + .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; } From a5f5d04453e15bffe0c0b2099263561b68f1fc06 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 6 Feb 2026 13:23:01 +0000 Subject: [PATCH 4/4] fix(frontend): show copy button on left side for right-aligned widgets 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 --- .../ui-components/table-display-fields/id/id.component.css | 5 +++++ .../table-display-fields/money/money.component.css | 5 +++++ .../table-display-fields/number/number.component.css | 5 +++++ 3 files changed, 15 insertions(+) diff --git a/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css index 48f697bff..1e1b6b2d1 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css @@ -12,3 +12,8 @@ font-weight: 500; flex-grow: 1; } + +.field-copy-button { + right: auto; + left: 0; +} diff --git a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css index 3e04c089c..8732bf81b 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css @@ -5,3 +5,8 @@ .field-display { justify-content: flex-end; } + +.field-copy-button { + right: auto; + left: 0; +} diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css index 5a46c7b23..11777f1f0 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css @@ -6,6 +6,11 @@ justify-content: flex-end; } +.field-copy-button { + right: auto; + left: 0; +} + .out-of-threshold { display: flex; align-items: center;