@moises.ai/design-system 3.10.0 → 3.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/DataTable/DataTable.jsx

@@ -160,7 +160,8 @@ const DataRow = React.memo(function DataRow({
           key={column.id}
           className={classNames(
             styles.projectCell,
-            index === 0 ? styles.columnProject : styles.dataColumn,
+              index === 0 ? styles.columnProject : styles.dataColumn,
+              index === 1 ? styles.firstDataColumn : null,
             { [styles.sortedColumn]: sortedKey === column.id },
           )}
           data-column-id={column.id}
@@ -435,7 +436,8 @@ export const DataTable = ({
               key={column.id}
               className={classNames(styles.columnHeaderCell, {
                 [styles.columnProject]: index === 0,
-                [styles.dataColumn]: index !== 0,
+              [styles.dataColumn]: index !== 0,
+              [styles.firstDataColumn]: index === 1,
                 [styles.sortedColumn]: toUpperCase(sortedKey) === toUpperCase(column.id),
               })}
             >

package/src/components/DataTable/DataTable.module.css

@@ -178,7 +178,7 @@
 
 .DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
 .DataTable :global(.rt-TableCell:nth-child(2)) {
-  max-width: 565px;
+  max-width: 480px;
   min-width: 260px;
   box-shadow: none;
   width: 100%;
@@ -401,7 +401,7 @@
     display: table-cell !important;
   }
 
-  .sortedColumn {
+  .dataColumn.sortedColumn {
     display: table-cell !important;
   }
 
@@ -413,4 +413,10 @@
   .dropdownTriggerWrapperIcon {
     opacity: 1;
   }
+}
+
+@media (max-width: 1124px) {
+  .firstDataColumn {
+    display: table-cell !important;
+  }
 }