style(agent-office): match card image to 941x1672 aspect, fill grid width
- Card image aspect-ratio 1/1 → 941/1672 (real image ratio, no crop) - object-fit cover → contain (defensive against rounding) - Drop card aspect-ratio so it grows from natural image+name height - Drop grid max-width 720px so grid fills the viewport width Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -54,14 +54,12 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ===== Agent Card ===== */
|
||||
.ao-card {
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1.15;
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 12px;
|
||||
@@ -126,9 +124,8 @@
|
||||
}
|
||||
|
||||
.ao-card-image {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
aspect-ratio: 941 / 1672;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #0f172a;
|
||||
@@ -137,7 +134,7 @@
|
||||
.ao-card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.ao-card-name {
|
||||
|
||||
Reference in New Issue
Block a user