more fixes

frontend/src/layout/AppLayout.tsx

@@ -139,10 +139,23 @@ const LayoutContent: React.FC = () => {
       accentColor = 'purple';
     }
     
-    // Set content balance - show as "X/Y Content" for simplicity
+    // Format credit value with K/M suffix for large numbers
+    const formatCredits = (val: number): string => {
+      if (val >= 1000000) {
+        const millions = val / 1000000;
+        return millions % 1 === 0 ? `${millions}M` : `${millions.toFixed(1)}M`;
+      }
+      if (val >= 1000) {
+        const thousands = val / 1000;
+        return thousands % 1 === 0 ? `${thousands}K` : `${thousands.toFixed(1)}K`;
+      }
+      return val.toString();
+    };
+    
+    // Set credit balance - show as "used/total Credits"
     setMetrics([{
-      label: 'Content',
-      value: total > 0 ? `${remaining}/${total}` : remaining,
+      label: 'Credits',
+      value: total > 0 ? `${formatCredits(remaining)}/${formatCredits(total)}` : formatCredits(remaining),
       accentColor,
     }]);
   }, [balance, isAuthenticated, setMetrics]);
@@ -160,8 +173,8 @@ const LayoutContent: React.FC = () => {
       >
         <AppHeader />
         {/* Pending Payment Banner - Shows when account status is 'pending_payment' */}
-        <PendingPaymentBanner className="mx-4 mt-4 md:mx-6 md:mt-6" />
-        <div className="p-4 pb-20 md:p-6 md:pb-24">
+        <PendingPaymentBanner className="mx-4 mt-2 md:mx-6 md:mt-2" />
+        <div className="px-4 pt-1.5 pb-20 md:px-6 md:pt-1.5 md:pb-24">
           <Outlet />
         </div>
       </div>