cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix jittering in record detail pages

Browse Source 
Use flex instead of columns.
This commit is contained in:
Claudio Ortolina
2025-05-02 21:06:43 +01:00
parent 23e59edeec
commit 38f60d62e0
2 changed files with 491 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/show.html.heex
+6 -4
View File
@@ -1,4 +1,4 @@
<div class="md:columns-2 mt-4 px-4">
<div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="drop-shadow-sm md:max-w-[38rem]">
<img
class="w-full rounded-lg drop-shadow-sm"
@@ -7,6 +7,7 @@
/>
</div>
<div class="grow">
<div class="mt-4 md:mt-0 flex justify-between">
<div>
<h1 class="text-base font-medium leading-6 text-zinc-700">
@@ -22,9 +23,9 @@
{@record.title}
</h2>
<p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
{Records.Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label(
@record.type
)}
{Records.Record.format_release_date(@record.release_date)} · {format_label(
@record.format
)} · {type_label(@record.type)}
</p>
</div>
<div class="relative flex-none">
@@ -252,6 +253,7 @@
</div>
</dl>
</div>
</div>
</div>
<!-- TODO: extract to a component -->
<details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
lib/music_library_web/live/wishlist_live/show.html.heex
+3 -1
View File
@@ -1,4 +1,4 @@
<div class="md:columns-2 mt-4 px-4">
<div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="drop-shadow-sm md:max-w-[38rem]">
<img
class="w-full rounded-lg drop-shadow-sm"
@@ -7,6 +7,7 @@
/>
</div>
<div class="grow">
<div class="mt-4 md:mt-0 flex justify-between">
<div>
<h1 class="text-base font-medium leading-6 text-zinc-700">
@@ -267,6 +268,7 @@
</div>
</dl>
</div>
</div>
</div>
<!-- TODO: extract to a component -->
<details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">