---
sidebar_position: 6
title: "Suporte Responsivo"
---

Esta página descreve como a plataforma se adapta a diferentes dispositivos e tamanhos de tela.

## Estratégia geral

```mermaid
graph TD
    HOOK[**useIsMobile**
detecta largura da tela] --> STATE[**Estado global**
isMobile: boolean]
    STATE --> UI[**Componentes React**
adaptam layout]
    STATE --> BLOCKLY[**Toolbox Blockly**
versão mobile simplificada]
    UI --> CSS[**TailwindCSS**
classes responsivas]
    BLOCKLY --> TOUCH[Interações touch-friendly]
```

A detecção de dispositivo é centralizada no hook `useIsMobile`, que expõe um booleano consumido pelos componentes que precisam adaptar comportamento ou layout.

Referência externa: https://react.dev/reference/react/hooks

## Hook useIsMobile

O hook observa `window.innerWidth` e atualiza o estado quando o tamanho da janela muda:

```javascript
// app/src/hooks/useIsMobile.js
import { useState, useEffect } from 'react';

export function useIsMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < breakpoint);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, [breakpoint]);

  return isMobile;
}
```

## Breakpoints com TailwindCSS

```mermaid
graph LR
    M["**Mobile** < 640px"] --> SM["**sm** ≥ 640px"]
    SM --> MD["**md** ≥ 768px"]
    MD --> LG["**lg** ≥ 1024px"]
    LG --> XL["**xl** ≥ 1280px"]
```

A estilização usa classes utilitárias do TailwindCSS com prefixos de breakpoint (`sm:`, `md:`, `lg:`).
O layout é pensado mobile-first: o estilo base cobre telas pequenas e os prefixos adicionam adaptações progressivas.

Referência externa: https://tailwindcss.com/docs/responsive-design

## Adaptação do Blockly em mobile

O editor Blockly tem comportamento diferente em telas pequenas:

- Toolbox simplificada com menos categorias visíveis simultaneamente.
- Workspace com suporte a gestos touch (pan e pinch-to-zoom).
- Controles de zoom e reset reposicionados para facilitar acesso em tela pequena.

Arquivo de referência: `app/src/blockly/mobileToolbox.js`

Referência externa: https://developers.google.com/blockly/guides/configure/advanced/zoom

## Considerações para novas telas

- Sempre teste em viewport mobile antes de publicar uma tela nova.
- Use `useIsMobile` para bifurcar comportamentos, não apenas estilos.
- Evite componentes com largura fixa em pixels sem fallback responsivo.
