@rpg-engine/long-bow 0.8.202 → 0.8.205

package/dist/utils/numberUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Formats a number using modern gaming standards (k for thousands, M for millions, B for billions).
+ * @param num The number to format
+ * @param useKNotation Whether to use the k/M/B notation
+ * @returns Formatted string
+ */
+export declare const formatMMORPGNumber: (num: number, useKNotation?: boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.202",
+  "version": "0.8.205",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/DCWallet/DCWalletContent.tsx

@@ -5,6 +5,7 @@ import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { DCRateStrip } from '../shared/DCRateStrip';
 import { DCHistoryPanel, IDCTransaction } from './DCHistoryPanel';
 import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 export interface IDCWalletContentProps {
   dcBalance: number;
@@ -44,7 +45,6 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
   searchResults,
 }) => {
   const usdValue = (dcBalance / DC_TO_USD).toFixed(2);
-  const goldValue = (dcBalance * DC_TO_GOLD_SWAP_RATE).toLocaleString();
 
   const tabs = [
     {
@@ -86,8 +86,10 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
         <BalanceTop>
           <BalanceBlock>
             <BalanceLabel>DC BALANCE</BalanceLabel>
-            <BalanceAmount>{dcBalance.toLocaleString()} <BalanceDC>DC</BalanceDC></BalanceAmount>
-            <BalanceEquiv>≈ ${usdValue} USD &nbsp;·&nbsp; {goldValue} Gold</BalanceEquiv>
+            <BalanceAmount><MMORPGNumber value={dcBalance} /> <BalanceDC>DC</BalanceDC></BalanceAmount>
+            <BalanceEquiv>
+              ≈ ${usdValue} USD &nbsp;·&nbsp; <MMORPGNumber value={dcBalance * DC_TO_GOLD_SWAP_RATE} /> Gold
+            </BalanceEquiv>
           </BalanceBlock>
           {onBuyDC && (
             <BuyButton onPointerDown={onBuyDC} role="button" tabIndex={0} title="Buy Definya Coins">

package/src/components/Item/Inventory/ErrorBoundary.tsx

@@ -1,10 +1,10 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
-import atlasJSON from '../../../mocks/atlas/items/items.json';
-import atlasIMG from '../../../mocks/atlas/items/items.png';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 
 interface Props {
   children?: ReactNode;
+  atlasJSON?: any;
+  atlasIMG?: any;
 }
 
 interface State {
@@ -27,13 +27,30 @@ export class ErrorBoundary extends Component<Props, State> {
 
   public render() {
     if (this.state.hasError) {
+      if (this.props.atlasJSON && this.props.atlasIMG) {
+        return (
+          <SpriteFromAtlas
+            atlasIMG={this.props.atlasIMG}
+            atlasJSON={this.props.atlasJSON}
+            spriteKey={'others/no-image.png'}
+            imgScale={3}
+          />
+        );
+      }
       return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={'others/no-image.png'}
-          imgScale={3}
-        />
+        <div style={{
+          width: '32px',
+          height: '32px',
+          border: '1px dashed #ef4444',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: '#ef4444',
+          fontSize: '8px',
+          textAlign: 'center'
+        }}>
+          ERR
+        </div>
       );
     }
 

package/src/components/Item/Inventory/ItemPropertyColorSelector.tsx

@@ -7,6 +7,8 @@ import { ConfirmModal } from '../../ConfirmModal';
 import { DraggableContainer } from '../../DraggableContainer';
 import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
 
+import { MMORPGNumber } from '../../../components/shared/MMORPGNumber';
+
 interface IColorSelectorProps {
   selectedColor: string;
   isOpen: boolean;
@@ -59,7 +61,7 @@ export const ColorSelector: React.FC<IColorSelectorProps> = ({
       <p>
         Cost:
         <CostDisplay>
-          {costWarning?.cost.toLocaleString()}
+          <MMORPGNumber value={costWarning?.cost || 0} />
           {costWarning?.currency || ' gold'}
         </CostDisplay>
       </p>

package/src/components/Marketplace/BuyOrderPanel.tsx

@@ -15,8 +15,8 @@ import { BuyOrderDetailsModal } from './BuyOrderDetailsModal';
 import { BuyOrderRow } from './BuyOrderRows';
 
 export interface IBuyOrderPanelProps {
-  atlasJSON?: any;
-  atlasIMG?: any;
+  atlasJSON: any;
+  atlasIMG: any;
   selectedBlueprint?: IMarketplaceBlueprintSummary;
   onOpenBlueprintSearch: () => void;
   onCloseDetails?: () => void;

package/src/components/Marketplace/BuyOrderRows.tsx

@@ -12,11 +12,12 @@ import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SimpleTooltip } from '../shared/SimpleTooltip';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 export interface IBuyOrderRowProps {
   buyOrder: IMarketplaceBuyOrderItem;
-  atlasJSON?: any;
-  atlasIMG?: any;
+  atlasJSON: any;
+  atlasIMG: any;
   isOwn?: boolean;
   onCancel?: (buyOrderId: string) => void;
   onFulfill?: (buyOrderId: string) => void;
@@ -25,7 +26,10 @@ export interface IBuyOrderRowProps {
 }
 
 const BUY_ORDER_DURATION_WEEKS = 4;
-type BuyOrderWithQuantityFallback = IMarketplaceBuyOrderItem & { quantity?: number };
+type BuyOrderWithQuantityFallback = IMarketplaceBuyOrderItem & {
+  quantity?: number;
+  itemTexturePath?: string | null;
+};
 
 // Format "Active" → "ACTIVE", "Fulfilled" → "FULFILLED"
 const formatStatusLabel = (status: string): string => {
@@ -74,7 +78,9 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
   const stackQty = (buyOrder as BuyOrderWithQuantityFallback).stackQty ?? (buyOrder as BuyOrderWithQuantityFallback).quantity;
   const timeRemaining =
     buyOrder.status === MarketplaceBuyOrderStatus.Active ? getTimeRemaining(buyOrder.createdAt) : null;
-  const spriteKey = resolveAtlasSpriteKey(atlasJSON, buyOrder.itemBlueprintKey);
+  const textureLookupKey =
+    (buyOrder as BuyOrderWithQuantityFallback).itemTexturePath ?? buyOrder.itemBlueprintKey;
+  const spriteKey = resolveAtlasSpriteKey(atlasJSON, textureLookupKey);
   const rarityGlow = buyOrder.itemRarity ? RARITY_COLORS[buyOrder.itemRarity] || null : null;
 
   return (
@@ -119,7 +125,7 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
                   </SimpleTooltip>
                 </GoldIcon>
               )}
-              <GoldPrice>{buyOrder.maxPrice}</GoldPrice>
+              <GoldPrice><MMORPGNumber value={buyOrder.maxPrice} /></GoldPrice>
             </GoldPriceRow>
             {showRequestTag && (
               <LabelPill
@@ -182,8 +188,8 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
 export interface IGroupedBuyOrderRowProps {
   bestOrder: IMarketplaceBuyOrderItem;
   otherOrders: IMarketplaceBuyOrderItem[];
-  atlasJSON?: any;
-  atlasIMG?: any;
+  atlasJSON: any;
+  atlasIMG: any;
   isOwn?: boolean;
   onCancel?: (buyOrderId: string) => void;
   onFulfill?: (buyOrderId: string) => void;

package/src/components/Marketplace/CharacterDetailModal.tsx

@@ -34,6 +34,15 @@ const RARITY_COLORS: Record<string, string> = {
 const rarityColor = (rarity?: string) =>
   RARITY_COLORS[(rarity ?? '').toLowerCase()] ?? RARITY_COLORS.common;
 
+const formatEquipmentSlot = (slot?: string) => {
+  if (!slot) return 'Unknown';
+
+  return slot
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
 export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
   listing,
   isOpen,
@@ -103,7 +112,11 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
         >
           <Header>
             <Title>Character Details</Title>
-            <CloseButton onPointerDown={handleClose} aria-label="Close" type="button">
+            <CloseButton
+              onPointerDown={handleClose}
+              aria-label="Close"
+              type="button"
+            >
               <FaTimes />
             </CloseButton>
           </Header>
@@ -157,9 +170,26 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
                 <EquipmentList>
                   {snap.equipment.map((eq, i) => (
                     <EquipmentRow key={i}>
-                      <EquipSlot>{eq.slot}</EquipSlot>
-                      <EquipName>{eq.itemName}</EquipName>
-                      <RarityBadge $rarity={eq.rarity}>{eq.rarity || 'Common'}</RarityBadge>
+                      <EquipmentSprite>
+                        <SpriteFromAtlas
+                          atlasIMG={atlasIMG}
+                          atlasJSON={atlasJSON}
+                          spriteKey={eq.itemKey}
+                          imgScale={2}
+                          width={32}
+                          height={32}
+                          centered
+                        />
+                      </EquipmentSprite>
+                      <EquipMeta>
+                        <EquipName>{eq.itemName}</EquipName>
+                        <EquipDetails>
+                          <EquipSlot>{formatEquipmentSlot(eq.slot)}</EquipSlot>
+                          <RarityBadge $rarity={eq.rarity}>
+                            {eq.rarity || 'Common'}
+                          </RarityBadge>
+                        </EquipDetails>
+                      </EquipMeta>
                     </EquipmentRow>
                   ))}
                 </EquipmentList>
@@ -239,9 +269,17 @@ const ModalContent = styled.div`
   pointer-events: auto;
   animation: ${scaleIn} 0.15s ease-out;
 
-  &::-webkit-scrollbar { width: 6px; }
-  &::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
-  &::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.3); border-radius: 4px; }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(245, 158, 11, 0.3);
+    border-radius: 4px;
+  }
 `;
 
 const Header = styled.div`
@@ -268,7 +306,9 @@ const CloseButton = styled.button`
   display: flex;
   align-items: center;
 
-  &:hover { color: #fff; }
+  &:hover {
+    color: #fff;
+  }
 `;
 
 const HeroSection = styled.div`
@@ -285,8 +325,8 @@ const SpriteContainer = styled.div`
   width: 96px;
   height: 96px;
   flex-shrink: 0;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.06);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 6px;
 `;
 
@@ -320,7 +360,9 @@ const ModeBadge = styled.span<{ $hardcore?: boolean }>`
   font-family: 'Press Start 2P', cursive !important;
   font-size: 0.35rem !important;
   color: ${({ $hardcore }) => ($hardcore ? '#ef4444' : '#6b7280')} !important;
-  border: 1px solid ${({ $hardcore }) => ($hardcore ? 'rgba(239,68,68,0.4)' : 'rgba(107,114,128,0.3)')};
+  border: 1px solid
+    ${({ $hardcore }) =>
+      $hardcore ? 'rgba(239,68,68,0.4)' : 'rgba(107,114,128,0.3)'};
   border-radius: 3px;
   padding: 2px 6px;
   text-transform: uppercase;
@@ -330,7 +372,7 @@ const ModeBadge = styled.span<{ $hardcore?: boolean }>`
 
 const Divider = styled.hr`
   border: none;
-  border-top: 1px solid rgba(255,255,255,0.06);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
   margin: 0;
   flex-shrink: 0;
 `;
@@ -354,6 +396,10 @@ const MetaColumns = styled.div`
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   align-items: start;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
 `;
 
 const SkillsList = styled.div`
@@ -393,9 +439,35 @@ const EquipmentRow = styled.div`
   align-items: center;
   gap: 8px;
   padding: 5px 8px;
-  background: rgba(255,255,255,0.02);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
+  min-width: 0;
+`;
+
+const EquipmentSprite = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+`;
+
+const EquipMeta = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+`;
+
+const EquipDetails = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
 `;
 
 const EquipSlot = styled.span`
@@ -403,8 +475,7 @@ const EquipSlot = styled.span`
   font-size: 0.34rem !important;
   color: #6b7280 !important;
   text-transform: capitalize;
-  min-width: 52px;
-  flex-shrink: 0;
+  min-width: 0;
 `;
 
 const EquipName = styled.span`
@@ -412,6 +483,10 @@ const EquipName = styled.span`
   font-size: 0.38rem !important;
   color: #d1d5db !important;
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const RarityBadge = styled.span<{ $rarity?: string }>`
@@ -445,6 +520,11 @@ const FooterActions = styled.div`
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+    align-items: stretch;
+  }
 `;
 
 const PriceDisplay = styled.div`
@@ -473,7 +553,9 @@ const BuyBtn = styled(CTAButton)`
   padding: 10px 18px;
   height: 34px;
 
-  span { font-size: 0.6rem; }
+  span {
+    font-size: 0.6rem;
+  }
 `;
 
 const PendingNotice = styled.span`

package/src/components/Marketplace/CharacterListingModal.tsx

@@ -9,6 +9,7 @@ import { Input } from '../Input';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { DCRateStrip } from '../shared/DCRateStrip';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 export interface ICharacterListingModalProps {
   isOpen: boolean;
@@ -176,7 +177,7 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
                     centered
                   />
                 </DCCoinWrapper>
-                <PricePreviewAmount>{Number(price).toLocaleString()} DC</PricePreviewAmount>
+                <PricePreviewAmount><MMORPGNumber value={Number(price)} /> DC</PricePreviewAmount>
               </PricePreview>
             )}
             <DCRateStrip />

package/src/components/Marketplace/GroupedRowContainer.tsx

@@ -57,29 +57,29 @@ const GroupMeta = styled.div<{ $rightInset: number }>`
   transform: translateY(-50%);
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding-left: 10px;
-  background: linear-gradient(to left, rgba(25, 23, 23, 0.85), rgba(25, 23, 23, 0));
+  gap: 16px;
+  background: transparent;
   pointer-events: none;
-  z-index: 1;
+  z-index: 10;
 `;
 
 const OfferBadge = styled.span`
   font-family: 'Press Start 2P', cursive;
   font-size: 0.5rem;
-  color: rgba(255, 255, 255, 0.5);
-  background: rgba(255, 255, 255, 0.08);
-  padding: 2px 6px;
-  border-radius: 8px;
+  color: #fbbf24;
+  background: transparent;
   white-space: nowrap;
+  letter-spacing: 0.5px;
+  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
 `;
 
 const Chevron = styled.span<{ $expanded: boolean }>`
   display: inline-block;
-  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.8rem;
+  color: #fbbf24;
   transition: transform 0.2s ease;
   transform: rotate(${({ $expanded }) => ($expanded ? '90deg' : '0deg')});
+  text-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
 `;
 
 const SubRows = styled.div`

package/src/components/Marketplace/HistoryPanel.tsx

@@ -1,5 +1,4 @@
 import {
-  formatDCAmount,
   goldToDC,
   IMarketplaceTransaction,
   MarketplaceTransactionType,
@@ -7,6 +6,7 @@ import {
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 import { Dropdown } from '../Dropdown';
 import { IOptionsProps } from '../Dropdown';
 import { Pager } from '../Pager';
@@ -22,8 +22,8 @@ export interface IHistoryPanelProps {
   selectedType: string;
   onTypeChange: (type: string) => void;
   onPageChange: (page: number) => void;
-  atlasJSON?: any;
-  atlasIMG?: any;
+  atlasJSON: any;
+  atlasIMG: any;
   dcToGoldSwapRate?: number;
 }
 
@@ -177,7 +177,7 @@ export const HistoryPanel: React.FC<IHistoryPanelProps> = ({
                       )}
                       <DCPrice $type={tx.type}>
                         {getGoldSign(tx.type)}
-                        {formatDCAmount(getDCEquivalentPrice(tx.goldAmount))}
+                        <MMORPGNumber value={getDCEquivalentPrice(tx.goldAmount)} />
                       </DCPrice>
                     </DCPriceRow>
                   ) : (
@@ -197,7 +197,7 @@ export const HistoryPanel: React.FC<IHistoryPanelProps> = ({
                       )}
                       <GoldAmount $type={tx.type}>
                         {getGoldSign(tx.type)}
-                        {tx.goldAmount}g
+                        <MMORPGNumber value={tx.goldAmount} />g
                       </GoldAmount>
                     </GoldPriceRow>
                   )}

package/src/components/Marketplace/MarketplaceBuyModal.tsx

@@ -1,9 +1,9 @@
-import { formatDCAmount } from '@rpg-engine/shared';
 import React, { useCallback, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
 import { Button, ButtonTypes } from '../Button';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 export type MarketplacePaymentMethod = 'gold' | 'dc';
 
@@ -60,7 +60,7 @@ export const MarketplaceBuyModal: React.FC<IMarketplaceBuyModalProps> = ({
               <RadioCircle $selected={selected === 'gold'} />
               <OptionText>
                 <OptionLabel>Gold</OptionLabel>
-                <OptionSub>{goldPrice.toLocaleString()} gold</OptionSub>
+                <OptionSub><MMORPGNumber value={goldPrice} /> gold</OptionSub>
               </OptionText>
             </RadioOption>
 
@@ -73,10 +73,10 @@ export const MarketplaceBuyModal: React.FC<IMarketplaceBuyModalProps> = ({
               <OptionText>
                 <OptionLabel $disabled={!hasSufficientDC}>Definya Coin</OptionLabel>
                 <OptionSub>
-                  {formatDCAmount(dcEquivalentPrice)} DC
+                  <MMORPGNumber value={dcEquivalentPrice} /> DC
                   {' '}
                   <BalanceHint $insufficient={!hasSufficientDC}>
-                    ({formatDCAmount(dcBalance)} available)
+                    (<MMORPGNumber value={dcBalance} /> available)
                   </BalanceHint>
                 </OptionSub>
               </OptionText>

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -20,6 +20,7 @@ import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SimpleTooltip } from '../shared/SimpleTooltip';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 export interface IMarketPlaceRowsPropos {
   atlasJSON: any;
@@ -34,6 +35,8 @@ export interface IMarketPlaceRowsPropos {
   onMarketPlaceItemRemove?: () => void;
   onDCCoinClick?: () => void;
   disabled?: boolean;
+  /** If true, adds padding-right to details to avoid overlapping with grouped badges */
+  $isGrouped?: boolean;
 }
 
 export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
@@ -49,6 +52,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   onMarketPlaceItemRemove,
   onDCCoinClick,
   disabled,
+  $isGrouped,
 }) => {
   const renderGems = (item: IItem) => {
     return item.attachedGems && onRenderGems(item);
@@ -91,7 +95,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
           </ItemInfoWrapper>
         </SpriteContainer>
 
-        <ItemDetails>
+        <ItemDetails $isGrouped={$isGrouped}>
           <ItemName>
             <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
               {item.name}
@@ -110,7 +114,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
                     />
                   </SimpleTooltip>
                 </GoldIcon>
-                <GoldPrice>{itemPrice}</GoldPrice>
+                <GoldPrice><MMORPGNumber value={itemPrice} /></GoldPrice>
               </GoldPriceRow>
             )}
             {dcEquivalentPrice !== undefined && (
@@ -174,7 +178,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
   onBuy,
   onDCCoinClick,
 }) => {
-  const makeRow = (listing: IMarketplaceItem) => {
+  const makeRow = (listing: IMarketplaceItem, isMain: boolean = false) => {
     const listingCurrency = listing.acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
     const isDcOnly = listingCurrency === MarketplaceAcceptedCurrency.Dc;
     const showDcPrice = isDcOnly || (dcToGoldSwapRate > 0 && listingCurrency !== MarketplaceAcceptedCurrency.Gold);
@@ -192,16 +196,17 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
         onMarketPlaceItemBuy={() => onBuy(listing._id)}
         onDCCoinClick={isDcOnly ? undefined : onDCCoinClick}
         disabled={listing.owner === characterId}
+        $isGrouped={isMain}
       />
     );
   };
 
   return (
     <GroupedRowContainer
-      mainRow={makeRow(bestListing)}
-      subRows={otherListings.map(makeRow)}
+      mainRow={makeRow(bestListing, true)}
+      subRows={otherListings.map(l => makeRow(l, false))}
       badgeLabel="offers"
-      metaRightInset={132}
+      metaRightInset={180}
     />
   );
 };
@@ -221,12 +226,13 @@ const SpriteContainer = styled.div`
   min-width: 44px; /* Ensure wide stack quantities don't overlap ItemDetails */
 `;
 
-const ItemDetails = styled.div`
+const ItemDetails = styled.div<{ $isGrouped?: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   min-width: 0;
   margin-left: 1rem;
+  padding-right: ${({ $isGrouped }) => ($isGrouped ? '280px' : '0')};
 `;
 
 const ItemName = styled.div`