From a8f27d9131fe064b20a3a900dc8837a6ea5f3677 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 12 Aug 2022 14:11:27 -0400
Subject: [PATCH] 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>
---
 .../discourse/components/spreadsheet-editor.js      |  9 +++++++++
 locales/en.yml                                      |  1 +
 scss/modal/insert-table-modal.scss                  | 13 ++++++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/javascripts/discourse/components/spreadsheet-editor.js b/javascripts/discourse/components/spreadsheet-editor.js
index e86113c..123fa2a 100644
--- a/javascripts/discourse/components/spreadsheet-editor.js
+++ b/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);
diff --git a/locales/en.yml b/locales/en.yml
index 23d454a..b69732b 100644
--- a/locales/en.yml
+++ b/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"
diff --git a/scss/modal/insert-table-modal.scss b/scss/modal/insert-table-modal.scss
index d760faf..fcd20cd 100644
--- a/scss/modal/insert-table-modal.scss
+++ b/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%;
+      }
+    }
+  }
 }