fix various elements that break page width

datadryad · Jul 5, 2024 · d71945a · d71945a
1 parent bdc7b5a
commit d71945a
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>