wevm/frog

Root element `width` and `height` don't match `imageAspectRatio` unless set explicitly

Open

#502 aberto em 15 de out. de 2024

Ver no GitHub
 (1 comment) (0 reactions) (1 assignee)TypeScript (97 forks)user submission
Good First IssueP: LowT: Bug

Métricas do repositório

Stars
 (440 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

Describe the bug

This issue is likely related to #463

In this example, the text will overflow the square frame container. While the frame itself displays as square, the content inside it presumably takes up the width and height of a frame with a rectangular aspect ratio even though width and height are set to 100%.

app.frame("/test", async (c) => {
  return c.res({
    image: (
      <div
        style={{
          color: "white",
          display: "flex",
          fontSize: 60,
          width: "100%",
          height: "100%",
        }}
      >
        This is a really long line of text that overflows the square frame image
        because width and height were not set
      </div>
    ),
    imageAspectRatio: "1:1",
    // Uncommenting this fixes the issue
    // imageOptions: {
    //   width: 1200,
    //   height: 1200,
    // },
  });
});

image

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Frog Version

0.17.4

TypeScript Version

No response

Check existing issues

Anything else?

No response

Guia do colaborador

Direção de pesquisa
Investigue a relação entre imageAspectRatio e as dimensões do elemento raiz do frame. Verifique o código no componente de frame (provavelmente em src/ ou packages/) onde imageAspectRatio é aplicado. A issue relacionada #463 pode fornecer pistas. A correção provavelmente envolve definir largura/altura padrão com base na proporção quando dimensões explícitas não são fornecidas. Examine como os estilos de largura e altura da div raiz são calculados e garanta que correspondam à proporção mesmo quando não definidos explicitamente.
Pilha de tecnologia
typescript
Domain
backend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
TypeScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70