From 8d3f9be77554f4936eed2f715e252328b6f467c1 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Wed, 26 Nov 2025 15:02:59 +0200
Subject: [PATCH 1/3] table view: fix scrolls and dark theme

---
 .../components/dashboard/dashboard.component.css  | 12 ++++++++----
 .../db-table-row-view.component.css               |  4 ++--
 .../db-table-view/db-table-view.component.css     |  2 +-
 .../foreign-key/foreign-key.component.css         | 15 ++++++++++++---
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css
index 3f9572788..55bfbcf55 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.css
+++ b/frontend/src/app/components/dashboard/dashboard.component.css
@@ -1,3 +1,7 @@
+:host {
+    margin-bottom: -60px;
+}
+
 .mat-sidenav-container {
     height: 100%;
     /* height: calc(100vh - 56px); */
@@ -50,10 +54,6 @@
     text-decoration: none;
 }
 
-.mat-sidenav-content {
-    padding: 0 24px;
-}
-
 .toggle-button {
     margin-top: 8px;
     margin-left: 12px;
@@ -116,6 +116,10 @@
 
 .table-preview-content {
     flex-grow: 1;
+    padding-bottom: 24px;
+    height: calc(100vh - 44px);
+    padding: 0 24px;
+    overflow-y: scroll;
     width: 100%;
 }
 
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
index 0fd0eaca7..fb231442d 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
@@ -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);
 }
 
@@ -31,7 +31,7 @@
         left: 0;
         min-height: initial;
         max-height: initial;
-        width: calc(100vw - 24px);
+        width: 100vw;
         z-index: 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 508ee8c9d..ad8959c5f 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
@@ -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);
     }
 }
 
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 e818ae5cc..e534da063 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
@@ -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 {

From 9feaeb48b952c67fd80f6e6d1cd02a49ff112e44 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Wed, 26 Nov 2025 15:12:22 +0200
Subject: [PATCH 2/3] inputs: add border radius

---
 .../db-table-view/db-table-widgets/widget/widget.component.css  | 2 +-
 .../ui-components/record-edit-fields/code/code.component.css    | 2 +-
 .../record-edit-fields/json-editor/json-editor.component.css    | 2 +-
 frontend/src/custom-theme.scss                                  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
index 4ceacd56f..06134d524 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
@@ -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;
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css
index 27277e518..876a91d2e 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css
@@ -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;
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css
index 27277e518..876a91d2e 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css
@@ -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;
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index c4304fe5b..173a13add 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -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) {

From f25e510dbdba9925c9ff3c7d6b95cf0405166cf5 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Wed, 26 Nov 2025 15:53:44 +0200
Subject: [PATCH 3/3] table view: update action buttons layout

---
 .../db-table-view/db-table-view.component.css   | 17 ++++++++++++++---
 .../db-table-view/db-table-view.component.html  |  4 ++++
 .../dashboard/db-tables-data-source.ts          |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)

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 ad8959c5f..3037e5abd 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
@@ -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);
     }
 }
 
@@ -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);
     }
 }
 
@@ -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;
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
index b345e7e14..0285febb3 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
@@ -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">
@@ -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]}}"
@@ -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]}}"
@@ -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"
diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts
index 112611cf3..a44c3d1b2 100644
--- a/frontend/src/app/components/dashboard/db-tables-data-source.ts
+++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -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);
     return totalActionsCount === 0 ? '0' : `${lengthValue}px`
   }