fix:Adjust media layout, sizing, and mobile sheet

Render media container only when media exists and remove the no-media
placeholder. Constrain images and videos with a max-height of 600px
(height:auto) and set images to display:block. In preview, use
object-fit: contain for media images and reduce mobile sheet height from
80vh to 50vh.
This commit is contained in:
2025-11-04 12:09:05 +01:00
parent 4c973c4e7d
commit 9800be0147
2 changed files with 12 additions and 35 deletions

View File

@@ -101,8 +101,8 @@
</div> </div>
<!-- Media --> <!-- Media -->
<div class="post-media"> {#if media && media.length > 0}
{#if media && media.length > 0} <div class="post-media">
{#if media[0].type === 'photo'} {#if media[0].type === 'photo'}
<img <img
src={media[0].thumbnailUrl || media[0].url} src={media[0].thumbnailUrl || media[0].url}
@@ -120,21 +120,8 @@
class="media-video" class="media-video"
/> />
{/if} {/if}
{:else} </div>
<div class="no-media"> {/if}
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
<path
d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
</svg>
</div>
{/if}
</div>
<!-- Post Actions --> <!-- Post Actions -->
<div class="post-actions"> <div class="post-actions">
@@ -258,33 +245,23 @@
/* Media */ /* Media */
.post-media { .post-media {
width: 100%; width: 100%;
aspect-ratio: 16/10; max-height: 600px;
overflow: hidden; overflow: hidden;
background: hsl(var(--muted)); background: hsl(var(--muted));
display: flex;
align-items: center;
justify-content: center;
} }
.media-image { .media-image {
width: 100%; width: 100%;
height: 100%; height: auto;
max-height: 600px;
object-fit: cover; object-fit: cover;
display: block;
} }
:global(.media-video) { :global(.media-video) {
width: 100%; width: 100%;
height: 100%; height: auto;
} max-height: 600px;
.no-media {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: hsl(var(--muted-foreground));
opacity: 0.5;
} }
/* Post Actions */ /* Post Actions */

View File

@@ -278,7 +278,7 @@
/* Mobile styles (bottom sheet) */ /* Mobile styles (bottom sheet) */
@media (max-width: 767px) { @media (max-width: 767px) {
:global(.sheet-content) { :global(.sheet-content) {
height: 80vh !important; height: 50vh !important;
border-radius: 16px 16px 0 0 !important; border-radius: 16px 16px 0 0 !important;
} }
} }
@@ -414,7 +414,7 @@
.media-image { .media-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
} }
:global(.media-video) { :global(.media-video) {