From 49b9e833e88baa0d11a5bad688c40d8e2ae0b079 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Tue, 16 Sep 2025 16:12:13 +0000
Subject: [PATCH] feat(styles): enhance actions column with sticky positioning
 and responsive layout adjustments

---
 ts_web/elements/dees-table/dees-table.ts |  4 ++--
 ts_web/elements/dees-table/styles.ts     | 26 ++++++++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/ts_web/elements/dees-table/dees-table.ts b/ts_web/elements/dees-table/dees-table.ts
index f34ec91..a426a9b 100644
--- a/ts_web/elements/dees-table/dees-table.ts
+++ b/ts_web/elements/dees-table/dees-table.ts
@@ -324,7 +324,7 @@ export class DeesTable<T> extends DeesElement {
                       })}
                     ${(() => {
                       if (this.dataActions && this.dataActions.length > 0) {
-                        return html` <th>Actions</th> `;
+                        return html` <th class="actionsCol">Actions</th> `;
                       }
                     })()}
                   </tr>
@@ -464,7 +464,7 @@ export class DeesTable<T> extends DeesElement {
                         ${(() => {
                           if (this.dataActions && this.dataActions.length > 0) {
                             return html`
-                              <td>
+                              <td class="actionsCol">
                                 <div class="actionsContainer">
                                   ${this.getActionsForType('inRow').map(
                                     (actionArg) => html`
diff --git a/ts_web/elements/dees-table/styles.ts b/ts_web/elements/dees-table/styles.ts
index 15b2422..79c75ad 100644
--- a/ts_web/elements/dees-table/styles.ts
+++ b/ts_web/elements/dees-table/styles.ts
@@ -117,7 +117,10 @@ export const tableStyles: CSSResult[] = [
       }
 
       .tableScroll {
-        /* no overflow by default to preserve current layout */
+        /* enable horizontal scroll only when content exceeds width */
+        overflow-x: auto;
+        /* prevent vertical scroll inside the table container */
+        overflow-y: hidden;
       }
       :host([sticky-header]) .tableScroll {
         max-height: var(--table-max-height, 360px);
@@ -125,7 +128,9 @@ export const tableStyles: CSSResult[] = [
       }
 
       table {
-        width: 100%;
+        /* allow table to grow wider than container so actions column can stick */
+        width: max-content;
+        min-width: 100%;
         caption-side: bottom;
         font-size: 14px;
         border-collapse: separate;
@@ -188,8 +193,8 @@ export const tableStyles: CSSResult[] = [
       td::after {
         content: '';
         position: absolute;
-        top: -1000px;
-        bottom: -1000px;
+        top: 0;
+        bottom: 0;
         left: 0;
         right: 0;
         background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
@@ -224,6 +229,19 @@ export const tableStyles: CSSResult[] = [
       :host([show-grid]) tbody tr:first-child td {
         border-top: none;
       }
+
+      /* Sticky Actions column (right pinned) */
+      thead th.actionsCol,
+      tbody td.actionsCol {
+        position: sticky;
+        right: 0;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+      }
+      thead th.actionsCol { z-index: 3; }
+      tbody td.actionsCol {
+        z-index: 1;
+        box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
       
       tbody tr.selected {
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};