diff --git a/src/app/globals.css b/src/app/globals.css index 0cd04e3..b036fed 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -785,28 +785,19 @@ input, textarea { } .asset-strip { - display: flex; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + align-items: start; gap: 12px; - overflow-x: auto; + overflow-x: 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 { - flex: 0 0 clamp(136px, 12vw, 172px); - scroll-snap-align: start; + display: flex; + min-width: 0; + height: 100%; + flex-direction: column; border-radius: 8px; background: rgba(255,255,255,0.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); @@ -820,7 +811,6 @@ input, textarea { box-shadow: inset 0 0 0 1px rgba(230,245,120,0.22), 0 18px 50px -34px rgba(230,245,120,0.55); - transform: translateY(-1px); } .asset-tile:focus-visible { @@ -831,7 +821,6 @@ input, textarea { .asset-tile__thumb { position: relative; display: grid; - height: 118px; width: 100%; place-items: center; overflow: visible; @@ -841,7 +830,9 @@ input, textarea { } .asset-tile__thumb > img { - max-height: 118px; + display: block; + width: 100%; + height: 100%; } .asset-tile__state { @@ -867,7 +858,10 @@ input, textarea { } .asset-tile__body { + display: flex; min-width: 0; + flex: 1; + flex-direction: column; padding-top: 9px; } @@ -1074,8 +1068,8 @@ input, textarea { display: none; } - .asset-tile { - flex-basis: 142px; + .asset-strip { + grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); } .asset-detail-drawer { diff --git a/src/components/PackPanel.tsx b/src/components/PackPanel.tsx index a9b7ba9..76d30e3 100644 --- a/src/components/PackPanel.tsx +++ b/src/components/PackPanel.tsx @@ -82,7 +82,7 @@ function AssetTile({ template, asset, onOpen }: { {template.required && 必备}
{template.description}
-