fix(AdvancedTable): Advanced filter not responsive

frontend/src/App.vue

@@ -1177,8 +1177,8 @@ img {
 	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 	background-color: var(--white);
 	color: var(--dark-grey);
-	width: 500px !important;
-	max-width: 1000px !important;
+	width: 100% !important;
+	max-width: 500px !important;
 	max-height: calc(100vh - 300px);
 	overflow-y: auto;
 

frontend/src/components/AdvancedTable.vue

@@ -47,7 +47,11 @@
 							<div
 								v-for="(filter, index) in editingFilters"
 								:key="`filter-${index}`"
-								class="control is-grouped is-expanded"
+								class="
+									advanced-filter
+									control
+									is-grouped is-expanded
+								"
 							>
 								<div class="control select">
 									<select
@@ -1290,6 +1294,33 @@ export default {
 			font-size: 22px;
 		}
 	}
+
+	@media screen and (max-width: 500px) {
+		&.advanced-filter {
+			flex-wrap: wrap;
+			.control.select {
+				width: 50%;
+				select {
+					width: 100%;
+				}
+			}
+			.control {
+				margin-bottom: 0 !important;
+				&:nth-child(1) select {
+					border-radius: 5px 0 0 0;
+				}
+				&:nth-child(2) select {
+					border-radius: 0 5px 0 0;
+				}
+				&:nth-child(3) input {
+					border-radius: 0 0 0 5px;
+				}
+				&:nth-child(4) button {
+					border-radius: 0 0 5px 0;
+				}
+			}
+		}
+	}
 }
 .advanced-filter-bottom {
 	display: flex;