Fix 400% reflow issues

archesproject · Oct 20, 2023 · 0e7ca75 · 0e7ca75
1 parent 64cb69e
commit 0e7ca75
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 19 deletions.
diff --git a/arches/app/media/css/arches.scss b/arches/app/media/css/arches.scss
@@ -2124,10 +2124,8 @@ div.final-cons-step-separator>h4 {
 
 .workbench-card-wrapper {
     flex: 1;
-    /*height: 100%;*/
     height: calc(100vh - 101px);
     position: relative;
-    /*overflow: hidden;*/
     overflow-x: hidden;
     overflow-y: auto;
     background-color: #fafafa;
@@ -2153,6 +2151,7 @@ div.final-cons-step-separator>h4 {
 
 .workbench-card-container {
     height: 100%;
+    width: calc(100% - 75px);
 }
 
 .workbench-card-container.workbench-card-container-sidepanel-active {
@@ -4250,7 +4249,6 @@ div.dropdown-menu.open {
     -ms-flex-direction: column;
     flex-direction: column;
     width: 100%;
-    height: calc(100vh - 50px);
     position: relative;
 }
 
@@ -7769,7 +7767,7 @@ a.mega-dropdown-toggle.disabled {
 }
 
 .report-toolbar-title {
-    font-size: 1.7rem;
+    font-size: 1.6rem;
     font-weight: 500;
     margin-top: 0px;
     width: 400px;
@@ -8625,10 +8623,6 @@ a.clear-geojson-button:hover {
     font-size: 1.3rem;
 }
 
-.workbench-card-container .mapboxgl-ctrl-geocoder {
-    margin-right: 90px;
-}
-
 .workbench-card-wrapper .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
     visibility: visible;
 }
@@ -9314,7 +9308,7 @@ a.search-query-link-captions:focus {
     margin-bottom: 0px;
     background-color: #fafafa;
     border-top: 1px solid #ddd;
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
     transition: all .5s;
     margin-top: inherit;
@@ -12139,7 +12133,6 @@ a.filter-tools:hover {
         line-height: 0.9;
     }
     .relationships-list {
-        height: calc(100% - 185px);
         border: 1px solid rgb(221, 221, 221);
         overflow-y: auto;
         .relationships-list-item {

diff --git a/arches/app/media/css/base-manager.css b/arches/app/media/css/base-manager.css
@@ -18,7 +18,7 @@
         "sidenav header"
         "sidenav content-body";
     height: 100vh;
-    width: 100vw;
+    width: 100%;
 }
 
 #skip-link-holder a, #skip-link-holder a:link, #skip-link-holder a:visited {

diff --git a/arches/app/media/css/base/_elements.scss b/arches/app/media/css/base/_elements.scss
@@ -5,9 +5,10 @@ body {
     }
 }
 
-header, main {
-    @include break-at(tablet-max) {
-        max-width: calc(100vw - 65px);
+#container {
+    height: 100vh;
+    @include break-at(small-desktop-max) {
+        height: auto;
     }
 }
 

diff --git a/arches/app/media/css/pages/_report.scss b/arches/app/media/css/pages/_report.scss
@@ -1,3 +1,18 @@
-.report-print-date {
-    font-size: 1.2rem;
+.resource-report-abstract-container {
+    width: calc(100vw - 55px);
+    .resource-component-abstract {
+        overflow-y: auto;
+        .report-title-bar {
+            .report-toolbar-title {
+                @include break-at(small-desktop-max) {
+                    min-width: 0;
+                    width: auto;
+                    padding: 14px 0 5px 5px;
+                }
+            }
+            .report-print-date {
+                font-size: 1.2rem;
+            }
+        }
+    }   
 }
diff --git a/arches/app/media/css/pages/_search.scss b/arches/app/media/css/pages/_search.scss
@@ -174,7 +174,7 @@ article.main-search-container {
                 }
             }
         }
-        .tab-pane-content {
+        .tab-content {
             height: calc(100vh - 100px);
             .workbench-card-sidebar {
                 .workbench-card-sidebar-tab {

diff --git a/arches/app/templates/views/components/resource-report-abstract.htm b/arches/app/templates/views/components/resource-report-abstract.htm
@@ -6,8 +6,7 @@
 <div class='loading-mask'></div>
 <!--/ko-->
 <!-- ko ifnot: loading() -->
-<div class="resource-report-abstract-container"
-    data-bind="style: { height: $data.summary ? 'inherit' : 'calc(100vh - 50px)' }">
+<div class="resource-report-abstract-container">
     <div class="resource-component-abstract"
         data-bind='
             component: {