kangwan/ai-toy-patent-workflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render asset tabs as ratio-preserving grid

Browse Source
This commit is contained in:
kang
2026-05-20 19:36:55 +08:00
parent 2e3bc5078f
commit 5a05058dd0
2 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/globals.css
View File

@@ -785,28 +785,19 @@ input, textarea {
} }
.asset-strip { .asset-strip {
display: flex; display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
align-items: start;
gap: 12px; gap: 12px;
overflow-x: auto; overflow-x: visible;
overflow-y: visible; overflow-y: visible;
padding-bottom: 4px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.asset-strip::-webkit-scrollbar {
height: 8px;
}
.asset-strip::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255,255,255,0.16);
} }
.asset-tile { .asset-tile {
flex: 0 0 clamp(136px, 12vw, 172px); display: flex;
scroll-snap-align: start; min-width: 0;
height: 100%;
flex-direction: column;
border-radius: 8px; border-radius: 8px;
background: rgba(255,255,255,0.035); background: rgba(255,255,255,0.035);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
@@ -820,7 +811,6 @@ input, textarea {
box-shadow: box-shadow:
inset 0 0 0 1px rgba(230,245,120,0.22), inset 0 0 0 1px rgba(230,245,120,0.22),
0 18px 50px -34px rgba(230,245,120,0.55); 0 18px 50px -34px rgba(230,245,120,0.55);
transform: translateY(-1px);
} }
.asset-tile:focus-visible { .asset-tile:focus-visible {
@@ -831,7 +821,6 @@ input, textarea {
.asset-tile__thumb { .asset-tile__thumb {
position: relative; position: relative;
display: grid; display: grid;
height: 118px;
width: 100%; width: 100%;
place-items: center; place-items: center;
overflow: visible; overflow: visible;
@@ -841,7 +830,9 @@ input, textarea {
} }
.asset-tile__thumb > img { .asset-tile__thumb > img {
max-height: 118px; display: block;
width: 100%;
height: 100%;
} }
.asset-tile__state { .asset-tile__state {
@@ -867,7 +858,10 @@ input, textarea {
} }
.asset-tile__body { .asset-tile__body {
display: flex;
min-width: 0; min-width: 0;
flex: 1;
flex-direction: column;
padding-top: 9px; padding-top: 9px;
} }
@@ -1074,8 +1068,8 @@ input, textarea {
display: none; display: none;
} }
.asset-tile { .asset-strip {
flex-basis: 142px; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
} }
.asset-detail-drawer { .asset-detail-drawer {

2
src/components/PackPanel.tsx
View File

@@ -82,7 +82,7 @@ function AssetTile({ template, asset, onOpen }: {
{template.required && <span className="shrink-0 text-[9px] text-[#e6f578]/75">必备</span>} {template.required && <span className="shrink-0 text-[9px] text-[#e6f578]/75">必备</span>}
</div> </div>
<p className="mt-1 line-clamp-2 text-left text-[10px] leading-relaxed text-white/42">{template.description}</p> <p className="mt-1 line-clamp-2 text-left text-[10px] leading-relaxed text-white/42">{template.description}</p>
<div className="mt-2 flex items-center justify-between gap-2"> <div className="mt-auto flex items-center justify-between gap-2 pt-2">
<span className="font-mono text-[9px] text-white/34">{ASPECT_PX[template.aspectRatio]}</span> <span className="font-mono text-[9px] text-white/34">{ASPECT_PX[template.aspectRatio]}</span>
<span className={`font-mono text-[10px] ${ready ? 'text-[#dff5a8]' : 'text-white/28'}`}> <span className={`font-mono text-[10px] ${ready ? 'text-[#dff5a8]' : 'text-white/28'}`}>
{ready ? `L${asset!.derivationLevel}` : 'EMPTY'} {ready ? `L${asset!.derivationLevel}` : 'EMPTY'}