fix: images in /today expanding parent

src/commands/eligible.ts

@@ -26,7 +26,7 @@ export const SKILLED_CLANS: Record<SkilledClan, string> = {
 
 export default {
   inProduction: true,
-  inDevelopment: true,
+  inDevelopment: false,
   inPublic: false,
 
   command: new SlashCommandBuilder()

src/commands/ownedtanks.tsx

@@ -40,7 +40,7 @@ const COMP_TANKS = [
 
 export default {
   inProduction: true,
-  inDevelopment: true,
+  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()

src/commands/today.tsx

@@ -7,7 +7,7 @@ import * as Breakdown from '../components/Breakdown/index.js';
 import NoBattlesInPeriod from '../components/NoBattlesInPeriod.js';
 import PoweredByBlitzStars from '../components/PoweredByBlitzStars.js';
 import TitleBar from '../components/TitleBar.js';
-import Wrapper, { WrapperSize } from '../components/Wrapper.js';
+import Wrapper from '../components/Wrapper.js';
 import { BLITZ_SERVERS } from '../constants/servers.js';
 import usernameAutocomplete from '../core/autocomplete/username.js';
 import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
@@ -32,7 +32,7 @@ import { PlayerClanData } from '../types/playerClanData.js';
 
 export default {
   inProduction: true,
-  inDevelopment: false,
+  inDevelopment: true,
   inPublic: true,
 
   command: new SlashCommandBuilder()
@@ -160,7 +160,7 @@ export default {
     });
 
     const image = await render(
-      <Wrapper size={WrapperSize.Roomy}>
+      <Wrapper>
         <TitleBar
           name={accountInfo[id].nickname}
           nameDiscriminator={
@@ -181,7 +181,6 @@ export default {
 
         <PoweredByBlitzStars />
       </Wrapper>,
-      WrapperSize.Roomy,
     );
 
     const actionRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
@@ -193,7 +192,6 @@ export default {
       files: [image],
       components: [actionRow],
     });
-
   },
 
   autocomplete: usernameAutocomplete,

src/components/Breakdown/components/Row.tsx

@@ -34,6 +34,7 @@ export function Row({
   return (
     <div style={{ display: 'flex', gap: 16 }}>
       <RowDiscriminator name={name} icon={icon} />
+
       <RowStat
         name="Winrate"
         value={`${(winrate * 100).toFixed(2)}%`}

src/components/Breakdown/components/RowDiscriminator.tsx

@@ -22,9 +22,11 @@ export function RowDiscriminator({ name, icon }: RowDiscriminatorProps) {
       {icon && (
         <img
           src={icon}
-          style={{ width: '100%', flex: 1, objectFit: 'cover' }}
+          height={0}
+          style={{ flex: 1, width: '100%', objectFit: 'contain' }}
         />
       )}
+
       <span
         style={{
           color: theme.colors.textLowContrast,

src/components/Wrapper.tsx

@@ -1,25 +1,11 @@
 import { ReactNode } from 'react';
 import { theme } from '../stitches.config.js';
 
-export enum WrapperSize {
-  Regular,
-  Roomy,
-}
-
 export interface WrapperProps {
   children: ReactNode;
-  size?: WrapperSize;
 }
 
-export const WRAPPER_SIZE_WIDTHS: Record<WrapperSize, number> = {
+export default function Wrapper({ children }: WrapperProps) {
-  [WrapperSize.Regular]: 640,
-  [WrapperSize.Roomy]: 800,
-};
-
-export default function Wrapper({
-  children,
-  size = WrapperSize.Regular,
-}: WrapperProps) {
   return (
     <div
       style={{
@@ -27,7 +13,7 @@ export default function Wrapper({
         flexDirection: 'column',
         padding: 16,
         gap: 32,
-        width: WRAPPER_SIZE_WIDTHS[size],
+        width: 640,
         background: 'url(https://i.imgur.com/PhS06NJ.png)',
         color: theme.colors.textHighContrast,
       }}

src/core/ui/render.tsx

@@ -2,7 +2,6 @@ import { Resvg } from '@resvg/resvg-js';
 import { readFile } from 'fs';
 import { ReactNode } from 'react';
 import satori from 'satori';
-import { WRAPPER_SIZE_WIDTHS, WrapperSize } from '../../components/Wrapper.js';
 
 const FONT_NAME = 'Roboto';
 const FONT_FILES = ['Roboto', 'Roboto-Bold', 'Roboto-Black'];
@@ -21,12 +20,9 @@ const [robotoFlex, robotoFlexBold, robotoFlexBlack] = await Promise.all(
 );
 console.log('Fonts imported');
 
-export default async function render(
+export default async function render(element: ReactNode) {
-  element: ReactNode,
-  size: WrapperSize = WrapperSize.Regular,
-) {
   const svg = await satori(element, {
-    width: WRAPPER_SIZE_WIDTHS[size],
+    width: 640,
     fonts: [
       { data: robotoFlex, name: FONT_NAME, weight: 400 },
       { data: robotoFlexBold, name: FONT_NAME, weight: 700 },