Merge branch 'wrap-compact-collapse'

Author: RafaelGB

src/components/cellTypes/FormulaCell.tsx

@@ -46,7 +46,13 @@ const FormulaCell = (mdProps: CellComponentProps) => {
   return (
     <span
       ref={formulaRef}
-      className={`${c("md_cell " + getAlignmentClassname(tableColumn.config))}`}
+      className={`${c(
+        "md_cell " +
+          getAlignmentClassname(
+            tableColumn.config,
+            configInfo.getLocalSettings()
+          )
+      )}`}
       key={`formula_${cell.id}`}
     />
   );

src/components/cellTypes/NumberCell.tsx

@@ -70,11 +70,15 @@ const NumberCell = (props: CellComponentProps) => {
       onChange={handleOnChange}
       onKeyDown={handleKeyDown}
       onBlur={handleOnBlur}
-      className={c(getAlignmentClassname(tableColumn.config))}
+      className={c(
+        getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
+      )}
     />
   ) : (
     <span
-      className={c(getAlignmentClassname(tableColumn.config))}
+      className={c(
+        getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
+      )}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
     >

src/components/cellTypes/TextCell.tsx

@@ -73,7 +73,9 @@ const TextCell = (props: CellComponentProps) => {
       ref={containerCellRef}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
-      className={c(getAlignmentClassname(tableColumn.config))}
+      className={c(
+        getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
+      )}
     />
   );
 };

src/helpers/StylesHelper.ts

@@ -1,5 +1,6 @@
 import { ConfigColumn } from "cdm/FolderModel";
-import { COLUMN_ALIGNMENT_OPTIONS, DatabaseCore, MetadataLabels } from "helpers/Constants";
+import { LocalSettings } from "cdm/SettingsModel";
+import { CellSizeOptions, COLUMN_ALIGNMENT_OPTIONS, DatabaseCore, MetadataLabels } from "helpers/Constants";
 
 /**
  * Wrap the classname of css elements
@@ -42,15 +43,15 @@ export function getLabelHeader(input: string) {
     return labelCandidate === undefined ? input : labelCandidate[1];
 }
 
-export function getAlignmentClassname(configColumn: ConfigColumn) {
+export function getAlignmentClassname(configColumn: ConfigColumn, localSettings: LocalSettings) {
     const classes: string[] = [];
     classes.push(
         configColumn.content_alignment === undefined ?
             COLUMN_ALIGNMENT_OPTIONS.LEFT :
             configColumn.content_alignment
     );
     classes.push(
-        configColumn.wrap_content ?
+        (configColumn.wrap_content && localSettings.cell_size !== CellSizeOptions.COMPACT) ?
             COLUMN_ALIGNMENT_OPTIONS.WRAP :
             COLUMN_ALIGNMENT_OPTIONS.NOWRAP
     );

styles.css

@@ -376,15 +376,21 @@ div.database-plugin__checkbox {
   padding: 0.6rem;
 }
 
-.database-plugin__sticky_first_column .database-plugin__td:nth-child(2),
-.database-plugin__sticky_first_column .database-plugin__th:nth-child(2),
 .database-plugin__table .database-plugin__td:first-child,
 .database-plugin__table .database-plugin__th:first-child {
   position: sticky;
   left: 0;
   z-index: 1;
 }
 
+.database-plugin__sticky_first_column .database-plugin__td:nth-child(2),
+.database-plugin__sticky_first_column .database-plugin__th:nth-child(2) {
+  position: sticky;
+  z-index: 2;
+  left: 30px;
+  background-color: var(--background-secondary);
+}
+
 .database-plugin__table {
   position: relative;
   top: 2.65rem;