UX: Full width/height modal (#61)

javascripts/discourse/components/spreadsheet-editor.hbs

@@ -4,27 +4,6 @@
   class="insert-table-modal"
 >
   <:body>
-    {{#if this.isEditingTable}}
-      <div class="edit-reason">
-        <DButton
-          @icon="info-circle"
-          @title={{theme-prefix
-            "discourse_table_builder.edit.modal.trigger_reason"
-          }}
-          @action={{this.showEditReasonField}}
-          @class="btn btn-icon btn-flat no-text btn-edit-reason"
-        />
-        {{#if this.showEditReason}}
-          <TextField
-            @value={{this.editReason}}
-            @placeholderKey={{theme-prefix
-              "discourse_table_builder.edit.modal.reason"
-            }}
-          />
-        {{/if}}
-      </div>
-    {{/if}}
-
     <ConditionalLoadingSpinner @condition={{this.loading}}>
       <div
         {{did-insert this.createSpreadsheet}}
@@ -50,6 +29,26 @@
     </div>
 
     <div class="secondary-actions">
+      {{#if this.isEditingTable}}
+        <div class="edit-reason">
+          <DButton
+            @icon="info-circle"
+            @title={{theme-prefix
+              "discourse_table_builder.edit.modal.trigger_reason"
+            }}
+            @action={{this.showEditReasonField}}
+            @class="btn-edit-reason"
+          />
+          {{#if this.showEditReason}}
+            <TextField
+              @value={{this.editReason}}
+              @placeholderKey={{theme-prefix
+                "discourse_table_builder.edit.modal.reason"
+              }}
+            />
+          {{/if}}
+        </div>
+      {{/if}}
       <DPopover>
         <DButton class="trigger" @icon="question" />
         <ul>

javascripts/discourse/components/spreadsheet-editor.js

@@ -60,11 +60,7 @@ export default class SpreadsheetEditor extends Component {
 
   @action
   showEditReasonField() {
-    if (this.showEditReason) {
-      this.showEditReason = false;
-    } else {
-      this.showEditReason = true;
-    }
+    this.showEditReason = !this.showEditReason;
   }
 
   @action

scss/modal/insert-table-modal.scss

@@ -25,24 +25,16 @@
 
   .modal-inner-container {
     --modal-max-width: $reply-area-max-width;
-    width: $reply-area-max-width;
+    width: 100%;
+    height: 100%;
 
-    @media screen and (max-width: 1200px) {
-      --modal-max-width: 90%;
-      width: 100vw;
-    }
+    display: grid;
+    grid-template-rows: auto 1fr auto;
   }
 
   .modal-body {
     padding: 0;
-    margin: 0.5em;
-  }
-
-  .btn-edit-reason {
-    background: none;
-    .d-icon {
-      color: var(--primary-high);
-    }
+    margin: 0;
   }
 
   .modal-footer {
@@ -50,6 +42,26 @@
     align-items: center;
     justify-content: space-between;
 
+    .secondary-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      .edit-reason {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .btn {
+        margin-right: 0;
+      }
+
+      input {
+        margin: 0;
+      }
+    }
+
     .secondary-actions .tippy-content {
       h4 {
         color: var(--primary);
@@ -60,15 +72,4 @@
       }
     }
   }
-
-  .jexcel_container {
-    padding: 0.5em;
-    min-width: 100%;
-    .jexcel_content {
-      min-width: 100%;
-      table.jexcel {
-        min-width: 100%;
-      }
-    }
-  }
 }

scss/theme/jspreadsheet-theme.scss

@@ -254,3 +254,19 @@ table.jexcel > tbody > tr > td {
 .jcontextmenu > div:not(.contextmenu-line):last-child {
   display: none;
 }
+
+.jexcel_container {
+  padding: 0.5em;
+  min-width: 100%;
+  .jexcel_content {
+    min-width: 100%;
+    padding: 0;
+    table.jexcel {
+      min-width: 100%;
+    }
+  }
+}
+
+.jexcel_container {
+  padding: 0;
+}