@visns-studio/visns-components 5.4.15 → 5.4.16

package/package.json

@@ -49,7 +49,7 @@
         "react-to-print": "^2.15.1",
         "react-toastify": "^10.0.6",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.28.0",
+        "react-tooltip": "^5.28.1",
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
@@ -58,7 +58,7 @@
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
-        "vite": "^5.4.17",
+        "vite": "^5.4.18",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
@@ -81,7 +81,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.15",
+    "version": "5.4.16",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericDashboard.jsx

@@ -37,6 +37,8 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     const [selectedAddWidgetId, setSelectedAddWidgetId] = useState('');
     // Flag used only for triggering reinitialization after widget addition.
     const [widgetAdded, setWidgetAdded] = useState(false);
+    // State to track viewport width
+    const [viewportWidth, setViewportWidth] = useState(window.innerWidth);
 
     // Compute available widgets from original settings that are not yet added.
     const availableWidgets = setting.widgets.filter(
@@ -188,6 +190,21 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         }
     }, [dashboardSetting]);
 
+    // Handle window resize events to update viewportWidth
+    useEffect(() => {
+        const handleResize = () => {
+            setViewportWidth(window.innerWidth);
+        };
+
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+
+        // Clean up event listener on component unmount
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
     const openModal = (widgetId) => {
         setModalContent(widgetId);
         setModalShow(true);
@@ -867,8 +884,28 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 case 'table': {
                     const tableData = widgetData.data || widgetData;
                     const tableKeys = widgetData.keys || [];
+
+                    // Calculate dynamic max-width based on viewport width
+                    const getTableMaxWidth = () => {
+                        // For very small screens (mobile)
+                        if (viewportWidth < 768) {
+                            return '100%';
+                        }
+                        // For medium screens (tablets)
+                        else if (viewportWidth < 1200) {
+                            return Math.min(viewportWidth * 0.9, 1000) + 'px';
+                        }
+                        // For large screens (desktops)
+                        else {
+                            return Math.min(viewportWidth * 0.9, 2560) + 'px';
+                        }
+                    };
+
                     return (
-                        <div className={styles['table-container']}>
+                        <div
+                            className={styles['table-container']}
+                            style={{ maxWidth: getTableMaxWidth() }}
+                        >
                             {tableData.length > 0 ? (
                                 <div className={styles['table-scroll']}>
                                     <table>

package/src/components/crm/generic/styles/GenericDashboard.module.scss

@@ -387,7 +387,7 @@
     border: 1px solid #dadce0;
     border-radius: 8px;
     overflow: hidden;
-    max-width: 1400px;
+    width: 100%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }