From 55b80497a36412f121d6da9f9e287f0ad935ad72 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 27 Sep 2025 00:09:39 +0300
Subject: [PATCH] table list: fix Collapse button alignment

---
 .../dashboard/dashboard.component.css         | 11 ++-----
 .../dashboard/dashboard.component.html        | 31 +++++++++----------
 .../db-table-row-view.component.html          |  4 +--
 .../db-table-view.component.html              |  2 +-
 .../saved-filters-panel.component.html        |  2 +-
 .../db-tables-list.component.css              |  2 +-
 6 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css
index 066b922fe..4db64c67b 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.css
+++ b/frontend/src/app/components/dashboard/dashboard.component.css
@@ -48,14 +48,9 @@
     padding: 0 24px;
 }
 
-.toggle-button-position {
-    display: flex;
-    justify-content: center;
-    margin-top: 24px;
-}
-
-.toggle-button_opened {
-    width: calc(100% - 32px);
+.toggle-button {
+    margin-top: 8px;
+    margin-left: 12px;
 }
 
 .dashboard {
diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 64eefe018..87911c778 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -47,27 +47,26 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
         <mat-sidenav #sideList mode="side" [(opened)]="shownTableTitles"
             class="table-list-sidenav"
             [ngClass]="{'side-bar_collapsed': !shownTableTitles}">
-            <div class="toggle-button-position">
-                <button mat-button type="button" *ngIf="shownTableTitles; else collapsedButton"
-                    class="toggle-button_opened"
+            <button mat-button type="button" *ngIf="shownTableTitles; else collapsedButton"
+                class="toggle-button"
+                (click)="toggleSideBar()"
+                angulartics2On="click"
+                angularticsAction="Dashboard: toggle sidebar"
+                [angularticsProperties]="{'collapsed': !shownTableTitles}">
+                Collapse
+                <mat-icon>chevron_left</mat-icon>
+            </button>
+
+            <ng-template #collapsedButton>
+                <button mat-icon-button type="button"
+                    class="toggle-button"
                     (click)="toggleSideBar()"
                     angulartics2On="click"
                     angularticsAction="Dashboard: toggle sidebar"
                     [angularticsProperties]="{'collapsed': !shownTableTitles}">
-                    Collapse
-                    <mat-icon>chevron_left</mat-icon>
+                    <mat-icon>chevron_right</mat-icon>
                 </button>
-
-                <ng-template #collapsedButton>
-                    <button mat-icon-button type="button"
-                        (click)="toggleSideBar()"
-                        angulartics2On="click"
-                        angularticsAction="Dashboard: toggle sidebar"
-                        [angularticsProperties]="{'collapsed': !shownTableTitles}">
-                        <mat-icon>chevron_right</mat-icon>
-                    </button>
-                </ng-template>
-            </div>
+            </ng-template>
             <app-db-tables-list
                 [collapsed]="!shownTableTitles"
                 [tables]="tablesList"
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index 5c3e992fd..df273f22e 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -82,7 +82,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
     <ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
         <div *ngFor="let column of columns; let i = index" class="row-preview-sidebar__field">
             <strong>{{column.normalizedTitle}}</strong>
-            <ng-container *ngIf="isForeignKey(column.title); else recordContent">
+            <ng-container *ngIf="isForeignKey(column.title); else recordContent" data-hj-suppress>
                 <app-foreign-key-record-view
                     [key]="i"
                     link="/dashboard/{{selectedRow.connectionID}}/{{selectedRow.foreignKeys[column.title]?.referenced_table_name}}/entry"
@@ -92,7 +92,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                 </app-foreign-key-record-view>
             </ng-container>
 
-            <ng-template #recordContent>
+            <ng-template #recordContent data-hj-suppress>
                 <ndc-dynamic *ngIf="isWidget(column.title) && selectedRow.widgets[column.title].widget_type; else simpleValue"
                     [ndcDynamicComponent]="UIwidgets[selectedRow.widgets[column.title].widget_type]"
                     [ndcDynamicInputs]="{
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 208a5d261..a52a55a2d 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
@@ -171,7 +171,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
 </div>
 
 <div *ngIf="getFiltersCount(activeFilters) !== 0 && !hasSavedFilterActive" class="active-filters">
-    <mat-chip-row *ngFor="let activeFilter of activeFilters | keyvalue"
+    <mat-chip-row *ngFor="let activeFilter of activeFilters | keyvalue" data-hj-suppress
         (removed)="removeFilter.emit(activeFilter.key)">
         {{ getFilter(activeFilter) }}
         <button matChipRemove>
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
index 7b307f10b..0f8426c48 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
@@ -125,7 +125,7 @@
             </div>
         </form>
         <div class="static-filters">
-            <mat-chip *ngFor="let filter of savedFilterMap[selectedFilterSetId]?.staticFilters" class="static-filter-chip">
+            <mat-chip *ngFor="let filter of savedFilterMap[selectedFilterSetId]?.staticFilters" class="static-filter-chip" data-hj-suppress>
                 {{ getFilter(filter) }}
             </mat-chip>
         </div>
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
index 12f0bb39e..e12d3204d 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
@@ -87,7 +87,7 @@
 
 .search-input {
     background-color: transparent;
-    margin-top: 12px;
+    margin-top: 4px;
     margin-left: 16px;
     margin-bottom: -24px;
     width: calc(100% - 32px);