refactor(doc-search-view): Gitter zu Filtern hinzufügen

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import { useState, useCallback, useEffect } from 'react';
 
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 
@@ -85,8 +83,9 @@ export function DocSearchView({ posts }: Props) {
         </Button>
       </Box>
 
-      <>
+      <Grid container spacing={3}>
         {filters.map((filter, index) => {
+
           let filterComp;
           switch (filter.type) {
             case 'BOOLEAN':
@@ -113,21 +112,31 @@ export function DocSearchView({ posts }: Props) {
             default:
               console.error(`Unknown filter type: ${filter.type}`);
           }
+
           return (
-            <Box
-              sx={{
-                mb: 5,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
+            <Grid
+              key={filter.id}
+              size={{
+                xs: 12,
+                sm:  6,
+                md:  3,
               }}
             >
-              {filterComp}
-            </Box>
-          )
+              <Box
+                sx={{
+                  mb: 5,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                {filterComp}
+              </Box>
+            </Grid>
+          );
         }
         )}
-      </>
+      </Grid>
 
       <Grid container spacing={3}>
         {posts.map((post, index) => {