fix(ui): Issues with overlapping content in the app details view on s…

…maller screens (argoproj#16268) Signed-off-by: Rafal Pelczar <rafal@akuity.io>
tesla59 · Dec 16, 2023 · afb31a6 · afb31a6
1 parent 052ad48
commit afb31a6
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 177 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-details.scss b/ui/src/app/applications/components/application-details/application-details.scss
@@ -8,16 +8,16 @@ $header: 120px;
 .application-details {
     height: 100vh;
     width: 100%;
-    &__status-panel {
-        position: fixed;
-        left: $sidebar-width;
-        right: 0;
-        z-index: 3;
-        @media screen and (max-width: map-get($breakpoints, xlarge)) {
-            top: 150px;
-        }
-        @media screen and (max-width: map-get($breakpoints, large)) {
-            top: 146px;
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 2 * $top-bar-height);
+        overflow: hidden;
+
+        @media screen and (max-width: map-get($breakpoints, xxlarge)) {
+            height: calc(100vh - 3 * $top-bar-height);
+            margin-top: $top-bar-height;
         }
     }
 
@@ -27,13 +27,11 @@ $header: 120px;
 
     &__tree {
         padding: 1em;
+
+        flex: 1;
         overflow-x: auto;
         overflow-y: auto;
-        margin-top: 150px;
-        height: calc(100vh - 2 * 70px - 115px);
-        @media screen and (max-width: map-get($breakpoints, xlarge)) {
-            margin-top: 165px;
-        }
+        overscroll-behavior-x: none;
     }
 
     &__sliding-panel-pagination-wrap {