Merge pull request #1756 from datadryad/overflow

Adjust elements to not break page width

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 {

app/assets/stylesheets/scss/_columns.scss

@@ -25,10 +25,12 @@
 
 .c-columns__content, #page-content {
   padding-left: 2px;
+  overflow: auto;
+  overflow-wrap: anywhere;
+
   @include bp(screen3) {
     flex: 0 1 90ch;
     padding-right: 5ch;
-    overflow: visible;
   }
 }
 

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;
       }

app/assets/stylesheets/scss/_select.scss

@@ -1,5 +1,9 @@
 // ##### Select Content Object ##### //
 
+select {
+	max-width: 100%;
+}
+
 .o-select {
 	margin: 0 0 20px;
 }

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,

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

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 %>

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>