[patch][v16.21.12] Table Alignment Fixes (#144)

Toniq-Labs · Oct 18, 2024 · fbe6b4a · fbe6b4a
1 parent 310e512
commit fbe6b4a
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.21.11",
+    "version": "16.21.12",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.21.11",
+    "version": "16.21.12",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts b/packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts
@@ -450,8 +450,8 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
                                 left: ${unsafeCSS(`${state.rowStyles[itemKey]?.left}px`)};
                             `;
 
-                            const rowItemWidthStyle = css`
-                                width: ${index >= enabledColumns.length - 1
+                            const rowItemMinWidthStyle = css`
+                                min-width: ${index >= enabledColumns.length - 1
                                     ? unsafeCSS('unset')
                                     : unsafeCSS(`${state.rowStyles[itemKey]?.width}px`)};
                             `;
@@ -472,9 +472,9 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
                                     })}
                                     style=${ifDefined(
                                         rowItemLeftStyle ||
-                                            rowItemWidthStyle ||
+                                            rowItemMinWidthStyle ||
                                             rowItemMaxWidthStyle
-                                            ? `${rowItemLeftStyle ? rowItemLeftStyle : ''} ${rowItemWidthStyle ? rowItemWidthStyle : ''} ${rowItemMaxWidthStyle ? rowItemMaxWidthStyle : ''}`
+                                            ? `${rowItemLeftStyle ? rowItemLeftStyle : ''} ${rowItemMinWidthStyle ? rowItemMinWidthStyle : ''} ${rowItemMaxWidthStyle ? rowItemMaxWidthStyle : ''}`
                                             : undefined,
                                     )}
                                 >
@@ -616,7 +616,7 @@ function getElementWidthWithMarginPadding(element: HTMLElement) {
     const gap = parseFloat(style.gap) || 0;
 
     return {
-        width: width + marginLeft + marginRight + gap,
+        width: width + marginLeft + marginRight + paddingLeft + paddingRight + gap,
         margin: {
             left: marginLeft,
             right: marginRight,

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.21.11",
+    "version": "16.21.12",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.21.11",
+    "version": "16.21.12",
     "private": true,
     "scripts": {
         "compile": "virmator compile",