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;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
max-width: 720px;
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Agent Card ===== */
|
/* ===== Agent Card ===== */
|
||||||
.ao-card {
|
.ao-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
aspect-ratio: 1 / 1.15;
|
|
||||||
background: #1e293b;
|
background: #1e293b;
|
||||||
border: 1px solid #334155;
|
border: 1px solid #334155;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
@@ -126,9 +124,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ao-card-image {
|
.ao-card-image {
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 941 / 1672;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #0f172a;
|
background: #0f172a;
|
||||||
@@ -137,7 +134,7 @@
|
|||||||
.ao-card-image img {
|
.ao-card-image img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.ao-card-name {
|
.ao-card-name {
|
||||||
|
|||||||
Reference in New Issue
Block a user