Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

The Fields list on a phone hides the API name under its buttons

Abierto
  • ¿Algo no está bien?
#263 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
75/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, playwright, react, typescript
Área
accessibility, frontend, testing-qa

Línea de trabajo

Start with FieldTable and FieldTableRow in plugins/fields/frontend/FieldsScreen.tsx, then read the phone media query in frontend/src/index.css and the pinned action rule in @gopherium/godmin's src/base.css. Add the 390-pixel Playwright check in test/e2e/tests/fields-order.spec.ts and run it alongside the existing ordering check. Done means fields stack without sideways scrolling, the full API name clears the buttons, and wide-screen layout stays unchanged.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement help wanted

What happens

On a phone (under 640 pixels wide), the Fields screen at /fields keeps its wide table. Contacts, Users, API tokens and Import are DataViews lists that switch to a stacked list on a phone. Fields is a plain godmin-table, so it has no phone layout.

The table is wider than the phone, so it scrolls sideways inside its region. GodMin pins the move and archive buttons to the right edge, and the API name column slides under them. In Spanish the header reads "NOMBRE EN LA AP" and the value reads "birthDat". Nothing tells the reader that the table scrolls.

Moving the list to DataViews is not the fix. DataViews cannot reorder rows by hand, and the arrows are what this screen is for.

What should happen

On a phone, each field is one stacked row with no sideways scroll:

  • the label on the first line, with the move and archive buttons at its end
  • the kind badge and any sub field labels under it
  • the API name under that, in full, wrapping when it is long

The header row hides, and each value under the label shows its column name before it. WordPress list tables do the same under 782 pixels. The first column stays, and the other columns stack below it with their names from data-colname. The Archive question that replaces the buttons fits the row too. The table on a wide screen does not change.

A new Playwright check at 390 pixels wide opens /fields with a field labelled "Preferred delivery window". It proves that the region does not scroll sideways and that the API name sits fully inside the region, clear of the buttons. fields-order.spec.ts stays green.

Where

  • plugins/fields/frontend/FieldsScreen.tsx, FieldTable and FieldTableRow: a class on the table and a column name on each cell
  • frontend/src/index.css, the @media (max-width: 639px) block
  • @gopherium/godmin src/base.css, the phone rule that pins .godmin-table__actions inside .godmin-table-scroll, which the stacked rows must turn off
  • test/e2e/tests/fields-order.spec.ts, the new phone check
Lenguaje dominante
Go
Estrellas
287
Forks
64
Merge medio
13 h 24 min
PR fusionados (30 d)
60

Preparar el entorno

  • Incluye un Dockerfile o un archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de gopherium/AlphOne

Todos los issues de gopherium/AlphOne

Issues similares

Más issues de Go

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.