Improve video modal nav safe area and mobile layout

This commit is contained in:
thePR0M3TH3AN committed 2025-10-11 19:09:04 -04:00
1 parent 947186de2c
commit fb04f92ea2
4 files changed
+53 -9

No files matched your search

+8 -8
View File
@@ -16,13 +16,13 @@
class="modal-nav video-modal__nav sticky top-0 z-60 transition-transform duration-150"
>
<div
class="card flex w-full items-center justify-between gap-4 px-4 py-3"
class="card flex w-full items-center justify-between gap-4 px-4 py-3 u-max-400-flex-wrap u-max-400-gap-y-sm u-max-400-px-sm"
>
<div class="flex items-center gap-3">
<div class="flex items-center gap-3 u-max-400-w-full">
<button
id="closeModal"
type="button"
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-panel text-text transition duration-200 ease-out hover:bg-panel-hover"
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-panel text-text transition duration-200 ease-out hover:bg-panel-hover u-max-400-square-9"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -40,11 +40,11 @@
</svg>
</button>
</div>
<div class="modal-actions video-modal__actions flex items-center gap-2">
<div class="modal-actions video-modal__actions flex items-center gap-2 u-max-400-ml-0 u-max-400-w-full u-max-400-flex-wrap u-max-400-justify-between u-max-400-gap-y-xs">
<button
id="copyMagnetBtn"
type="button"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0 u-max-400-square-9"
aria-label="Copy magnet"
>
<img
@@ -57,7 +57,7 @@
<button
id="modalZapBtn"
type="button"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0 u-max-400-square-9"
aria-label="Send a zap"
aria-haspopup="dialog"
aria-expanded="false"
@@ -176,7 +176,7 @@
<button
id="shareBtn"
type="button"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0 u-max-400-square-9"
aria-label="Share video"
>
<img
@@ -189,7 +189,7 @@
<button
id="modalMoreBtn"
type="button"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0"
class="btn-ghost focus-ring h-10 w-10 rounded-full p-0 u-max-400-square-9"
aria-haspopup="true"
aria-expanded="false"
aria-label="More"