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,7 +112,16 @@ export function DocSearchView({ posts }: Props) {
             default:
               console.error(`Unknown filter type: ${filter.type}`);
           }
+
           return (
+            <Grid
+              key={filter.id}
+              size={{
+                xs: 12,
+                sm:  6,
+                md:  3,
+              }}
+            >
               <Box
                 sx={{
                   mb: 5,
@@ -124,10 +132,11 @@ export function DocSearchView({ posts }: Props) {
               >
                 {filterComp}
               </Box>
-          )
+            </Grid>
+          );
         }
         )}
-      </>
+      </Grid>
 
       <Grid container spacing={3}>
         {posts.map((post, index) => {