UX: Default to wide tables (#16)

* UX: Default to 100% wide tables

* DEV: Change default spreadsheet rows/columns

Co-authored-by: Keegan George <kgeorge13@gmail.com>

javascripts/discourse/components/spreadsheet-editor.js

@@ -102,6 +102,9 @@ export default class SpreadsheetEditor extends Component {
       ["", "", ""],
       ["", "", ""],
       ["", "", ""],
+      ["", "", ""],
+      ["", "", ""],
+      ["", "", ""],
     ];
 
     const columns = [
@@ -123,6 +126,12 @@ export default class SpreadsheetEditor extends Component {
         ),
         width: this.defaultColWidth,
       },
+      {
+        title: I18n.t(
+          themePrefix("discourse_table_builder.default_header.col_4")
+        ),
+        width: this.defaultColWidth,
+      },
     ];
 
     return this.buildSpreadsheet(data, columns);

locales/en.yml

@@ -27,5 +27,6 @@ en:
       col_1: "Column 1"
       col_2: "Column 2"
       col_3: "Column 3"
+      col_4: "Column 4"
   theme_metadata:
     description: "Adds a button to the composer to easily build tables in markdown"

scss/modal/insert-table-modal.scss

@@ -25,7 +25,7 @@
 
   .modal-inner-container {
     --modal-max-width: 90%;
-    width: max-content;
+    width: 100vw;
   }
 
   .modal-body {
@@ -55,4 +55,15 @@
       }
     }
   }
+
+  .jexcel_container {
+    padding: 0.5em;
+    min-width: 100%;
+    .jexcel_content {
+      min-width: 100%;
+      table.jexcel {
+        min-width: 100%;
+      }
+    }
+  }
 }