feat(styles): enhance actions column with sticky positioning and responsive layout adjustments

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%)')};