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

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. This is unexpected behavior.
4. Note the expected behavior in the Toolkits page when no results return

Screenshots of bug & expected behavior

Layout shift bug in Projects page

Expected behavior in Toolkits page, no layout shift.

We are trying to replicate this behavior:

Issue you discovered this emergent requirement in

• Add Filtering to External Resources on Toolkit Page #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 any SCSS rules into a single shared rule 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. Feel free to change the wording of the following and group them in the issue as you see fit.
  • In _sass/components/_toolkit.scss, remove the .toolkit-content-filter-container class
  • Navigate to _sass/elements/_dropdown_filters.scss, and reuse .toolkit-content-filter-container as a generic .filter-container class above the existing .filter-toolbar class:

    .filter-container {
        flex: 0 1 392px;
    }
    

  • In _sass/components/_projects-page.scss find the .projects class and add display: flex and align-items: flex-start:

    .projects {
        background: $color-pink;
        padding: 32px 16px;
        display: flex;
        align-items: flex-start;
      }
    

  • In the same file, define the .projects-and-filters class above the .search-tip-link class. This will allow the project cards container to maintain its width and prevent filter column shifting. (Note: .projects-and-filters already exists in HTML but it has not yet been defined in any SCSS file):

    .projects-and-filters {
      flex: 1 1 auto;
      width: 100%;
      max-width: 800px;
    }
    

  • In _includes/current-guides.html, replace the .toolkit-content-filter-container class, changing it from:

     <section class="toolkit-content-container filter-content-container content-section">
         <div class="toolkit-content-filter-container">
             <nav class="filter-toolbar toolkit-filters" aria-label="Filter Navbar">
                 <div class="filtersDiv filtersDiv-background">
                     <h3 class="filters-title">
    

    to:

     <section class="toolkit-content-container filter-content-container content-section">
         <div class="filter-container">
             <nav class="filter-toolbar toolkit-filters" aria-label="Filter Navbar">
                 <div class="filtersDiv filtersDiv-background">
                     <h3 class="filters-title">
    

  • In _includes/current-projects.html, locate <nav class="filter-toolbar" aria-label="Filter Navbar"> near the top of the file:

    <section class="content-section projects filter-content-container">
       <nav class="filter-toolbar" aria-label="Filter Navbar">
    

  • Then implement the fix by nesting the entire nav tag with a filter container div, <div class="filter-container">:

    <section class="content-section projects filter-content-container">
      <div class="filter-container">
        <nav class="filter-toolbar" aria-label="Filter Navbar">
    

  • Ensure proper indentation and closing tags. The .filter-container div should be siblings with the .projects-and-filters div:

       ...
     </nav>
    </div>
    <!-- Projects and Filters container -->
    <div class="projects-and-filters">
    

  • In your local environment, verify the layout shift bugs no longer occur & the refactor works on the following pages: Toolkits, Projects, Projects-Check