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

ER: Fix layout shift bug with Filters column in Projects page

Abierto Apto para principiantes
  • ¿Algo no está bien?
#8,843 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
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript, jekyll, scss
Área
frontend

Línea de trabajo

Compara los estilos de las páginas Projects y Toolkits para encontrar la regla SCSS de Toolkits que mantiene en su sitio la columna Filters cuando no hay resultados. Mueve esa regla a un archivo SCSS compartido que usen ambas páginas. Reproduce el problema con los filtros de Projects enlazados y confirma que la columna Filters ya no se desplaza; la carga útil no indica ningún archivo ni prueba.

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

Descripción

Complexity: Large Draft ER Issue Making: Level 2 P-Feature: Projects page p-feature: Projects-check P-Feature: Toolkit role: front end size: 0.5pt
Emergent Requirement - Problem

We need to update the styling for the Projects page layout to prevent the Filters column from shifting inward when no results are returned.

Currently, the Toolkits page contains the correct behavior. We can resolve this by refactoring the styling rule in the Toolkits SCSS, and moving that rule into a shared file so that the fix applies for both Projects and Toolkits pages at once.

How to replicate
  1. Navigate to the Hack for LA Projects page
  2. Select filters that return zero results:
    a. Under "Program Areas" select "Citizen Engagement" and "Civic Tech Infrastructure" (link to selected filters)
  3. Observe the layout shift, the Filters column should shift right
  4. Note the expected behavior in the Toolkits page when no results return
Screenshots of bug & expected behavior
Layout shift bug in Projects page Image
Expected behavior in Toolkits page, no layout shift. We are trying to replicate this behavior: Image
Issue you discovered this emergent requirement in
  • #8558
Date discovered

10-8-2026

Did you have to do something temporarily
  • YES
  • NO
Who was involved

@Tomomi-K1 @castillios

What happens if this is not addressed

If this is not addressed, it may disrupt the overall user experience of the Projects page. We also want to migrate the SCSS rule into a shared file to reduce any redundant code.

Resources

Hack for LA Projects Page: https://www.hackforla.org/projects/

Recommended Action Items
  • Make a new issue
  • Discuss with team
  • Let a Team Lead know
Potential solutions [draft]
  • Create a medium issue that addresses & implements a fix for the UI bug using a Blank Issue Template. Title the issue to briefly capture the scope of the problem.
  • At the top of the issue above the Overview section, add the following Prerequisite section: 
    ### Prerequisite
1. Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our [Getting Started page](https://www.hackforla.org/getting-started) and attend an onboarding session.
2. Before you claim or start working on an issue, please make sure you have read our [How to Contribute to Hack for LA Guide](https://github.com/hackforla/website/blob/7f0c132c96f71230b8935759e1f8711ccb340c0f/CONTRIBUTING.md).
  • Under Action Items section, create checklist items that address the following changes.
    • Note: Be clear and concise at each step (e.g. Navigate to [insert file name], Update the following from: [insert code snippet before] to: [insert code snippet after])
Lenguaje dominante
JavaScript
Estrellas
364
Forks
872
Merge medio
6 d 3 h
PR fusionados (30 d)
9

Preparar el entorno

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 hackforla/website

Todos los issues de hackforla/website

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.