#DKN-206 #DKN-207 Update the filter question to have a single column in the ta…

applications/dknet/frontend/src/components/FilterAssistantDialog/FilterQuestions.tsx

@@ -8,6 +8,7 @@ import { useFilterLogic } from '../../hooks/useFilterLogic';
 import { useResponsiveConfig } from '../../hooks/useResponsiveConfig';
 import { FilterQuestionsProps } from '../../utils/types';
 import { vars } from '../../theme/variables';
+import { useSidebarVisibility } from "../../hooks/useSidebarVisibility";
 
 const { grey100, grey300 } = vars;
 
@@ -17,14 +18,13 @@ const styles = {
     display: 'flex',
     backgroundColor: grey100
   },
-  contentWrapper: (showPreview: boolean, config: any) => ({
-    width: showPreview ? `calc(100% - ${config.sidebarWidth} - ${config.previewWidth})` : `calc(100% - ${config.sidebarWidth})`,
+  contentWrapper: {
     borderLeft: `0.0625rem solid ${grey300}`,
     height: '100%',
     display: 'flex',
     overflow: 'hidden',
     transition: 'width 0.3s ease-in-out',
-  }),
+  },
   innerContent: {
     width: '100%',
     height: '100%'
@@ -43,6 +43,7 @@ const FilterQuestions: React.FC<FilterQuestionsProps> = ({
 }) => {
   const config = useResponsiveConfig();
   const { isFiltersEmpty, handleSingleOptionSelect, filterValues, results } = useFilterLogic();
+  const { showSidebar } = useSidebarVisibility({ showPreview });
 
   const isLastQuestion = questionsTabs.length - 1 === value;
   useKeyboardNavigation({
@@ -64,18 +65,38 @@ const FilterQuestions: React.FC<FilterQuestionsProps> = ({
 
   const currentQuestion = questionsTabs[value];
 
+
+  // Calculate main content width based on sidebar and preview visibility
+  const getMainContentWidth = () => {
+    const sidebarWidth = showSidebar ? config.sidebarWidth : '0';
+    if (showPreview) {
+      return `calc(100% - ${sidebarWidth} - ${config.previewWidth})`;
+    }
+    return `calc(100% - ${sidebarWidth})`;
+  };
+
   return (
     <Box sx={styles.container}>
-      <QuestionSidebar
-        questionsTabs={questionsTabs}
-        value={value}
-        handleChange={handleChange}
-        progress={progress}
-        config={config}
-        filterValues={filterValues}
-      />
+      <Box sx={{
+        width: showSidebar ? config.sidebarWidth : '0',
+        minWidth: showSidebar ? config.sidebarWidth : '0',
+        maxWidth: showSidebar ? config.sidebarWidth : '0',
+        overflow: 'hidden',
+        transition: 'all 0.3s ease-in-out',
+        opacity: showSidebar ? 1 : 0,
+        transform: showSidebar ? 'translateX(0)' : 'translateX(-100%)',
+      }}>
+        <QuestionSidebar
+          questionsTabs={questionsTabs}
+          value={value}
+          handleChange={handleChange}
+          progress={progress}
+          config={config}
+          filterValues={filterValues}
+        />
+      </Box>
 
-      <Box sx={styles.contentWrapper(showPreview, config)}>
+      <Box sx={{ ...styles.contentWrapper, width: getMainContentWidth() }}>
         <Box sx={styles.innerContent}>
           <QuestionContent
             currentQuestion={currentQuestion}

applications/dknet/frontend/src/hooks/useSidebarVisibility.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { useResponsive } from './useResponsive';
+
+interface UseSidebarVisibilityProps {
+  showPreview: boolean;
+}
+
+export const useSidebarVisibility = ({ showPreview }: UseSidebarVisibilityProps) => {
+  const { isTablet } = useResponsive();
+
+  const showSidebar = useMemo(() => {
+    // On tablet, hide sidebar when preview is shown
+    if (isTablet) {
+      return !showPreview;
+    }
+
+    // On other screen sizes, always show sidebar
+    return true;
+  }, [isTablet, showPreview]);
+
+  return {
+    showSidebar
+  };
+};

applications/dknet/frontend/src/utils/constants.ts

@@ -16,39 +16,33 @@ export const INPUT_TYPES = {
 
 export const RESPONSIVE_CONFIGS = {
   tablet: {
-    sidebarWidth: '19rem',
+    sidebarWidth: '18.75rem',
     showPreviewByDefault: false,
-    previewWidth: '24rem',
-    questionMaxWidth: '38rem',
+    previewWidth: '20rem',
+    questionMaxWidth: '40rem',
   },
   laptop: {
-    sidebarWidth: '20rem',
+    sidebarWidth: '18.75rem',
     showPreviewByDefault: true,
-    previewWidth: '25rem',
+    previewWidth: '20rem',
     questionMaxWidth: '40rem',
   },
   smallDesktop: {
-    sidebarWidth: '21rem',
+    sidebarWidth: '18.75rem',
     showPreviewByDefault: true,
-    previewWidth: '26rem',
+    previewWidth: '25rem',
     questionMaxWidth: '42rem',
   },
   desktop: {
-    sidebarWidth: '22rem',
+    sidebarWidth: '18.75rem',
     showPreviewByDefault: true,
-    previewWidth: '28rem',
+    previewWidth: '25rem',
     questionMaxWidth: '45rem',
   },
-  tooSmall: {
-    sidebarWidth: '18rem',
-    showPreviewByDefault: false,
-    previewWidth: '20rem',
-    questionMaxWidth: '30rem',
-  },
   default: {
-    sidebarWidth: '20rem',
+    sidebarWidth: '18.75rem',
     showPreviewByDefault: true,
-    previewWidth: '25rem',
+    previewWidth: '20rem',
     questionMaxWidth: '40rem',
   }
 } as const;