fix bug with z-index for favorites hearts

datagrove · Oct 21, 2024 · 7c36f1d · 7c36f1d
1 parent 29bae2b
commit 7c36f1d
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/components/common/notices/modal.tsx b/src/components/common/notices/modal.tsx
@@ -117,7 +117,7 @@ const Modal: Component<ModalProps> = (props) => {
                     />
                     <section
                         role="dialog"
-                        class="modal min-h-100vh w-100vw fixed inset-0 z-[60] overflow-y-auto bg-background1 p-4 dark:bg-background1-DM md:left-1/2 md:top-1/2 md:max-h-[calc(100vh-4rem)] md:min-h-fit md:w-[calc(100vw-4rem)] md:max-w-[768px] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-xl"
+                        class="modal min-h-100vh w-100vw md:min-h-auto fixed inset-0 z-[60] overflow-y-auto bg-background1 p-4 dark:bg-background1-DM md:left-1/2 md:top-1/2 md:max-h-[calc(100vh-4rem)] md:w-[calc(100vw-4rem)] md:max-w-[768px] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-xl"
                         ref={setModal}
                     >
                         <header class="sticky flex flex-row flex-nowrap items-center justify-between gap-[2rem] border-b-[1px]">

diff --git a/src/components/posts/AddFavorite.tsx b/src/components/posts/AddFavorite.tsx
@@ -220,7 +220,7 @@ export const FavoriteButton: Component<Props> = (props) => {
     //REFACTOR: Improve the aria label for the favorites button maybe with the post title?
     return (
         //This has to be z-50 so that the modal will render above the Filter menu on mobile which is z-40
-        <div class="relative z-50 w-full">
+        <div class="relative z-30 w-full">
             <Show when={!isFavorited()}>
                 <Show when={!notUser()}>
                     <Modal

diff --git a/src/components/services/FiltersMobile.tsx b/src/components/services/FiltersMobile.tsx
@@ -807,7 +807,7 @@ export const FiltersMobile: Component<Props> = (props) => {
                 </button>
             </Show>
 
-            <div class="absolute h-full w-11/12">
+            <div class="absolute w-11/12">
                 <Show when={showFilters() === true}>
                     <div class="main-pop-out relative h-96 w-full rounded border border-border1 bg-background1 shadow-2xl dark:border-border1-DM dark:bg-background1-DM dark:shadow-gray-600 md:h-auto md:shadow-none">
                         <div class="h-[283px] w-full overflow-y-scroll md:h-full md:overflow-auto">