diff --git a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
index 99a0e576fe..eb6f15b329 100644
--- a/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
+++ b/src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
@@ -24,7 +24,7 @@
-
diff --git a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
index bde6691061..b92fe272c7 100644
--- a/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
+++ b/src/open_inwoner/scss/components/FilterBar/FilterBar.scss
@@ -15,6 +15,7 @@
height: 70vh;
position: fixed;
top: 30vh;
+ transition: top 2s linear;
z-index: 500;
.multiselect-listbox__modal {
@@ -48,10 +49,13 @@
.filter-bar__form {
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 {
diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
index 5d314084bd..1507a12118 100644
--- a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
+++ b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
@@ -107,6 +107,7 @@
text-decoration: underline;
}
}
+
.checkbox__input:focus-visible ~ .checkbox__label {
border-radius: var(--border-radius);
outline: var(--focus-border-style) var(--focus-border-width)
@@ -182,6 +183,7 @@
&--reset {
position: relative;
z-index: 1000;
+
.button--transparent {
justify-content: flex-start;
padding-left: 0;
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/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
index 6b7bbf950a..798c0eb3ae 100644
--- a/src/open_inwoner/templates/pages/cases/list_inner.html
+++ b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -7,7 +7,7 @@ {{ page_title }} ({{ paginator.count }}
{% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %}
-
@@ -19,7 +19,7 @@
{{ page_title }} ({{ paginator.count }}
{% include "components/FilterBar/MultiSelectListbox.html" with statusfrequencies=status_freqs %}
{# Mobile submit button updates on select #}
-