fix(home): preview locks aspect to panel dims + object-fit so it never overflows
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
The large FrameCard preview let the <img> drive height (`flex: 0 0 auto`, `width: auto`, `max-*: 100%`). On wide-container layouts and on the new V2 1200×1600 dimensions the image's intrinsic size leaked past the card, and the max-width/max-height combo can drop aspect ratio in some browsers. Now: the preview container locks its `aspect-ratio` to `panelDims(model, orientation)` — same source of truth that drives the empty-placeholder shape — and the <img> fills the container with `object-fit: contain`. Container shape is stable whether or not the thumbnail has loaded; image always scales to fit, portrait or landscape device, narrow or wide phone column. emptyAspectStyle no longer needs to carry aspect (parent already has it); empty-preview placeholder fills 100% of the parent now. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -14,7 +14,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="pictureFrame" />
|
||||
<script type="module" crossorigin src="/build/assets/index-DHJU4XGZ.js"></script>
|
||||
<script type="module" crossorigin src="/build/assets/index-RZqoO867.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-BlLBHR1q.css">
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user