From f340130f89b7ffad60f40c4e592f8a2b270719d4 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 7 Jul 2025 13:51:02 +0200
Subject: [PATCH] =?UTF-8?q?refactor(doc-search-view):=20Gitter=20zu=20Filt?=
 =?UTF-8?q?ern=20hinzuf=C3=BCgen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../document/view/doc-search-view.tsx         | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx b/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
index 6a16b2e..dbd1a9c 100644
--- a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
+++ b/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) => {