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>
<!-- Media -->
<div class="post-media">
{#if media && media.length > 0}
{#if media && media.length > 0}
<div class="post-media">
{#if media[0].type === 'photo'}
<img
src={media[0].thumbnailUrl || media[0].url}
@@ -120,21 +120,8 @@
class="media-video"
/>
{/if}
{:else}
<div class="no-media">
<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>
</div>
{/if}
<!-- Post Actions -->
<div class="post-actions">
@@ -258,33 +245,23 @@
/* Media */
.post-media {
width: 100%;
aspect-ratio: 16/10;
max-height: 600px;
overflow: hidden;
background: hsl(var(--muted));
display: flex;
align-items: center;
justify-content: center;
}
.media-image {
width: 100%;
height: 100%;
height: auto;
max-height: 600px;
object-fit: cover;
display: block;
}
:global(.media-video) {
width: 100%;
height: 100%;
}
.no-media {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: hsl(var(--muted-foreground));
opacity: 0.5;
height: auto;
max-height: 600px;
}
/* Post Actions */

View File

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