feat(archive): enhance archive page with scrollable table and responsive design
This commit is contained in:
parent
77c0c1586b
commit
f17905eeff
@ -517,6 +517,13 @@ kbd {
|
|||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
.archive-scroll {
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.archive-table {
|
||||||
|
min-width: 860px;
|
||||||
|
}
|
||||||
.archive-header {
|
.archive-header {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--subtle);
|
color: var(--subtle);
|
||||||
@ -537,6 +544,7 @@ kbd {
|
|||||||
}
|
}
|
||||||
.archive-header span:nth-child(3),
|
.archive-header span:nth-child(3),
|
||||||
.archive-row span:nth-child(3) { grid-column: span 2; }
|
.archive-row span:nth-child(3) { grid-column: span 2; }
|
||||||
|
.archive-table { min-width: 100%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrape-card {
|
.scrape-card {
|
||||||
|
|||||||
@ -74,6 +74,7 @@ export default function ArchivePage() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{items.length > 0 && (
|
{items.length > 0 && (
|
||||||
|
<div className="archive-scroll">
|
||||||
<div className="archive-table">
|
<div className="archive-table">
|
||||||
<div className="archive-header">
|
<div className="archive-header">
|
||||||
<span>ID</span>
|
<span>ID</span>
|
||||||
@ -96,6 +97,7 @@ export default function ArchivePage() {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user