Fix encode model names for lineage and wrong layer order for errors popup (#1806)

Author: mykalmax

web/client/src/library/components/graph/Graph.tsx

@@ -924,7 +924,7 @@ function ModelColumnLineage({
   return (
     <div className={clsx('px-1 w-full h-full relative', className)}>
       {isBuildingLayout && (
-        <div className="absolute top-0 left-0 z-[1000] bg-theme flex justify-center items-center w-full h-full">
+        <div className="absolute top-0 left-0 z-50 bg-theme flex justify-center items-center w-full h-full">
           <Loading className="inline-block">
             <Spinner className="w-3 h-3 border border-neutral-10 mr-4" />
             <h3 className="text-md">Building Lineage...</h3>

web/client/src/library/components/graph/help.ts

@@ -315,7 +315,7 @@ function mergeLineageWithModels(
       key = encodeURI(key)
 
       acc[key] = {
-        models,
+        models: models.map(encodeURI),
         columns: currentLineage?.[key]?.columns ?? undefined,
       }
 

web/client/src/library/components/modal/Modal.tsx

@@ -22,7 +22,7 @@ export default function Modal({
     >
       <Dialog
         as="div"
-        className="relative z-[100]"
+        className="relative z-50"
         onClose={onClose}
       >
         <Transition.Child

web/client/src/library/components/modal/ModalDrawer.tsx

@@ -21,7 +21,7 @@ export default function ModalDrawer({
     >
       <Dialog
         as="div"
-        className="relative z-[100] w-full h-full "
+        className="relative z-50 w-full h-full "
         onClose={onClose}
         tabIndex={1}
       >

web/client/src/library/components/report/ReportErrors.tsx

@@ -57,7 +57,7 @@ export default function ReportErrors(): JSX.Element {
           >
             <Popover.Panel
               className={clsx(
-                'absolute top-20 right-2 z-[1000] rounded-md bg-light transform overflow-hidden text-danger-700 shadow-2xl',
+                'absolute top-20 right-2 z-50 rounded-md bg-light transform overflow-hidden text-danger-700 shadow-2xl',
                 'w-[90vw] max-h-[80vh]',
               )}
             >

web/client/src/library/pages/editor/Editor.tsx

@@ -40,7 +40,7 @@ export default function PageEditor(): JSX.Element {
       sizes={[20, 80]}
       minSize={[8, 8]}
       snapOffset={0}
-      className="flex w-full h-full overflow-hidden"
+      className="flex w-full h-full overflow-hidden z-10"
     >
       <div className="h-full">
         <Suspense