fix: Dashboard overflow issue if there is banner (#7748)

app/javascript/dashboard/assets/scss/_layout.scss

@@ -9,87 +9,25 @@ body {
 }
 
 .app-wrapper {
-  @include full-height;
-  flex-grow: 0;
-  min-height: 0;
-  width: 100%;
+  @apply h-full flex-grow-0 min-h-0 w-full;
+
+  .button--fixed-top {
+    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
+  }
 }
 
 .banner + .app-wrapper {
+  // Reduce the height of the dashboard to make room for the banner.
+  // And causing the top right green-action button to be pushed down when scrolling.
+  @apply h-[calc(100%-48px)];
+
   .button--fixed-top {
-    top: 5.6 * $space-one;
+    @apply top-14;
   }
 
   .off-canvas-content {
     .button--fixed-top {
-      top: $space-small;
+      @apply top-2;
     }
   }
 }
-
-is-closed .app-root {
-  @include flex;
-  flex-direction: column;
-}
-
-.app-content {
-  @include flex;
-  @include full-height;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.view-box {
-  @include full-height;
-  @include space-between-column;
-
-  height: 100vh;
-  margin: 0;
-}
-
-.view-panel {
-  flex-direction: column;
-  margin: 0;
-  overflow-y: auto;
-  padding: $space-normal;
-}
-
-.content-box {
-  overflow: auto;
-  padding: $space-normal;
-}
-
-.back-button {
-  @include flex;
-
-  align-items: center;
-  color: $color-woot;
-  cursor: pointer;
-  font-size: $font-size-default;
-  font-weight: $font-weight-normal;
-  margin-right: $space-normal;
-
-  &::before {
-    font-size: $font-size-large;
-    margin-right: $space-small;
-    vertical-align: text-bottom;
-  }
-}
-
-.button-spinner {
-  float: right;
-}
-
-.no-items-error-message {
-  @include flex;
-  @include full-height;
-
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  img {
-    max-width: $space-mega;
-    padding: $space-one;
-  }
-}