From d71945a11dcb59bee861bff397f8d40a4f42c795 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <hamelers@ebi.ac.uk>
Date: Sat, 6 Jul 2024 00:56:44 +0200
Subject: [PATCH 1/2] fix various elements that break page width

---
 app/assets/stylesheets/scss/_admin-layout.scss        | 1 +
 app/assets/stylesheets/scss/_columns.scss             | 3 ++-
 app/assets/stylesheets/scss/_login.scss               | 8 ++++++--
 app/assets/stylesheets/scss/_select.scss              | 4 ++++
 app/views/stash_engine/shared/_change_tenant.html.erb | 2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/scss/_admin-layout.scss b/app/assets/stylesheets/scss/_admin-layout.scss
index 13315de6df..619afc86b2 100644
--- a/app/assets/stylesheets/scss/_admin-layout.scss
+++ b/app/assets/stylesheets/scss/_admin-layout.scss
@@ -74,6 +74,7 @@
   gap: $spacing-base/2;
   align-items: center;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 #search-pair {
diff --git a/app/assets/stylesheets/scss/_columns.scss b/app/assets/stylesheets/scss/_columns.scss
index b659fa07b6..f7e56b7e5e 100644
--- a/app/assets/stylesheets/scss/_columns.scss
+++ b/app/assets/stylesheets/scss/_columns.scss
@@ -25,10 +25,11 @@
 
 .c-columns__content, #page-content {
   padding-left: 2px;
+  overflow-wrap: anywhere;
+
   @include bp(screen3) {
     flex: 0 1 90ch;
     padding-right: 5ch;
-    overflow: visible;
   }
 }
 
diff --git a/app/assets/stylesheets/scss/_login.scss b/app/assets/stylesheets/scss/_login.scss
index 21a3059714..dcc06a4581 100644
--- a/app/assets/stylesheets/scss/_login.scss
+++ b/app/assets/stylesheets/scss/_login.scss
@@ -31,22 +31,26 @@
     margin-left: 0;
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
 
     form {
       display: flex;
       flex-direction: row;
       width: 100%;
+      flex-wrap: wrap;
 
       & > div {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1ch;
       }
     }
 
     .c-auto_complete {
       width: 20rem;
-      margin-right: 10px;
-
       .c-input__text.c-ac__input_with_button, .c-ac__input-button {
         height: 45px;
       }
diff --git a/app/assets/stylesheets/scss/_select.scss b/app/assets/stylesheets/scss/_select.scss
index c113a40016..b4824cb4f7 100644
--- a/app/assets/stylesheets/scss/_select.scss
+++ b/app/assets/stylesheets/scss/_select.scss
@@ -1,5 +1,9 @@
 // ##### Select Content Object ##### //
 
+select {
+	max-width: 100%;
+}
+
 .o-select {
 	margin: 0 0 20px;
 }
diff --git a/app/views/stash_engine/shared/_change_tenant.html.erb b/app/views/stash_engine/shared/_change_tenant.html.erb
index 9966b57cdc..41220b7dfc 100644
--- a/app/views/stash_engine/shared/_change_tenant.html.erb
+++ b/app/views/stash_engine/shared/_change_tenant.html.erb
@@ -13,7 +13,7 @@
 <div id="edit-tenant-form" hidden>
   <p id="label_tenant_lookup">Select your Dryad member institution:</p>
   <div class="t-login__choose">
-    <div class="c-institution__container">
+    <div class="c-institution__container" style="width: 100%">
       <%= form_with(url: sso_path, method: :post, html: {style: 'justify-content: space-between;'}) do %>
         <%= react_component('components/TenantForm', {tenants: tenant_select}) %>
         <span style="flex-grow: 1"></span>

From 62e5a694f9c8165f0dbd86f359ed550a6c7560e2 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 8 Jul 2024 18:05:02 +0200
Subject: [PATCH 2/2] remove explicit widths from tinymce tables; wrap & scroll
 tinymce tables

---
 app/assets/stylesheets/scss/_columns.scss                  | 1 +
 .../react/components/MetadataEntry/Description.jsx         | 6 ++++++
 app/models/stash_datacite/description.rb                   | 7 +++++++
 app/views/stash_datacite/descriptions/_show.html.erb       | 6 +++---
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/scss/_columns.scss b/app/assets/stylesheets/scss/_columns.scss
index f7e56b7e5e..2859277e81 100644
--- a/app/assets/stylesheets/scss/_columns.scss
+++ b/app/assets/stylesheets/scss/_columns.scss
@@ -25,6 +25,7 @@
 
 .c-columns__content, #page-content {
   padding-left: 2px;
+  overflow: auto;
   overflow-wrap: anywhere;
 
   @include bp(screen3) {
diff --git a/app/javascript/react/components/MetadataEntry/Description.jsx b/app/javascript/react/components/MetadataEntry/Description.jsx
index 88c9e731ae..272bd4f437 100644
--- a/app/javascript/react/components/MetadataEntry/Description.jsx
+++ b/app/javascript/react/components/MetadataEntry/Description.jsx
@@ -113,6 +113,12 @@ export default function Description({
           table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | '
                   + 'tableinsertcolbefore tableinsertcolafter tabledeletecol',
           content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+          invalid_styles: {
+            table: 'width height',
+            tr: 'width height',
+            th: 'width height',
+            td: 'width height',
+          },
           branding: false,
           paste_block_drop: true,
           paste_preprocess,
diff --git a/app/models/stash_datacite/description.rb b/app/models/stash_datacite/description.rb
index 5da79b91d0..c0a772adc5 100644
--- a/app/models/stash_datacite/description.rb
+++ b/app/models/stash_datacite/description.rb
@@ -76,6 +76,13 @@ def update_search_words
       resource&.identifier&.update_search_words! if description_type == 'abstract' && saved_change_to_description?
     end
 
+    def display_desc
+      fragment = Nokogiri::HTML5.fragment(description)
+      tables = fragment.css('table')
+      tables.wrap('<div class="table-wrapper"></div>')
+      fragment.to_html
+    end
+
     after_save :update_search_words
   end
 end
diff --git a/app/views/stash_datacite/descriptions/_show.html.erb b/app/views/stash_datacite/descriptions/_show.html.erb
index 084a88685f..91c42a2b16 100644
--- a/app/views/stash_datacite/descriptions/_show.html.erb
+++ b/app/views/stash_datacite/descriptions/_show.html.erb
@@ -5,7 +5,7 @@
     <h3 class="o-heading__level2">Abstract</h3>
   <% end %>
   <div class="t-landing__text-wall <%= 'highlight' if highlight_fields.include?('abstract') %>">
-    <%= raw(abstract.description) %>
+    <%= raw(abstract.display_desc) %>
   </div>
 <% end %>
 
@@ -16,7 +16,7 @@
     <h3 class="o-heading__level2">Methods</h3>
   <% end %>
   <div class="t-landing__text-wall <%= 'highlight' if highlight_fields.include?('methods') %>">
-    <%= raw(methods.description) %>
+    <%= raw(methods.display_desc) %>
   </div>
 <% end %>
 
@@ -27,6 +27,6 @@
     <h3 class="o-heading__level2">Usage notes</h3>
   <% end %>
   <div class="t-landing__text-wall <%= 'highlight' if highlight_fields.include?('usage_notes') %>">
-    <%= raw(other.description) %>
+    <%= raw(other.display_desc) %>
   </div>
 <% end %>