acai-ui 1.65.5

package/src/components/error-log/acai-ui-error-log.vue

@@ -0,0 +1,318 @@
+<template>
+  <q-dialog v-model="aberto">
+    <div class="error-panel">
+      <div class="error-panel__header">
+        <acai-ui-icon name="error_outline" size="lg" color="white" />
+        <span class="error-panel__titulo">{{ tituloAmigavel }}</span>
+        <q-space />
+        <q-btn
+          flat
+          dense
+          round
+          color="white"
+          icon="close"
+          size="sm"
+          @click="fechar"
+        />
+      </div>
+
+      <div class="error-panel__corpo">
+        <p class="error-panel__mensagem">{{ mensagemAmigavel }}</p>
+
+        <q-expansion-item
+          v-if="ehDesenvolvimento"
+          dense
+          expand-separator
+          icon="code"
+          label="Detalhes técnicos"
+          class="error-panel__dev"
+          header-class="error-panel__dev-header"
+        >
+          <div class="error-panel__dev-content">
+            <div class="error-panel__dev-actions">
+              <q-btn
+                flat
+                dense
+                size="sm"
+                color="grey-4"
+                label="Copiar JSON"
+                icon="content_copy"
+                no-caps
+                @click="copiarMensagem"
+              />
+            </div>
+            <error-log-json-tree :value="payload" />
+          </div>
+        </q-expansion-item>
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { copyToClipboard } from "quasar";
+import { notificacao } from "../../hooks/notify";
+import type { ErrorLogProps } from "./acai-ui-error-log-interface";
+import ErrorLogJsonTree from "./acai-ui-error-log-json-tree.vue";
+import { redigirSensiveis } from "./acai-ui-error-log-redigir";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+
+const props = defineProps<ErrorLogProps>();
+const aberto = defineModel<boolean>("aberto", { required: true });
+
+// `import.meta.env.DEV` só como DEFAULT: quem decide em runtime (env de ambiente,
+// não modo de build) passa a prop.
+const ehDesenvolvimento = computed(() =>
+  props.ehDesenvolvimento ?? import.meta.env.DEV,
+);
+
+const responseData = computed(() => {
+  const raw = props.error?.response?.data;
+  if (!raw || typeof raw !== "object") return null;
+  return raw as Record<string, unknown>;
+});
+
+const status = computed(() => props.error?.response?.status);
+
+const TITULO_POR_STATUS: Record<number, string> = {
+  400: "Dados inválidos",
+  401: "Não autorizado",
+  403: "Acesso negado",
+  404: "Não encontrado",
+  409: "Conflito de dados",
+  422: "Erro de validação",
+  500: "Erro no servidor",
+  502: "Gateway inválido",
+  503: "Serviço indisponível",
+};
+
+const tituloAmigavel = computed(() => {
+  if (status.value && TITULO_POR_STATUS[status.value])
+    return TITULO_POR_STATUS[status.value];
+  return props.titulo || "Erro na requisição";
+});
+
+const MENSAGEM_POR_STATUS: Record<number, string> = {
+  400: "Os dados informados são inválidos. Verifique e tente novamente.",
+  401: "Sessão expirada. Por favor, faça login novamente.",
+  403: "Você não tem permissão para acessar este recurso.",
+  404: "O recurso solicitado não foi encontrado.",
+  409: "Conflito com o estado atual do recurso.",
+  422: "Os dados informados são inválidos. Verifique e tente novamente.",
+  500: "Ocorreu um erro interno no servidor. Tente novamente mais tarde.",
+  502: "O servidor recebeu uma resposta inválida.",
+  503: "O serviço está temporariamente indisponível.",
+};
+
+/** Lê uma chave string não-vazia de um objeto solto do backend. */
+const texto = (
+  obj: Record<string, unknown> | undefined | null,
+  chave: string,
+): string | null => {
+  const valor = obj?.[chave];
+  return typeof valor === "string" && valor ? valor : null;
+};
+
+const mensagemAmigavel = computed(() => {
+  // Regra de domínio do consumidor ganha de tudo.
+  if (props.mensagem) return props.mensagem;
+
+  const data = responseData.value;
+
+  // Mensagem do backend. `mensagem`/`descricao` são a convenção dos backends
+  // para-springboot (o `ApiErroDto` responde em português); `message` fica por
+  // compatibilidade e mantém a precedência que já existia.
+  const doTopo =
+    texto(data, "message") ?? texto(data, "mensagem") ?? texto(data, "descricao");
+  if (doTopo) return doTopo;
+
+  // Mensagem aninhada
+  const info = data?.informacao as Record<string, unknown> | undefined;
+  const body = info?.body as Record<string, unknown> | undefined;
+  const doBody = texto(body, "message") ?? texto(body, "mensagem");
+  if (doBody) return doBody;
+
+  // Fallback por status
+  if (status.value && MENSAGEM_POR_STATUS[status.value])
+    return MENSAGEM_POR_STATUS[status.value];
+
+  return props.error?.message || "Ocorreu um erro inesperado.";
+});
+
+const parseJsonSeguro = (valor: unknown): unknown => {
+  if (typeof valor !== "string") return valor;
+  const texto = valor.trim();
+  if (!texto) return valor;
+  if (
+    (texto.startsWith("{") && texto.endsWith("}")) ||
+    (texto.startsWith("[") && texto.endsWith("]"))
+  ) {
+    try {
+      return JSON.parse(texto);
+    } catch {
+      return valor;
+    }
+  }
+  return valor;
+};
+
+const payload = computed(() => {
+  const error = props.error;
+  if (!error) return {};
+  const respData = parseJsonSeguro(error.response?.data);
+  const objData =
+    respData && typeof respData === "object" && !Array.isArray(respData)
+      ? (respData as Record<string, unknown>)
+      : undefined;
+  // `mensagem` também: o backend para-springboot não usa a chave em inglês.
+  const mensagemDoData = texto(objData, "message") ?? texto(objData, "mensagem");
+  const requestData = parseJsonSeguro(error.config?.data);
+  // Redige o objeto INTEIRO: a credencial pode estar no corpo da requisição,
+  // nos headers ou ecoada de volta no corpo da resposta.
+  return redigirSensiveis({
+    message: mensagemDoData ?? error.message ?? "",
+    response: {
+      status: error.response?.status,
+      data: respData,
+      headers: error.response?.headers,
+    },
+    config: {
+      baseURL: error.config?.baseURL,
+      url: error.config?.url,
+      method: error.config?.method,
+      params: error.config?.params,
+      data: requestData,
+    },
+    code: error.code,
+  }, props.camposSensiveis ?? []);
+});
+
+const copiarMensagem = async (): Promise<void> => {
+  await copyToClipboard(JSON.stringify(payload.value, null, 2));
+  notificacao({
+    color: "positive",
+    message: "Conteúdo copiado para a área de transferência.",
+  });
+};
+
+const fechar = (): void => {
+  aberto.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.error-panel {
+  width: 100%;
+  max-width: 800px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--acai-elevation, 0 8px 32px rgba(0, 0, 0, 0.2));
+  background: var(--acai-surface, #fff);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    // Ícone + título + botão de fechar. Título longo num celular empurra o
+    // fechar pra fora da faixa colorida, e aí não há como sair do painel.
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 8px 10px 16px;
+    background: var(--q-negative, #{$negative});
+    color: white;
+  }
+
+  &__titulo {
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  &__corpo {
+    padding: 16px;
+  }
+
+  &__mensagem {
+    margin: 0;
+    color: var(--acai-text, #333);
+    font-size: 0.9rem;
+    line-height: 1.55;
+  }
+
+  // `header-class` do QExpansionItem cai num elemento INTERNO do componente
+  // filho (root = .q-expansion-item, header = neto), que NÃO recebe o atributo
+  // de escopo. Sem `:deep()` a regra não casa com nada — era o caso aqui, e o
+  // label herdava `currentColor`: o Quasar passa `dark` ao QItem, que no tema
+  // escuro pinta o texto de CLARO, sumindo sobre o painel.
+  // Cor normal (não muted): é um controle clicável, e cinza-apagado em elemento
+  // interativo fica abaixo do 4.5:1 do eMAG 4.1.
+  :deep(.error-panel__dev-header) {
+    font-size: 0.8rem;
+    color: var(--acai-text, #333);
+    min-height: 36px;
+  }
+
+  &__dev {
+    margin-top: 12px;
+    border-top: 1px solid var(--acai-border-subtle, #eee);
+
+    &-actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 6px;
+    }
+
+    &-content {
+      background: #0d1117;
+      border-radius: 8px;
+      padding: 12px;
+      max-height: 380px;
+      overflow: auto;
+      margin-top: 8px;
+      // Só para ponteiro fino (ver `scss/_scrollbar.scss`): dimensão explícita
+      // aqui desliga a barra overlay do celular e desenha a clássica no lugar,
+      // permanente e ocupando espaço.
+      @media (pointer: fine) {
+        scrollbar-color: #30363d transparent;
+
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: #30363d;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+}
+
+// Fallbacks do tema ESCURO. Todo `var(--acai-*, …)` acima cai num valor CLARO
+// quando a camada de tokens não está presente (consumidor em versão antiga da
+// lib, ou que importa só parte do `/styles`) — o resultado é este painel branco
+// dentro de um app escuro, com o texto do expansion lavado por cima.
+// Repetir os valores escuros aqui deixa o modal correto mesmo sem os tokens; se
+// eles existirem, o `var()` resolve primeiro e nada muda.
+.body--dark .error-panel {
+  background: var(--acai-surface, #171f2e);
+
+  .error-panel__mensagem {
+    color: var(--acai-text, #dde3ee);
+  }
+
+  .error-panel__dev {
+    border-top-color: var(--acai-border-subtle, #232d40);
+  }
+
+  :deep(.error-panel__dev-header) {
+    color: var(--acai-text, #dde3ee);
+  }
+
+  // Separador do expansion: o Quasar usa preto translúcido, invisível no escuro.
+  :deep(.q-separator) {
+    background: var(--acai-border, #2a3446);
+  }
+}
+</style>

package/src/components/file/acai-ui-file-interface.ts

@@ -0,0 +1,28 @@
+import type { QFileProps } from 'quasar'
+
+type StateProps = Pick<
+  QFileProps,
+  'dense' | 'disable' | 'readonly' | 'autofocus' | 'filled' | 'borderless'
+>
+
+type VariantProps = Pick<QFileProps, 'bgColor' | 'color'>
+type ReturnProps = Pick<QFileProps, 'label' | 'errorMessage' | 'counter' | 'clearable'>
+type ValidationProps = Pick<
+  QFileProps,
+  | 'onClear'
+  | 'multiple'
+  | 'accept'
+  | 'maxFileSize'
+  | 'maxTotalSize'
+  | 'maxFiles'
+  | 'useChips'
+  | 'modelValue'
+  | 'rules'
+>
+
+export interface FileProps extends StateProps, VariantProps, ReturnProps, ValidationProps {
+  inputClass?: string
+  hint: QFileProps['hint']
+  /** Marca o campo como obrigatório (eMAG 6.4). Aplica `aria-required="true"`. */
+  required?: boolean
+}

package/src/components/file/acai-ui-file.vue

@@ -0,0 +1,85 @@
+<template>
+  <q-file
+    ref="fileRef"
+    v-model="model"
+    class="file-input"
+    :label="label"
+    :autofocus="autofocus"
+    :disable="disable"
+    :readonly="readonly"
+    :color="color"
+    :error-message="errorMessage"
+    :counter="counter"
+    :multiple="multiple"
+    :accept="accept"
+    :max-file-size="maxFileSize"
+    :max-total-size="maxTotalSize"
+    :max-files="maxFiles"
+    :use-chips="false"
+    :rules="rules"
+    :borderless="borderless"
+    :aria-required="props.required ? 'true' : undefined"
+  >
+    <template #file>
+      <div style="display: none"></div>
+    </template>
+
+    <template #default>
+      <div v-if="filesList.length === 0" class="q-file-container">
+        <acai-ui-icon name="cloud_upload" size="xl" color="primary" />
+        <p class="upload-title">Arraste e solte os seus arquivos aqui ou clique para selecionar</p>
+        <small class="upload-subtitle">Arquivos suportados: {{ hint }}</small>
+      </div>
+
+      <div v-else class="q-file-container">
+        <acai-ui-icon name="upload_file" size="xl" color="primary" />
+        <p class="file-title">Arquivo anexado com sucesso</p>
+
+        <div v-if="filesList[0]" class="upload-chip">
+          <p>{{ filesList[0]?.name }}</p>
+
+          <q-btn dense flat icon="delete" color="negative" @click.stop="clearFile" />
+        </div>
+      </div>
+    </template>
+  </q-file>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { QFile } from 'quasar'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+import type { FileProps } from './acai-ui-file-interface'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<FileProps>(), {
+  borderless: true,
+  color: 'primary',
+  label: 'Arquivo',
+})
+
+const model = defineModel<File | File[] | null>({ default: null })
+const fileRef = ref<InstanceType<typeof QFile> | null>(null)
+
+const filesList = computed<File[]>(() => {
+  if (!model.value) return []
+  return Array.isArray(model.value) ? model.value : [model.value]
+})
+
+const clearFile = (): void => {
+  model.value = null
+}
+
+const abrirSeletor = (): void => {
+  fileRef.value?.pickFiles()
+}
+
+defineExpose({
+  abrir: abrirSeletor,
+})
+</script>
+
+<style lang="scss" src="./arquivo-styles.scss" />

package/src/components/file/arquivo-styles.scss

@@ -0,0 +1,109 @@
+.file-input {
+  border: $spacing-2xs dashed $color-primary-900;
+  padding-top: $spacing-xl;
+  padding-bottom: $spacing-2xl;
+  background-color: $color-primary-50;
+  border-radius: $spacing-sm;
+  cursor: pointer;
+  width: 100%;
+
+  // Tema escuro: a dropzone lavanda + borda navy + texto escuro não se traduzem
+  // por token (são tons deliberados), então ajusta explicitamente.
+  .body--dark & {
+    background-color: rgba(255, 255, 255, 0.04);
+    // Borda tracejada precisa ser visível: --acai-border (#2a3446) quase some.
+    border-color: rgba(255, 255, 255, 0.22);
+
+    // Escopa sob `.q-file-container` para (0,4,0) e VENCER a regra light homônima
+    // `.file-input .q-file-container .upload-title` (0,3,0). Sem esse `.q-file-container`
+    // aqui, dark (0,3,0) empatava e perdia na ordem do source → labels ficavam #131313.
+    .q-file-container .upload-title,
+    .q-file-container .file-title,
+    .q-file-container .upload-chip p {
+      color: var(--acai-text);
+    }
+
+    .q-file-container .upload-subtitle {
+      color: var(--acai-text-muted);
+    }
+
+    .q-file-container .upload-chip {
+      background-color: var(--acai-surface-2);
+    }
+
+    // Ícone cloud/upload: color="primary" (navy) fica apagado no escuro. Azul vivo
+    // (control-on). !important vence o `.text-primary` do Quasar. NÃO pega o botão
+    // de delete (que é .q-btn, cor negative).
+    .acai-ui-icon.text-primary {
+      color: var(--acai-control-on) !important;
+    }
+  }
+
+  .q-file-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    width: 100%;
+    min-height: 104px;
+
+    .upload-title {
+      font-size: $font-size-md;
+      font-weight: 500;
+      color: $color-gray-900;
+      margin-top: $spacing-md;
+      margin-bottom: $spacing-xs;
+    }
+
+    .upload-subtitle {
+      color: $color-gray-700;
+      font-weight: 600;
+      font-size: $font-size-sm;
+    }
+
+    .file-title {
+      font-size: $spacing-md;
+      font-weight: 700;
+      color: $color-gray-900;
+      margin-top: $spacing-md;
+      margin-bottom: $spacing-xs;
+    }
+
+    .upload-chip {
+      background-color: $color-white-100;
+      width: 100%;
+      max-width: 440px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-radius: $spacing-xs;
+      padding: 0 $spacing-sm;
+      margin-top: $spacing-xs;
+
+      p {
+        font-weight: 700;
+        color: $color-gray-900;
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  .q-field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .q-field__native {
+    width: 0;
+  }
+
+  // A label do q-file ("Arquivo") flutua no canto — deslocada do conteúdo
+  // centralizado do dropzone (que já se explica: "Arraste e solte..."). Redundante
+  // e feia, então some. Quem quiser um rótulo põe fora do componente.
+  .q-field__label {
+    display: none;
+  }
+}

package/src/components/form/acai-ui-form-grid.scss

@@ -0,0 +1,145 @@
+// Grid de formulário — classes globais (usáveis dentro e fora do acai-ui-form)
+@import '../../scss/breakpoints';
+
+.form-container-duplo { grid-template-columns: repeat(2, 1fr); }
+.form-container-triplo { grid-template-columns: repeat(3, 1fr); }
+.form-container-quadruplo { grid-template-columns: repeat(4, 1fr); }
+.form-container-full { grid-template-columns: repeat(1, 1fr); }
+
+.form-container-duplo,
+.form-container-full,
+.form-container-triplo,
+.form-container-quadruplo {
+  display: grid;
+  align-items: start;
+
+  // O respiro HORIZONTAL vem daqui; o VERTICAL vem do próprio campo.
+  //
+  // Todo campo da lib reserva embaixo o espaço da mensagem de erro (20px, ver
+  // `bottom-slots` nos seis componentes). Com `gap: 20px` — que é linha E coluna
+  // — a vertical passou a somar duas vezes: 20 de reserva mais 20 de linha, o
+  // dobro dos 20 da horizontal. Era exatamente a queixa que abriu esta
+  // investigação, "o espaçamento vertical é maior que o horizontal", e uniformizar
+  // a reserva sozinha não a resolveu: só trocou "40 em algumas linhas e 20 em
+  // outras" por "40 em todas".
+  //
+  // Zerando a linha, o vertical volta a 20 e bate com o horizontal, sem que o
+  // consumidor precise fazer nada. Um campo SOLTO, irmão da grade em vez de filho,
+  // também passa a casar com as linhas de dentro — antes ficava com 20 enquanto
+  // elas tinham 40.
+  //
+  // Com a mensagem VISÍVEL o texto ainda respira 4px até a caixa de baixo, medido:
+  // a reserva do Quasar é calculada com a fonte dele e a nossa mensagem é menor
+  // (12px de texto mais 4 de topo dentro de 20 reservados).
+  //
+  // ⚠️ O espaçamento vertical agora PRESSUPÕE que os filhos sejam campos da lib.
+  // Item que não seja campo (um bloco de texto, um botão solto) não traz reserva
+  // nenhuma e vai encostar no vizinho de baixo — nesse caso o consumidor põe a
+  // margem que quiser no próprio item.
+  column-gap: 20px;
+  row-gap: 0;
+}
+
+.form-item-1 { grid-column: span 1; }
+.form-item-2 { grid-column: span 2; }
+.form-item-3 { grid-column: span 3; }
+.form-item-4 { grid-column: span 4; }
+
+// ── Item pedindo mais colunas do que a grade tem ──
+//
+// `.form-item-4` dentro de um `.form-container-duplo` é uso incorreto, mas o
+// CSS Grid não reclama: ele atende o `span 4` inventando colunas implícitas, e
+// a grade de 2 vira uma de 4 trilhos. Como os campos são `width: 100%` os
+// trilhos extras colapsam, então não há rolagem nem nada que aponte a causa —
+// só um formulário torto no desktop, com os vizinhos espremidos por colunas
+// que ninguém pediu. Foi o que apareceu ao rodar todas as combinações no
+// Chrome.
+//
+// Degradar pra linha inteira é o que o consumidor queria dizer de qualquer
+// forma ("este campo é o maior que couber"), e mantém a grade do tamanho
+// declarado.
+.form-container-full .form-item-2,
+.form-container-full .form-item-3,
+.form-container-full .form-item-4,
+.form-container-duplo .form-item-3,
+.form-container-duplo .form-item-4,
+.form-container-triplo .form-item-4 {
+  grid-column: 1 / -1;
+}
+
+// ============================================================
+// Responsivo
+// ============================================================
+//
+// A MESMA regra vale pra GRADE e pro ITEM — um `.form-item-2` encolhe igual a um
+// `.form-container-duplo`, porque os dois dizem a mesma coisa ("isto ocupa duas
+// colunas"), só que em escopos diferentes:
+//
+//              LARGO        MÉDIO        ESTREITO
+//             (≥1440)    (1024–1439)     (<1024)
+//   full     →  full     →  full      →  full
+//   duplo    →  duplo    →  DUPLO     →  full
+//   triplo   →  triplo   →  full      →  full
+//   quadruplo→  quadruplo→  duplo     →  full
+//
+// O duplo ATRAVESSA a faixa média: em 1024–1439 duas colunas ainda dão ~500px
+// cada, largura de sobra pra um campo. Derrubá-lo pra uma coluna ali jogava fora
+// metade da tela de um notebook — que é a máquina do escritório.
+//
+// O triplo cai direto pra 1, e o quádruplo passa por 2. Decisão do usuário em
+// 2026-08-18, com o trade-off na mesa: sim, isso faz um formulário declarado com
+// TRÊS colunas ficar com MENOS colunas que um de duas na mesma largura. É
+// deliberado — grade de 3 costuma carregar rótulo longo, e 3 campos em 1100px
+// dariam ~340px cada.
+//
+// 🔴 Sem a parte do ITEM, o bug: só as COLUNAS caíam no responsivo, e um
+// `.form-item-3` seguia pedindo `span 3` dentro de uma grade que já era de 1
+// coluna. O CSS Grid resolve isso criando colunas IMPLÍCITAS. Como os campos são
+// `width: 100%`, esses trilhos colapsam em vez de gerar rolagem — então o
+// sintoma não é vazar, é a grade ficar com quatro trilhos onde deveria ter um
+// (medido a 360px: `117px 91.5px 91.5px 0px`) e os campos saírem com larguras
+// diferentes entre si. Formulário desalinhado, sem nenhum sinal que aponte a
+// causa.
+//
+// `1 / -1` ("da primeira à última linha") em vez de `span N`: diz o que se quer
+// de verdade — ocupa a linha toda, tenha ela 1, 2, 3 ou 4 colunas — e nunca
+// recria a coluna implícita que estamos eliminando aqui.
+
+// ── MÉDIO ──
+@include ate-laptop {
+  .form-container-triplo {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .form-container-quadruplo {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  // O item-1 é o único que fica: dentro do quádruplo (agora de 2 colunas) ele
+  // segue ocupando uma só, que é o ponto de existir.
+  .form-item-2,
+  .form-item-3,
+  .form-item-4 {
+    grid-column: 1 / -1;
+  }
+}
+
+// ── ESTREITO ──
+//
+// 🔴 O `duplo` PRECISA estar aqui. Ele deixou de cair no MÉDIO, e o `ate-laptop`
+// é um `max-width` que cobre tudo abaixo de 1440 — era ele que também derrubava o
+// duplo no celular. Sem esta linha, um formulário de duas colunas atravessaria
+// até 360px com dois campos lado a lado.
+@include ate-tablet {
+  .form-container-duplo,
+  .form-container-quadruplo {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .form-item-1,
+  .form-item-2,
+  .form-item-3,
+  .form-item-4 {
+    grid-column: 1 / -1;
+  }
+}