more mobile fixes

src/app/stocks/page.tsx

@@ -243,7 +243,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
       {tab === 'stocks' && (<>
       <div className="bg-surface-card border border-surface-border rounded-xl overflow-hidden">
         {/* Column headers */}
-        <div className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 px-4 py-2.5 border-b border-surface-border text-xs font-medium">
+        <div className="grid grid-cols-[2fr_1fr_1fr] sm:grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 px-4 py-2.5 border-b border-surface-border text-xs font-medium">
           <SortLink field="tag" label="Hashtag" currentSort={sort} currentDir={dir} page={page} fund={fund} />
           <div className="text-right">
             <SortLink field="price" label="Price" currentSort={sort} currentDir={dir} page={page} fund={fund} />
@@ -252,7 +252,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
             <SortLink field="change" label="Change" currentSort={sort} currentDir={dir} page={page} fund={fund} />
           </div>
           <div className="text-right hidden sm:block text-slate-400">Posts/hr</div>
-          <div className="text-right">
+          <div className="text-right hidden sm:block">
             <SortLink field="updated" label="Updated" currentSort={sort} currentDir={dir} page={page} fund={fund} />
           </div>
         </div>
@@ -270,7 +270,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
               return (
                 <div
                   key={stock.id}
-                  className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 items-center px-4 py-3 hover:bg-surface-border/30 transition-colors"
+                  className="grid grid-cols-[2fr_1fr_1fr] sm:grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-4 items-center px-4 py-3 hover:bg-surface-border/30 transition-colors"
                 >
                   {/* Rank + hashtag name */}
                   <div className="flex items-center gap-3 min-w-0">
@@ -312,7 +312,7 @@ export default async function StocksPage({ searchParams }: PageProps) {
                   </div>
 
                   {/* Last updated */}
-                  <div className="text-right text-xs text-slate-500">
+                  <div className="text-right text-xs text-slate-500 hidden sm:block">
                     {formatDistanceToNow(stock.lastUpdated, { addSuffix: true })}
                   </div>
                 </div>

src/app/trades/page.tsx

@@ -42,8 +42,9 @@ export default async function GlobalTradesPage({ searchParams }: PageProps) {
       <div className="bg-surface-card border border-surface-border rounded-xl overflow-hidden">
         <div className="divide-y divide-surface-border">
           {trades.map((t) => (
-            <div key={t.id} className="flex items-center justify-between px-4 py-3 text-sm">
+            <div key={t.id} className="px-4 py-3 text-sm space-y-1.5">
-              <div className="flex items-center gap-3">
+              {/* Primary row: type badge · hashtag · total value */}
+              <div className="flex items-center gap-2">
                 <span
                   className={`text-xs font-medium px-2 py-0.5 rounded shrink-0 ${
                     t.type.startsWith('BUY')
@@ -53,34 +54,33 @@ export default async function GlobalTradesPage({ searchParams }: PageProps) {
                 >
                   {t.type.replace('_', ' ')}
                 </span>
-                <div>
+                <Link
-                  <div className="flex items-center gap-1.5">
+                  href={`/hashtag/${t.hashtag!.tag}`}
-                    {t.user.isFund ? (
+                  className="text-indigo-300 hover:text-indigo-200 font-medium truncate flex-1 min-w-0"
-                      <span className="text-xs text-indigo-400">🏦</span>
+                >
-                    ) : null}
+                  #{t.hashtag!.displayTag}
-                    <Link
+                </Link>
-                      href={t.user.isFund ? `/fund/${t.user.username.replace('fund:', '')}` : `/profile/${t.user.username}`}
+                <span className="shrink-0 font-medium tabular-nums">{formatCurrency(t.total)}</span>
-                      className="text-slate-300 hover:text-white"
+              </div>
-                    >
+              {/* Secondary row: user · time (left)  shares @ price (right) */}
-                      {t.user.displayUsername ?? t.user.username}
+              <div className="flex items-center justify-between text-xs text-slate-500">
-                    </Link>
+                <div className="flex items-center gap-1.5 min-w-0">
-                    <span className="text-slate-600">·</span>
+                  {t.user.isFund && <span className="text-indigo-400 shrink-0">🏦</span>}
-                    <Link href={`/hashtag/${t.hashtag!.tag}`} className="text-indigo-300 hover:text-indigo-200">
+                  <Link
-                      #{t.hashtag!.displayTag}
+                    href={t.user.isFund ? `/fund/${t.user.username.replace('fund:', '')}` : `/profile/${t.user.username}`}
-                    </Link>
+                    className="text-slate-400 hover:text-slate-200 truncate"
-                  </div>
+                  >
-                  <p className="text-xs text-slate-500 mt-0.5">
+                    {t.user.displayUsername ?? t.user.username}
-                    {formatDistanceToNow(t.createdAt, { addSuffix: true })}
+                  </Link>
-                  </p>
+                  <span className="text-slate-700 shrink-0">·</span>
+                  <span className="shrink-0">{formatDistanceToNow(t.createdAt, { addSuffix: true })}</span>
                 </div>
+                <span className="shrink-0 tabular-nums ml-3">{formatNumber(t.shares)} sh @ {formatCurrency(t.price)}</span>
               </div>
-              <div className="text-right shrink-0">
+              {/* PnL: sell trades only */}
-                <p>{formatNumber(t.shares)} sh @ {formatCurrency(t.price)}</p>
+              {(t.type === 'SELL_LONG' || t.type === 'SELL_SHORT') && (
-                <p className="text-xs text-slate-500">{formatCurrency(t.total)}</p>
+                <div className={`text-xs text-right ${pnlColor(t.profit)}`}>{formatPnl(t.profit)}</div>
-                {(t.type === 'SELL_LONG' || t.type === 'SELL_SHORT') && (
+              )}
-                  <p className={`text-xs ${pnlColor(t.profit)}`}>{formatPnl(t.profit)}</p>
-                )}
-              </div>
             </div>
           ))}
         </div>

src/components/HashtagCard.tsx

@@ -24,15 +24,15 @@ export function HashtagCard({ tag, displayTag, currentPrice, previousPrice, post
       className="block bg-surface-card border border-surface-border hover:border-indigo-500/50 rounded-xl p-4 transition-all hover:shadow-lg hover:shadow-indigo-500/5"
     >
       <div className="flex items-start justify-between gap-2">
-        <div>
+        <div className="min-w-0">
-          <p className="font-semibold text-sm">#{displayTag}</p>
+          <p className="font-semibold text-sm truncate">#{displayTag}</p>
           {postsPerHour !== undefined && (
             <p className="text-xs text-slate-500 mt-0.5">
               {postsPerHour.toFixed(1)} posts/hr
             </p>
           )}
         </div>
-        <div className="text-right">
+        <div className="text-right shrink-0">
           <p className="font-bold text-sm">{formatCurrency(currentPrice)}</p>
           {pctChange !== null && (
             <div