ThaMunsta/hashex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance positions table layout for better responsiveness
Build Images and Deploy / Update-PROD-Stack (push) Successful in 1m22s
Details

Browse Source
This commit is contained in:
Mike Johnston
2026-03-19 19:06:33 -04:00
parent e1e6790628
commit 1cf7892c8b
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/positions/page.tsx
+13 -11
View File
@@ -78,13 +78,13 @@ export default async function PositionsPage() {
) : (
<div className="bg-surface-card border border-surface-border rounded-xl overflow-hidden">
{/* Header row */}
<div className="grid grid-cols-[1fr_auto_auto_auto_auto_auto_auto] gap-4 px-4 py-2 text-xs text-slate-500 uppercase tracking-wider border-b border-surface-border">
<div className="grid grid-cols-[1fr_auto_auto] sm:grid-cols-[1fr_auto_auto_auto_auto_auto_auto] gap-4 px-4 py-2 text-xs text-slate-500 uppercase tracking-wider border-b border-surface-border">
<span>Hashtag</span>
<span className="text-right">Shares</span>
<span className="text-right">Avg buy</span>
<span className="text-right">Current</span>
<span className="text-right">Cost basis</span>
<span className="text-right">Value</span>
<span className="hidden sm:block text-right">Avg buy</span>
<span className="hidden sm:block text-right">Current</span>
<span className="hidden sm:block text-right">Cost basis</span>
<span className="hidden sm:block text-right">Value</span>
<span className="text-right">P&amp;L</span>
</div>
@@ -102,11 +102,13 @@ export default async function PositionsPage() {
return (
<div
key={pos.id}
className="grid grid-cols-[1fr_auto_auto_auto_auto_auto_auto] gap-4 items-center px-4 py-3"
className="grid grid-cols-[1fr_auto_auto] sm:grid-cols-[1fr_auto_auto_auto_auto_auto_auto] gap-4 items-center px-4 py-3"
>
{/* Hashtag + type + sparkline */}
{/* Hashtag + type badge (+ sparkline on desktop) */}
<div className="flex items-center gap-3 min-w-0">
<div className="hidden sm:block shrink-0">
<Sparkline prices={sparkPrices} />
</div>
<div className="min-w-0">
<Link
href={`/hashtag/${pos.hashtag.tag}`}
@@ -127,10 +129,10 @@ export default async function PositionsPage() {
</div>
<span className="text-right text-sm">{formatNumber(pos.shares)}</span>
<span className="text-right text-sm">{formatCurrency(pos.avgBuyPrice)}</span>
<span className="text-right text-sm">{formatCurrency(pos.hashtag.currentPrice)}</span>
<span className="text-right text-sm text-slate-400">{formatCurrency(costBasis)}</span>
<span className="text-right text-sm">{formatCurrency(currentValue)}</span>
<span className="hidden sm:block text-right text-sm">{formatCurrency(pos.avgBuyPrice)}</span>
<span className="hidden sm:block text-right text-sm">{formatCurrency(pos.hashtag.currentPrice)}</span>
<span className="hidden sm:block text-right text-sm text-slate-400">{formatCurrency(costBasis)}</span>
<span className="hidden sm:block text-right text-sm">{formatCurrency(currentValue)}</span>
<div className="text-right">
<p className={`text-sm font-medium ${pnlColor(pnl)}`}>{formatPnl(pnl)}</p>