Skip to content

Fixes #1452

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 4 commits into from
Nov 27, 2025
Merged

Fixes #1452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d3f9be
table view: fix scrolls and dark theme
lyubov-voloshko Nov 26, 2025
9feaeb4
inputs: add border radius
lyubov-voloshko Nov 26, 2025
f25e510
table view: update action buttons layout
lyubov-voloshko Nov 26, 2025
40aa568
Merge branch 'main' into fixes
lyubov-voloshko Nov 27, 2025
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
12 changes: 8 additions & 4 deletions frontend/src/app/components/dashboard/dashboard.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:host {
margin-bottom: -60px;
}

.mat-sidenav-container {
height: 100%;
/* height: calc(100vh - 56px); */
Expand Down Expand Up @@ -50,10 +54,6 @@
text-decoration: none;
}

.mat-sidenav-content {
padding: 0 24px;
}

.toggle-button {
margin-top: 8px;
margin-left: 12px;
Expand Down Expand Up @@ -116,6 +116,10 @@

.table-preview-content {
flex-grow: 1;
padding-bottom: 24px;
height: calc(100vh - 44px);
padding: 0 24px;
Comment on lines +119 to +121
Copy link

Copilot AI Nov 27, 2025

Choose a reason for hiding this comment

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

The padding-bottom property is declared here but then immediately overridden by the padding shorthand property on line 121. The padding-bottom: 24px will have no effect. Consider removing this redundant line or combining both into a single padding declaration like padding: 0 24px 24px 24px if bottom padding is needed.

Suggested change
padding-bottom: 24px;
height: calc(100vh - 44px);
padding: 0 24px;
padding: 0 24px 24px 24px;
height: calc(100vh - 44px);
/* padding-bottom: 24px; removed, combined into padding shorthand */

Copilot uses AI. Check for mistakes.
overflow-y: scroll;
width: 100%;
}

Expand Down
4 changes: 2 additions & 2 deletions .../app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
background-color: var(--mat-sidenav-content-background-color);
border-left: solid 1px rgba(0, 0, 0, 0.12);
opacity: 1;
transform: translateX(24px);
transform: translateX(0);
width: clamp(200px, 22vw, 400px);
}

Expand All @@ -31,7 +31,7 @@
left: 0;
min-height: initial;
max-height: initial;
width: calc(100vw - 24px);
width: 100vw;
z-index: 2;
}
}
Expand Down
19 changes: 15 additions & 4 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 @@ -201,7 +201,7 @@

@media (prefers-color-scheme: light) {
.db-table-manage-columns-button__count {
color: rgba(0, 0, 0, 0.64);
color: rgba(0, 0, 0, 0.52);
}
}

Expand Down Expand Up @@ -289,7 +289,7 @@

@media (prefers-color-scheme: dark) {
.db-table ::ng-deep .db-table-row:hover {
--hover-color: var(--color-primaryPalette-500);
--hover-color: var(--color-primaryPalette-900);
}
}

