fix(logs): vertically align billing source icons on mobile (#7760)

web/src/features/usage-logs/components/__tests__/cost-display.test.tsx

@@ -147,6 +147,27 @@ describe('log cost display', () => {
     expect(screen.getByRole('img', { name: 'Subscription' })).toBeVisible()
   })
 
+  test.each([
+    { source: 'subscription', label: 'Subscription' },
+    { source: 'wallet', label: 'Wallet' },
+  ])(
+    'vertically centers the $source icon within its container',
+    ({ source, label }) => {
+      renderCost({
+        quota: 5000,
+        other: { billing_source: source },
+        showBillingSource: true,
+      })
+
+      // Mobile cards give inline-flex descendants a minimum height, so the
+      // source container must center its smaller icon independently of the badge.
+      expect(screen.getByRole('img', { name: label })).toHaveClass(
+        'inline-flex',
+        'items-center'
+      )
+    }
+  )
+
   test.each([
     { source: 'subscription', label: 'Subscription' },
     { source: 'wallet', label: 'Wallet' },

web/src/features/usage-logs/components/log-cost-display.tsx

@@ -115,7 +115,7 @@ export function LogCostDisplay(props: LogCostDisplayProps) {
               <TooltipTrigger
                 render={
                   <span
-                    className='inline-flex shrink-0 cursor-help'
+                    className='inline-flex shrink-0 cursor-help items-center'
                     role='img'
                     aria-label={source}
                     tabIndex={0}