shibao/memEx
1
1
Fork 0
Code Issues 5 Pull Requests Projects Releases 16 Wiki Activity

improve modal overflow behavior

Browse Source
This commit is contained in:
shibao 2022-10-26 22:09:49 -04:00
parent 97a4e90ca0
commit 2ce94fd6d1
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/memex_web/live/live_helpers.ex
View File

@ -31,7 +31,7 @@ defmodule MemexWeb.LiveHelpers do
id: "modal-bg", id: "modal-bg",
class: class:
"fade-in fixed z-10 left-0 top-0 "fade-in fixed z-10 left-0 top-0
w-full h-full overflow-hidden w-screen h-screen overflow-hidden
p-8 flex flex-col justify-center items-center cursor-auto", p-8 flex flex-col justify-center items-center cursor-auto",
style: "background-color: rgba(0,0,0,0.4);", style: "background-color: rgba(0,0,0,0.4);",
phx_remove: hide_modal() phx_remove: hide_modal()
@ -42,16 +42,15 @@ defmodule MemexWeb.LiveHelpers do
<div <div
id="modal" id="modal"
class="fixed z-10 left-0 top-0 pointer-events-none class="fixed z-10 left-0 top-0 pointer-events-none
w-full h-full overflow-hidden w-screen h-screen overflow-hidden
p-4 sm:p-8 flex flex-col justify-center items-center" p-4 sm:p-8 flex flex-col justify-center items-center"
> >
<div <div
id="modal-content" id="modal-content"
class="fade-in-scale w-full max-w-3xl relative class="fade-in-scale max-w-3xl max-h-3xl relative w-full
pointer-events-auto overflow-hidden pointer-events-auto overflow-hidden
px-8 py-4 sm:py-8 flex flex-col justify-center items-center px-8 py-4 sm:py-8 flex flex-col justify-start items-stretch
flex flex-col justify-start items-center bg-primary-800 text-primary-400 border-primary-900 border-2 rounded-lg"
bg-white border-2 rounded-lg"
> >
<%= live_patch to: @return_to, <%= live_patch to: @return_to,
id: "close", id: "close",
@ -63,7 +62,7 @@ defmodule MemexWeb.LiveHelpers do
<i class="fa-fw fa-lg fas fa-times"></i> <i class="fa-fw fa-lg fas fa-times"></i>
<% end %> <% end %>
<div class="overflow-x-hidden overflow-y-auto w-full p-8 flex flex-col space-y-4 justify-start items-center"> <div class="overflow-x-hidden overflow-y-visible p-8 flex flex-col space-y-4 justify-start items-stretch">
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</div> </div>
</div> </div>