Expand Down Expand Up @@ -429,13 +429,13 @@ th.mat-header-cell, td.mat-cell {

@media (prefers-color-scheme: light) {
.db-table-cell-actions {
color: #4f4f4f;
color: rgba(0,0,0,0.64);
}
}

@media (prefers-color-scheme: dark) {
.db-table-cell-actions {
color: #cdcdcd;
color: rgba(255,255,255,0.64);
}
}

Expand Down Expand Up @@ -466,6 +466,17 @@ th.mat-header-cell, td.mat-cell {
justify-content: flex-end;
}

.db-table-cell-action-button {
--mdc-icon-button-state-layer-size: 30px !important;
--mdc-icon-button-icon-size: 20px !important;
}

.db-table-cell-action-button ::ng-deep .mat-icon {
font-size: 20px;
height: 20px;
width: 20px;
}

.table-cell-content {
overflow: hidden;
white-space: nowrap;
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
<mat-cell *matCellDef="let element; let i = index" class="db-table-cell-actions">
<ng-container *ngIf="tableData.tableActions && tableData.tableActions.length">
<button type="button" mat-icon-button *ngFor="let action of tableData.tableActions"
class="db-table-cell-action-button"
[matTooltip]="action.title"
(click)="handleAction($event, action, element)">
<mat-icon fontSet="material-icons-outlined">
Expand All @@ -292,6 +293,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
<a mat-icon-button *ngIf="tableData.permissions.edit"
routerLink="/dashboard/{{connectionID}}/{{name}}/entry"
[queryParams]="tableData.getQueryParams(element)"
class="db-table-cell-action-button"
attr.data-testid="table-edit-record-{{i}}-link"
attr.data-test-primary-key-name="{{tableData.keyAttributes[0]?.column_name}}"
attr.data-test-primary-key-value="{{element[tableData.keyAttributes[0]?.column_name]}}"
Expand All @@ -304,6 +306,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
<a mat-icon-button *ngIf="tableData.permissions.add"
routerLink="/dashboard/{{connectionID}}/{{name}}/entry"
[queryParams]="tableData.getQueryParams(element, 'dub')"
class="db-table-cell-action-button"
attr.data-testid="table-duplicate-record-{{i}}-link"
attr.data-test-primary-key-name="{{tableData.keyAttributes[0]?.column_name}}"
attr.data-test-primary-key-value="{{element[tableData.keyAttributes[0]?.column_name]}}"
Expand All @@ -314,6 +317,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
<mat-icon fontSet="material-icons-outlined">difference</mat-icon>
</a>
<button type="button" mat-icon-button *ngIf="tableData.permissions.delete && tableData.canDelete"
class="db-table-cell-action-button"
attr.data-testid="table-delete-record-{{i}}-button"
angulartics2On="click"
angularticsAction="Dashboard: delete row is clicked"
Expand Down
2 changes: 1 addition & 1 deletion ...d/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
.code-editor-box {
display: block;
border: 1px solid rgba(0, 0, 0, 0.38);
border-radius: 0;
border-radius: 4px;
margin-bottom: 20px;
overflow-y: auto;
resize: vertical;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/dashboard/db-tables-data-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ export class TablesDataSource implements DataSource<Object> {
getActionsColumnWidth(actions, permissions) {
const defaultActionsCount = permissions.edit + permissions.add + (!!permissions.delete && !!this.canDelete);
const totalActionsCount = actions.length + defaultActionsCount;
const lengthValue = ((totalActionsCount * 36) + 32);
const lengthValue = ((totalActionsCount * 30) + 32);
Copy link

Copilot AI Nov 27, 2025

Choose a reason for hiding this comment

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

[nitpick] The magic number 30 here corresponds to the button size changes in db-table-view.component.css (lines 470-471 where --mdc-icon-button-state-layer-size is set to 30px). Consider extracting this value as a CSS custom property (e.g., --action-button-size: 30px) to maintain consistency and make future changes easier.

Copilot uses AI. Check for mistakes.
return totalActionsCount === 0 ? '0' : `${lengthValue}px`
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.code-editor-box {
display: block;
border: 1px solid rgba(0, 0, 0, 0.38);
border-radius: 0;
border-radius: 4px;
margin-top: 4px;
margin-bottom: 20px;
/* overflow-y: auto;
Expand Down
2 changes: 1 addition & 1 deletion ...src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.code-editor-box {
display: block;
border: 1px solid rgba(0, 0, 0, 0.38);
border-radius: 0;
border-radius: 4px;
margin-top: 4px;
margin-bottom: 20px;
/* overflow-y: auto;
Expand Down
15 changes: 12 additions & 3 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
Expand Up @@ -13,9 +13,18 @@
transition: background 100ms, border-color 100ms;
}

.foreign-key-button:hover{
background-color: var(--color-accentedPalette-100);
border: 1px solid var(--color-accentedPalette-300);
@media (prefers-color-scheme: dark) {
.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_selected {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/custom-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ html {
--mdc-filled-button-container-shape: 4px;
--mdc-outlined-button-container-shape: 4px;
--mdc-text-button-container-shape: 4px;
--mdc-outlined-text-field-container-shape: 0px !important;
--mdc-outlined-text-field-container-shape: 4px !important;
}

@media (prefers-color-scheme: dark) {
Expand Down
Loading