Attempt to fix z index issues (#2490)

loculus-project · Aug 21, 2024 · 186fd7f · 186fd7f
1 parent dadd17b
commit 186fd7f
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/website/src/components/OffCanvasOverlay.tsx b/website/src/components/OffCanvasOverlay.tsx
@@ -6,5 +6,5 @@ type Props = {
 };
 
 export const OffCanvasOverlay: FC<Props> = ({ onClick, className }) => (
-    <div className={`bg-gray-800 bg-opacity-50 fixed inset-0 z-40 ${className ?? ''}`} onClick={onClick} />
+    <div className={`bg-gray-800 bg-opacity-50 fixed inset-0 z-30 ${className ?? ''}`} onClick={onClick} />
 );
diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx
@@ -16,7 +16,7 @@ const DisplaySearchDocs: React.FC = () => {
                 <MaterialSymbolsHelpOutline className='inline-block h-6 w-5' />
             </button>
             <Transition appear show={isOpen} as={Fragment}>
-                <Dialog as='div' className='relative z-10' onClose={closeDialog}>
+                <Dialog as='div' className='relative z-40' onClose={closeDialog}>
                     <TransitionChild
                         as={Fragment}
                         enter='ease-out duration-300'

diff --git a/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx b/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx
@@ -34,7 +34,7 @@ export const DownloadDialog: FC<DownloadDialogProps> = ({
             <button className='outlineButton' onClick={openDialog}>
                 Download
             </button>
-            <Dialog open={isOpen} onClose={closeDialog} className='relative z-10'>
+            <Dialog open={isOpen} onClose={closeDialog} className='relative z-40'>
                 <div className='fixed inset-0 bg-black bg-opacity-25' />
                 <div className='fixed inset-0 overflow-y-auto'>
                     <div className='flex min-h-full items-center justify-center p-4 text-center'>

diff --git a/website/src/components/SearchPage/SeqPreviewModal.tsx b/website/src/components/SearchPage/SeqPreviewModal.tsx
@@ -117,12 +117,12 @@ export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
     return (
         <Transition appear show={isOpen} as={React.Fragment}>
             {isHalfScreen ? (
-                <div className='fixed bottom-0 w-full left-0 z-10 bg-white p-6 border-t border-gray-400'>
+                <div className='fixed bottom-0 w-full left-0 z-40 bg-white p-6 border-t border-gray-400'>
                     {controls}
                     {content}
                 </div>
             ) : (
-                <Dialog as='div' className='fixed inset-0 z-10 overflow-y-auto' onClose={onClose}>
+                <Dialog as='div' className='fixed inset-0 z-40 overflow-y-auto' onClose={onClose}>
                     <div className='min-h-screen px-8 text-center'>
                         <div className='fixed inset-0 bg-black opacity-30' />
                         <DialogPanel className='inline-block w-full p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pb-0'>

diff --git a/website/src/components/SequenceDetailsPage/ReferenceSequenceLinkButton.tsx b/website/src/components/SequenceDetailsPage/ReferenceSequenceLinkButton.tsx
@@ -35,7 +35,7 @@ const ReferenceSequenceLinkButton: React.FC<Props> = ({ reference }) => {
                 <MaterialSymbolsInfoOutline className='inline-block h-6 w-5' />
             </button>
             <Transition appear show={isOpen} as={Fragment}>
-                <Dialog as='div' className='relative z-10' onClose={closeDialog}>
+                <Dialog as='div' className='relative z-40' onClose={closeDialog}>
                     <TransitionChild
                         as={Fragment}
                         enter='ease-out duration-300'

diff --git a/website/src/layouts/BaseLayout.astro b/website/src/layouts/BaseLayout.astro
@@ -49,7 +49,7 @@ const lastTimeBannerWasClosed = Astro.cookies.get('lastTimeBannerWasClosed')?.va
         />
         <div class='flex flex-col min-h-screen w-11/12 mx-auto'>
             <ToastContainer client:load />
-            <header class='bg-white h-fit z-40'>
+            <header class='bg-white h-fit z-30'>
                 <nav class='flex justify-between items-center p-4'>
                     <div class='flex justify-start'>
                         <div class='flex flex-col'>