From acb3d38ad80454466c417b250e5457ddcb05ae69 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Fri, 26 Sep 2025 18:32:18 +0300
Subject: [PATCH] Settings page: move Columns to hide settings to the Table
 view category and minor spacing and alignment fixes

---
 .../db-table-settings.component.css           | 10 ++++++++++
 .../db-table-settings.component.html          | 20 +++++++++----------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
index 883c278b6..d267f61af 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
@@ -5,6 +5,10 @@
     padding: 36px 0 0;
 }
 
+.settings-page .mat-mdc-form-field-bottom-align::before {
+    margin-left: 0;
+}
+
 .settings-form {
     width: 100%;
 }
@@ -151,6 +155,11 @@
     margin-top: -20px;
 }
 
+.mat-form-field_excludedFields {
+    margin-top: 16px;
+    margin-bottom: 20px;
+}
+
 .actions {
     position: fixed;
     left: 0;
@@ -163,6 +172,7 @@
     height: 64px;
     padding: 0 max(calc(50vw - 325px), 10%);
     width: 100vw;
+    z-index: 2;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
index f70523a4d..d4db6bdd5 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
@@ -144,6 +144,16 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
             <mat-hint>Choose which columns allow you to sort their values by pressing the arrow next to the column's name. Columns which aren't selected will not be sortable.</mat-hint>
             </mat-form-field>
 
+            <mat-form-field appearance="outline" class="mat-form-field_excludedFields">
+                <mat-label>Columns to hide</mat-label>
+                <mat-select multiple
+                    name="excluded_fields"
+                    [(ngModel)]="tableSettings.excluded_fields">
+                    <mat-option *ngFor="let field of fields_to_exclude" [value]="field">{{field}}</mat-option>
+                </mat-select>
+                <mat-hint>Choose the columns you want to hide from the "Table" view and the "Edit row" view. This also removes the option to edit them.</mat-hint>
+            </mat-form-field>
+
             <h2 class="mat-heading-2" style="margin-bottom: -4px; margin-top: 12px">"Edit row" behavior</h2>
             <p class="mat-body-1" style="margin-top: -16px; margin-bottom: 0; color: rgba(0,0,0,0.64)">You can edit a row by clicking on the "pencil" icon on the right.</p>
             <mat-form-field appearance="outline">
@@ -156,16 +166,6 @@ <h2 class="mat-heading-2" style="margin-bottom: -4px; margin-top: 12px">"Edit ro
                 <mat-hint>Choose the columns Rocketadmin scans within a related table when using the foreign keys box.</mat-hint>
             </mat-form-field>
 
-            <mat-form-field appearance="outline">
-                <mat-label>Columns to hide</mat-label>
-                <mat-select multiple
-                    name="excluded_fields"
-                    [(ngModel)]="tableSettings.excluded_fields">
-                    <mat-option *ngFor="let field of fields_to_exclude" [value]="field">{{field}}</mat-option>
-                </mat-select>
-                <mat-hint>Choose the columns you want to hide from the "Table" view and the "Edit row" view. This also removes the option to edit them.</mat-hint>
-            </mat-form-field>
-
             <mat-form-field appearance="outline">
                 <mat-label>Read-only fields</mat-label>
                 <mat-select multiple