[NIFI-13212] handle canvas overflow on shorter screens (#8810)

* [NIFI-13212] handle canvas overflow on shorter screens

* add z-index to drag/drop new canvas items

This closes #8810

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.html

@@ -15,15 +15,13 @@
   ~ limitations under the License.
   -->
 
-<div class="flex flex-col h-screen justify-between">
+<div class="flex flex-col justify-between">
     <fd-header></fd-header>
     <div class="flex-1">
-        <div
-            id="canvas-container"
-            class="canvas-background h-full select-none"
-            [cdkContextMenuTriggerFor]="contextMenu.menu"></div>
+        <div id="canvas-container" class="canvas-background select-none" [cdkContextMenuTriggerFor]="contextMenu.menu">
+            <graph-controls></graph-controls>
+        </div>
         <fd-context-menu #contextMenu [menuProvider]="canvasContextMenu" menuId="root"></fd-context-menu>
-        <graph-controls></graph-controls>
     </div>
     <fd-footer></fd-footer>
 </div>

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss

@@ -16,6 +16,11 @@
  */
 
 .canvas-background {
+    position: absolute;
+    top: 98px;
+    left: 0;
+    bottom: 0;
+    right: 0;
     background-size: 14px 14px;
     z-index: 1;
     overflow: hidden;
@@ -25,7 +30,7 @@
 
 :host ::ng-deep svg.canvas-svg {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 33px);
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss

@@ -28,6 +28,11 @@
     // Get hues from palette
 
     .breadcrumb-container {
+        position: absolute;
+        bottom: 0;
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+        height: 33px;
+        width: 100%;
+        background-color: var(--mat-app-background-color);
     }
 }

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/graph-controls.component.scss

@@ -18,6 +18,6 @@
 div.graph-controls {
     position: absolute;
     left: 0;
-    top: 110px;
+    top: 22px;
     z-index: 2;
 }

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss

@@ -19,6 +19,7 @@
     .cdk-drag {
         background: unset;
         height: 64px;
+        z-index: 2;
     }
 
     .icon {