From 90b41e61961e740076b0127433d112a216846145 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 17 Sep 2024 14:46:16 +0200
Subject: [PATCH] :lipstick: [#2741] Added multiselect listbox mobile structure

---
 .../templates/components/Button/Button.html   |   4 +-
 .../components/FilterBar/FilterBar.html       |  40 ++++-
 .../FilterBar/MultiSelectListbox.html         |  46 +++---
 .../js/components/FilterBar/filterbar.js      | 102 ++++++++++++
 .../js/components/FilterBar/index.js          |   1 +
 .../FilterBar/multiselect_listbox_checkbox.js |  73 +++++++--
 src/open_inwoner/js/components/index.js       |   2 +-
 .../scss/components/Button/Button.scss        |   4 +
 .../scss/components/Cases/Cases.scss          |   2 +
 .../scss/components/FilterBar/FilterBar.scss  | 154 +++++++++++++++++-
 .../FilterBar/MultiSelectListbox.scss         |  90 +++++++---
 .../scss/components/Form/Form.scss            |  18 ++
 src/open_inwoner/scss/views/App.scss          |   1 +
 .../templates/pages/cases/list_inner.html     |  25 ++-
 14 files changed, 481 insertions(+), 81 deletions(-)
 create mode 100644 src/open_inwoner/js/components/FilterBar/filterbar.js

diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html
index d637566115..cf0151a5f1 100644
--- a/src/open_inwoner/components/templates/components/Button/Button.html
+++ b/src/open_inwoner/components/templates/components/Button/Button.html
@@ -39,10 +39,10 @@
         {% if text_icon %}
             <span class="button__text-wrapper">
             {% icon icon=text_icon outlined=icon_outlined %}
-            {% if not hide_text %}{{ text }}{% endif %}
+            {% if not hide_text %}<span class="button__inner-text">{{ text }}</span>{% endif %}
             </span>
         {% else %}
-            {% if not hide_text %}{{ text }}{% endif %}
+            {% if not hide_text %}<span class="button__inner-text">{{ text }}</span>{% endif %}
         {% endif %}
     </button>
 {% endif %}
diff --git a/src/open_inwoner/components/templates/components/FilterBar/FilterBar.html b/src/open_inwoner/components/templates/components/FilterBar/FilterBar.html
index af672d6e6b..f924b2dc05 100644
--- a/src/open_inwoner/components/templates/components/FilterBar/FilterBar.html
+++ b/src/open_inwoner/components/templates/components/FilterBar/FilterBar.html
@@ -1,11 +1,33 @@
-{% load i18n form_tags %}
+{% load i18n form_tags button_tags %}
 
-{# Wrapper for multiple filters #}
-<div class="filter-bar" id="filterBar">
-    <form class="form" method="{{ method }}"
-          {% if no_action %}action=""{% else %}action="{% firstof form_action request.path %}"{% endif %}
-          {% if id %}id="{{ id }}"{% endif %}>
-        {# Note: each element inside the form is a flex column #}
-        {{ contents }}
-    </form>
+<div class="filter-bar__backdrop" id="filterBarBackdrop">
+    {# Wrapper for multiple filters #}
+    <div class="filter-bar" id="filterBar">
+        <div class="filter-bar__mobile-controls">
+            {% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %}
+            <div class="form__reset--mobile form__actions--fullwidth form__actions--reset">
+                <button class="button button--primary button--transparent" type="button" name="" value="" title="Wis alle filters" aria-label="Wis alle filters" id="resetAllFilters">
+                    Wis alle filters
+                </button>
+            </div>
+        </div>
+        <div class="filter-bar__mobile-button">
+            <p class="utrecht-paragraph filter-bar__heading">Filters</p>
+            {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
+            <p class="utrecht-paragraph filter-bar__status-text">Status</p>
+        </div>
+        <form class="form filter-bar__form" method="{{ method }}"
+              {% if no_action %}action="" {% else %}action="{% firstof form_action request.path %}" {% endif %}
+              {% if id %}id="{{ id }}" {% endif %}>
+            {# Note: each element inside the form is a flex column #}
+            {{ contents }}
+
+            {# Mobile submit button updates on select #}
+            <div class="form__reload--mobile form__actions form__actions--fullwidth" id="filterFormActions">
+                <button class="button button--primary" type="submit" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
+                    {% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span><span id="resultText">{% trans 'resultaten' %}</span>
+                </button>
+            </div>
+        </form>
+    </div>
 </div>
diff --git a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
index 33ab0b14da..6a5ed69970 100644
--- a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
+++ b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
@@ -1,29 +1,31 @@
 {% load i18n l10n form_tags icon_tags button_tags %}
 
 <div class="filter-bar__multiselect-listbox multiselect-listbox" id="selectDropdownWrapper">
-    <button id="selectButton" type="button" class="button button__select" aria-haspopup="listbox" aria-expanded="false" aria-live="polite">
-        {% trans 'Status' %}:
-        {% icon icon="expand_more" icon_position="after" icon_outlined=True %}
-    </button>
-    <div id="listboxDropdown" class="multiselect-listbox__content" role="listbox" aria-labelledby="selectButton">
-        <div class="multiselect-listbox__scroll" role="presentation">
-            {% for status, frequency in statusfrequencies %}
-                <div class="checkbox" role="option">
-                    <input type="checkbox" name="status" value="{{ status }}" id="id_status_{{ forloop.counter }}" class="checkbox__input">
-                    <label class="checkbox__label" for="id_status_{{ forloop.counter }}">
-                        <span class="ellipsis">{{ status }} </span><span class="frequency-counter">({{ frequency }})</span>
-                    </label>
-                </div>
-            {% endfor %}
+    <div class="multiselect-listbox__popup">
+        <button id="selectButton" type="button" class="button button__select" aria-haspopup="listbox" aria-expanded="false" aria-live="polite">
+            {% trans 'Status' %}:
+            {% icon icon="expand_more" icon_position="after" icon_outlined=True %}
+        </button>
+        <div id="listboxDropdown" class="multiselect-listbox__content" role="listbox" aria-labelledby="selectButton">
+            <div class="multiselect-listbox__scroll" role="presentation">
+                {% for status, frequency in statusfrequencies %}
+                    <div class="checkbox" role="option">
+                        <input type="checkbox" name="status" value="{{ status }}" id="id_status_{{ forloop.counter }}" class="checkbox__input">
+                        <label class="checkbox__label" for="id_status_{{ forloop.counter }}">
+                            <span class="ellipsis">{{ status }} </span><span class="frequency-counter">({{ frequency }})</span>
+                        </label>
+                    </div>
+                {% endfor %}
+            </div>
+            {# Submit button updates on select #}
+            <div class="form__actions form__actions--fullwidth" id="multiselectFormActions">
+                <button class="button button--primary" type="submit" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
+                    {% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span><span id="resultText">{% trans 'resultaten' %}</span>
+                </button>
+            </div>
         </div>
-        {# Submit button appears on select #}
-        <div class="form__actions form__actions--fullwidth" id="filterFormActions">
-            <button class="button button--primary" type="submit" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
-                {% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span><span id="resultText">{% trans 'resultaten' %}</span>
-            </button>
+        <div class="form__reset--desktop form__actions--fullwidth form__actions--reset">
+            {% button bordered=False text=_("Wis alle filters") id="resetMultiSelectFilters" type="button" transparent=True primary=True %}
         </div>
     </div>
-    <div class="form__actions form__actions--fullwidth form__actions--reset">
-        {% button bordered=False text=_("Wis alle filters") id="resetFilters" type="button" transparent=True primary=True %}
-    </div>
 </div>
diff --git a/src/open_inwoner/js/components/FilterBar/filterbar.js b/src/open_inwoner/js/components/FilterBar/filterbar.js
new file mode 100644
index 0000000000..316451faa0
--- /dev/null
+++ b/src/open_inwoner/js/components/FilterBar/filterbar.js
@@ -0,0 +1,102 @@
+export class FilterBar {
+  static selector = '.filter-bar'
+
+  constructor(node) {
+    this.node = node
+    this.filterPopup = node.querySelector('.show-modal')
+    this.filterButton = node.querySelector('#selectButton')
+    this.backdrop = document.getElementById('filterBarBackdrop')
+    this.closeButton = node.querySelector('.show-controls')
+
+    // Check if elements are found
+    if (!this.filterPopup) {
+      console.error('Filter popup button not found!')
+      return
+    }
+
+    if (!this.filterButton) {
+      console.error('Select button not found!')
+      return
+    }
+
+    // Event listeners
+    this.filterPopup.addEventListener(
+      'click',
+      this.toggleOpenFilterPopup.bind(this)
+    )
+    this.closeButton.addEventListener(
+      'click',
+      this.closeFilterPopupDirect.bind(this) // Added a specific handler for direct close button click
+    )
+    document.addEventListener('click', this.closeFilterPopup.bind(this), false)
+    document.addEventListener(
+      'keydown',
+      this.closeFilterPopup.bind(this),
+      false
+    )
+  }
+
+  toggleOpenFilterPopup(event) {
+    event.preventDefault()
+
+    // Add 'show' class to the backdrop to make it visible
+    this.backdrop.classList.add('show')
+
+    // Toggle mobile filter class
+    setTimeout(() => {
+      this.node.classList.toggle('filter-bar--mobile')
+      const isExpanded =
+        this.filterPopup.getAttribute('aria-expanded') === 'true'
+      this.filterPopup.setAttribute('aria-expanded', !isExpanded)
+    }, 5)
+  }
+
+  closeFilterPopupDirect(event) {
+    // Remove 'show' class from the backdrop to hide it
+    this.backdrop.classList.remove('show')
+
+    // Remove mobile class and reset aria-expanded
+    this.node.classList.remove('filter-bar--mobile')
+    this.filterPopup.setAttribute('aria-expanded', 'false')
+  }
+
+  closeFilterPopup(event) {
+    // Close on clicking outside or pressing Escape
+    if (
+      (event.type === 'keydown' && event.key === 'Escape') ||
+      (event.type === 'click' &&
+        !this.node.contains(event.target) &&
+        !this.filterPopup.contains(event.target) &&
+        !this.backdrop.contains(event.target))
+    ) {
+      // Remove 'show' class from the backdrop to hide it
+      this.backdrop.classList.remove('show')
+
+      // Remove mobile class and reset aria-expanded
+      this.node.classList.remove('filter-bar--mobile')
+      this.filterPopup.setAttribute('aria-expanded', 'false')
+    }
+  }
+}
+
+// Reinitialize FilterBar after HTMX swap
+htmx.on('htmx:afterSwap', function (e) {
+  if (e.detail && e.detail.target.id === 'cases-content') {
+    const filterBars = document.querySelectorAll(FilterBar.selector)
+    if (filterBars.length === 0) {
+      console.error('No filter bars found on the page after swap.')
+    } else {
+      filterBars.forEach((filterbar) => new FilterBar(filterbar))
+    }
+  }
+})
+
+// Initialize FilterBar on DOM load for the initial page load
+document.addEventListener('DOMContentLoaded', () => {
+  const filterBars = document.querySelectorAll(FilterBar.selector)
+  if (filterBars.length === 0) {
+    console.error('No filter bars found on the page.')
+  } else {
+    filterBars.forEach((filterbar) => new FilterBar(filterbar))
+  }
+})
diff --git a/src/open_inwoner/js/components/FilterBar/index.js b/src/open_inwoner/js/components/FilterBar/index.js
index 6aa895f5d8..036a4aca22 100644
--- a/src/open_inwoner/js/components/FilterBar/index.js
+++ b/src/open_inwoner/js/components/FilterBar/index.js
@@ -1 +1,2 @@
+import './filterbar'
 import './multiselect_listbox_checkbox'
diff --git a/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js b/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js
index 51452026bc..df57c1a369 100644
--- a/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js
+++ b/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js
@@ -26,9 +26,11 @@ function initFilterBar() {
       )
       let sum = 0
       let selectedFilters = []
+      let anyChecked = false
 
       checkboxes.forEach((checkbox) => {
         if (checkbox.checked) {
+          anyChecked = true // Mark that we have at least one checkbox checked
           const label = checkbox.nextElementSibling
           selectedFilters.push(label.textContent.trim())
           const frequencyCounter = label.querySelector('.frequency-counter')
@@ -52,6 +54,7 @@ function initFilterBar() {
       let closeIcon = document.createElement('span')
       closeIcon.classList.add('material-icons', 'close-icon')
       closeIcon.setAttribute('aria-hidden', 'true')
+      closeIcon.setAttribute('tabindex', '0') // Adding tabindex for keyboard focus
       closeIcon.textContent = 'close'
 
       // Add text and icons based on selected filters
@@ -76,12 +79,28 @@ function initFilterBar() {
         selectButton.classList.add('active')
       }
 
-      closeIcon.addEventListener('click', function (event) {
-        event.stopPropagation()
+      const handleClose = function () {
         checkboxes.forEach((checkbox) => {
           checkbox.checked = false
         })
-        calculateAndDisplayCheckedSum() // Recalculate and update the button and sum
+        calculateAndDisplayCheckedSum() // Recalculate and update the button and sum, even after refresh
+        const filterBarForm = document.querySelector('#filterBar .form')
+        if (filterBarForm) {
+          filterBarForm.submit()
+        }
+      }
+
+      closeIcon.addEventListener('click', function (event) {
+        event.stopPropagation()
+        handleClose()
+      })
+
+      // Add accessibility functionality for close icon
+      closeIcon.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          handleClose()
+        }
       })
 
       selectButton.setAttribute('aria-live', 'polite')
@@ -96,6 +115,18 @@ function initFilterBar() {
       if (resultTextElement) {
         resultTextElement.textContent = sum === 1 ? 'resultaat' : 'resultaten'
       }
+
+      // Handle visibility of resetMultiSelectFilters
+      const resetMultiSelectFilters = document.getElementById(
+        'resetMultiSelectFilters'
+      )
+      if (resetMultiSelectFilters) {
+        if (anyChecked) {
+          resetMultiSelectFilters.classList.remove('hide') // Show the button
+        } else {
+          resetMultiSelectFilters.classList.add('hide') // Hide the button
+        }
+      }
     }
 
     const initSelectBehavior = function () {
@@ -177,10 +208,35 @@ function initFilterBar() {
       }
     })
 
-    const resetFilters = document.getElementById('resetFilters')
-    if (resetFilters) {
-      resetFilters.addEventListener('click', function (e) {
+    const resetMultiSelectFilters = document.getElementById(
+      'resetMultiSelectFilters'
+    )
+    const resetAllFilters = document.getElementById('resetAllFilters')
+
+    if (resetMultiSelectFilters) {
+      resetMultiSelectFilters.addEventListener('click', function (e) {
         e.preventDefault()
+
+        const checkboxes = document.querySelectorAll(
+          '.filter-bar .checkbox__input'
+        )
+        checkboxes.forEach((checkbox) => {
+          checkbox.checked = false
+        })
+
+        calculateAndDisplayCheckedSum()
+
+        const filterBarForm = document.querySelector('#filterBar .form')
+        if (filterBarForm) {
+          filterBarForm.submit()
+        }
+      })
+    }
+
+    if (resetAllFilters) {
+      resetAllFilters.addEventListener('click', function (e) {
+        e.preventDefault()
+
         const checkboxes = document.querySelectorAll(
           '.filter-bar .checkbox__input'
         )
@@ -224,9 +280,6 @@ document.body.addEventListener('htmx:afterSwap', function () {
 
 document.addEventListener('click', function (e) {
   if (e.target && e.target.classList.contains('pagination__link')) {
-    scrollToTopOfWindow()
-    setTimeout(function () {
-      initFilterBar() // Reinitialize filter bar after swap
-    }, 20)
+    scrollToTopOfWindow() // Scroll up after clicking pagination
   }
 })
diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js
index 59f73af38f..5b6771c88d 100644
--- a/src/open_inwoner/js/components/index.js
+++ b/src/open_inwoner/js/components/index.js
@@ -17,7 +17,7 @@ import { CookieBanner } from './cookie-consent'
 import './datepicker'
 import { Dropdown } from './dropdown'
 import './emoji-button'
-import './FilterBar/multiselect_listbox_checkbox'
+import './FilterBar'
 import './form'
 import './header'
 import './map'
diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
index 7bce4d5ca7..a796c54ce2 100644
--- a/src/open_inwoner/scss/components/Button/Button.scss
+++ b/src/open_inwoner/scss/components/Button/Button.scss
@@ -203,6 +203,10 @@
     display: flex;
   }
 
+  &__inner-text {
+    font-family: var(--font-family-body);
+  }
+
   > .link__text {
     width: 100%;
   }
diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss
index 45402d1bc0..59f6babd3f 100644
--- a/src/open_inwoner/scss/components/Cases/Cases.scss
+++ b/src/open_inwoner/scss/components/Cases/Cases.scss
@@ -1,4 +1,6 @@
 .cases {
+  position: relative;
+
   /// cards on cases list
   .card {
     &__body {
diff --git a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
index 4456147828..3dc9b4b7bf 100644
--- a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
+++ b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
@@ -2,7 +2,7 @@
   width: 100%;
   background-color: var(--color-gray-lightest);
   margin-bottom: var(--spacing-extra-large);
-  padding: var(--spacing-large) var(--spacing-tiny);
+  padding: 0;
   position: relative;
   display: inline-block;
 
@@ -10,16 +10,160 @@
     padding: var(--spacing-large);
   }
 
+  // Pop-ups for future multiple filters on-load may go here
+  .multiselect-listbox__modal {
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+  }
+
+  .form__actions {
+    &--reset {
+      .button:focus {
+        background-color: transparent;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .filter-bar__heading,
+  .filter-bar__status-text {
+    display: none;
+  }
+
   .filter-bar__form {
+    display: none;
     margin: 0;
     padding: 0 0 0 var(--spacing-small);
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: var(--spacing-extra-large);
+
+    @media (min-width: 768px) {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--spacing-extra-large);
+    }
   }
 
   &__frequency-sum {
     padding: 0;
   }
+
+  &__mobile-controls {
+    display: none;
+  }
+
+  &__mobile-button {
+    .button.show-modal {
+      margin-top: 0;
+
+      & [class*='icons'] {
+        text-decoration: none;
+      }
+
+      .button__inner-text {
+        text-decoration: underline;
+      }
+    }
+
+    @media (min-width: 768px) {
+      display: none;
+    }
+  }
+
+  &__label {
+    display: none;
+    padding-top: calc(var(--font-size-body) / 2);
+    @media (min-width: 768px) {
+      display: inline;
+    }
+  }
+
+  // In mobile view all child elements become part of a pop-up
+  &--mobile {
+    display: flex;
+    flex-direction: column;
+    gap: var(--row-height);
+    width: 100%;
+    box-sizing: border-box;
+    background-color: var(--color-gray-lightest);
+    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
+    margin: 0 var(--spacing-tiny);
+    padding: var(--spacing-extra-large);
+    height: 70vh;
+    position: fixed;
+    top: 30vh;
+    z-index: 1020;
+
+    .multiselect-listbox__popup {
+      display: block;
+      z-index: 600;
+    }
+
+    .filter-bar__form {
+      display: flex !important;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--spacing-extra-large);
+    }
+
+    .filter-bar__mobile-controls {
+      display: flex;
+      justify-content: space-between;
+
+      .button {
+        padding: 0;
+
+        [class*='icons'] {
+          font-size: 32px;
+        }
+      }
+
+      @media (min-width: 768px) {
+        display: none;
+      }
+    }
+
+    .button.show-modal {
+      display: none;
+    }
+
+    .filter-bar__heading {
+      color: var(--color-black);
+      display: block;
+      font-size: var(--font-size-body-larger);
+      font-weight: bold;
+      margin-bottom: var(--row-height);
+    }
+
+    .filter-bar__status-text {
+      color: var(--color-gray-dark);
+      display: block;
+      margin-bottom: calc(-1 * (var(--row-height) - var(--spacing-large)));
+    }
+  }
+
+  &__backdrop.show {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.25);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 0 solid transparent;
+    border-radius: var(--border-radius);
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+    z-index: 1000000;
+
+    @media (min-width: 768px) {
+      background-color: initial;
+      position: static;
+      z-index: initial;
+    }
+  }
 }
diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
index 5d314084bd..a8a75c8f09 100644
--- a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
+++ b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
@@ -1,14 +1,26 @@
 .filter-bar__multiselect-listbox {
+  padding: 0;
   position: relative;
-  width: 280px;
+  width: 100%;
+
+  @media (min-width: 768px) {
+    padding: 1px;
+    width: 280px;
+  }
+
+  .button,
+  .button:hover {
+    transition: none !important;
+    transform: none !important;
+  }
 
   &:has(.show) {
     .button__select {
       *[class*='icons'] {
-        display: inline-block;
+        display: flex;
         position: absolute;
         right: var(--spacing-large);
-        top: 8px;
+        top: 11px;
         transform: rotate(180deg);
       }
     }
@@ -22,22 +34,24 @@
   }
 
   .button__select {
-    background-color: var(--color-white);
-    border: 1px solid var(--color-gray-dark-900);
-    border-radius: var(--border-radius);
-    box-sizing: border-box;
-    color: var(--color-gray-dark);
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-body);
-    height: var(--row-height);
-    justify-content: space-between;
-    margin: 0;
-    padding: var(--spacing-medium) var(--spacing-large);
-    text-align: left;
-    max-width: 100%;
+    display: none;
     width: 100%;
 
     @media (min-width: 768px) {
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-dark-900);
+      border-radius: var(--border-radius);
+      box-sizing: border-box;
+      color: var(--color-gray-dark);
+      display: flex;
+      font-family: var(--font-family-body);
+      font-size: var(--font-size-body);
+      height: var(--row-height);
+      justify-content: space-between;
+      margin: 0;
+      padding: var(--spacing-medium) var(--spacing-large);
+      text-align: left;
+      max-width: 100%;
       width: 280px;
     }
 
@@ -45,7 +59,6 @@
       display: inline-block;
       position: absolute;
       right: var(--spacing-large);
-      transition: all 0.3s;
     }
 
     &.active {
@@ -78,17 +91,20 @@
   }
 
   .multiselect-listbox__content {
-    position: absolute;
-    background-color: var(--color-white);
-    max-height: calc(6 * 40px);
-    left: 0;
-    min-width: 280px;
-    opacity: 0;
-    top: 40px;
+    position: static;
+    opacity: 1;
     width: 100%;
     z-index: 1;
 
     @media (min-width: 768px) {
+      position: absolute;
+      background-color: var(--color-white);
+      max-height: calc(6 * 40px);
+      left: 0;
+      min-width: 280px;
+      opacity: 0;
+      top: 40px;
+      z-index: 1;
       width: 280px;
     }
 
@@ -98,6 +114,8 @@
       overflow-y: auto;
 
       & > .checkbox {
+        background-color: var(--color-white);
+        margin-bottom: var(--spacing-medium);
         padding: var(--spacing-extra-large) var(--spacing-medium);
 
         .checkbox__input:focus ~ .checkbox__label {
@@ -107,22 +125,30 @@
             text-decoration: underline;
           }
         }
+
         .checkbox__input:focus-visible ~ .checkbox__label {
           border-radius: var(--border-radius);
           outline: var(--focus-border-style) var(--focus-border-width)
             var(--color-secondary);
         }
+
+        @media (min-width: 768px) {
+          margin-bottom: 0;
+        }
       }
 
       .checkbox:has(input[type='checkbox']) {
         display: flex;
         justify-content: start;
         color: var(--color-gray-dark-900);
-        border: 1px solid var(--color-gray);
+        border: 1px solid var(--color-gray-lightest);
         border-top: none;
         line-height: 0;
         padding: var(--spacing-medium) var(--spacing-large);
-        max-width: 260px;
+
+        @media (min-width: 768px) {
+          border: 1px solid var(--color-gray);
+        }
       }
 
       .checkbox:has(input[type='checkbox']:checked) {
@@ -141,7 +167,7 @@
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      color: var(--color-black);
+      color: var(--color-gray-dark);
       text-decoration: none;
       padding: 0 var(--spacing-small) var(--spacing-small) 30px;
 
@@ -182,9 +208,15 @@
     &--reset {
       position: relative;
       z-index: 1000;
+
       .button--transparent {
         justify-content: flex-start;
         padding-left: 0;
+        display: inline-flex;
+
+        &.hide {
+          display: none;
+        }
 
         &:focus {
           background-color: transparent;
@@ -195,5 +227,9 @@
         display: none;
       }
     }
+
+    &--fullwidth {
+      max-width: 100%;
+    }
   }
 }
diff --git a/src/open_inwoner/scss/components/Form/Form.scss b/src/open_inwoner/scss/components/Form/Form.scss
index afae67b865..ec036b2e50 100644
--- a/src/open_inwoner/scss/components/Form/Form.scss
+++ b/src/open_inwoner/scss/components/Form/Form.scss
@@ -218,6 +218,24 @@
     grid-area: primary;
   }
 
+  .form__reset {
+    &--desktop {
+      display: none;
+
+      @media (min-width: 768px) {
+        display: block;
+      }
+    }
+
+    &--mobile {
+      display: block;
+
+      @media (min-width: 768px) {
+        display: none;
+      }
+    }
+  }
+
   &--inline {
     grid-template-columns: 1fr auto;
     align-items: start;
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index 2bad8f8d7f..6e06c0707e 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -233,6 +233,7 @@
 
   --font-size-body-extra-small: 12px;
   --font-size-body-small: var(--utrecht-paragraph-small-font-size);
+  --font-size-body-larger: 18px;
   --font-size-body-large: 20px;
   --font-line-height-body-small: 20px;
   --font-line-height-body-medium: 24px;
diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
index d302ab9463..80f2fb4c93 100644
--- a/src/open_inwoner/templates/pages/cases/list_inner.html
+++ b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -4,11 +4,26 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
 <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-title-text">{{ title_text }}</p>
 
 {% if filter_form_enabled %}
-<div class="filter-bar" id="filterBar">
-    <form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
-        <span>{% trans 'Filter op' %}:</span>
-        {% include "components/FilterBar/MultiSelectListbox.html" with statusfrequencies=status_freqs %}
-    </form>
+<div class="filter-bar__backdrop" id="filterBarBackdrop">
+    <div class="filter-bar" id="filterBar">
+        <div class="filter-bar__mobile-controls">
+            {% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %}
+            <div class="form__reset--mobile form__actions--fullwidth form__actions--reset">
+                <button class="button button--primary button--transparent" type="button" name="" value="" title="Wis alle filters" aria-label="Wis alle filters" id="resetAllFilters">
+                    Wis alle filters
+                </button>
+            </div>
+        </div>
+        <div class="filter-bar__mobile-button">
+            <p class="utrecht-paragraph filter-bar__heading">Filters</p>
+            {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
+            <p class="utrecht-paragraph filter-bar__status-text">Status</p>
+        </div>
+        <form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
+            <span class="filter-bar__label">{% trans 'Filter op' %}:</span>
+            {% include "components/FilterBar/MultiSelectListbox.html" with statusfrequencies=status_freqs %}
+        </form>
+    </div>
 </div>
 {% endif %}