From eb5eb336f558554b58dce6567b37ee009a4273d4 Mon Sep 17 00:00:00 2001 From: fathima Date: Wed, 23 Jul 2025 14:45:29 +0530 Subject: [PATCH 1/3] fix: Pagination responsiveness on small screen UI --- src/components/Pagination.tsx | 89 ++++++++++++++++++++++++++++------- src/styles/Pagination.css | 19 ++++---- 2 files changed, 81 insertions(+), 27 deletions(-) diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx index 6a1ead8..652bf7d 100644 --- a/src/components/Pagination.tsx +++ b/src/components/Pagination.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { ArrowIcon } from './icons'; import { PAGE_SIZE_OPTIONS } from '../constants/pagination'; @@ -55,40 +55,90 @@ export const Pagination: React.FC = ({ setPageSize, totalItems }) => { - // Generate page numbers to show + // Track screen width for responsive pagination + const [screenWidth, setScreenWidth] = useState(window.innerWidth); + + // Update screen width on window resize + useEffect(() => { + const handleResize = () => { + setScreenWidth(window.innerWidth); + }; + + window.addEventListener('resize', handleResize); + + // Cleanup event listener on component unmount + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + // Generate page numbers to show based on screen size const getVisiblePages = () => { const pages: number[] = []; - // If 5 or fewer pages, show all - if (pageCount <= 5) { + // Determine how many page numbers to show based on screen width + let maxVisiblePages: number; + let showPageNumbers = true; + + if (screenWidth <= 374) + // Very small screens: show only 2 page numbers + ellipsis + maxVisiblePages = 2; + else if (screenWidth <= 542) + // Small screens: show 3 page numbers + ellipsis + maxVisiblePages = 3; + else if (screenWidth < 1228) + // Medium screens: show 4 page numbers + ellipsis + maxVisiblePages = 4; + else + // Large screens: show up to 6 page numbers + maxVisiblePages = 6; + + // For very small screens, don't show page numbers at all + if (screenWidth <= 415) + showPageNumbers = false; + + // If not showing page numbers, return empty array (only arrows will show) + if (!showPageNumbers) + return pages; + + // If total pages is less than or equal to max visible pages, show all + if (pageCount <= maxVisiblePages) { for (let i = 0; i < pageCount; i++) pages.push(i); return pages; } - // For more than 5 pages, show smart pagination - if (pageIndex <= 2) { - // Near start: show 1, 2, 3, 4, 5, ..., last - for (let i = 0; i < 5; i++) + // Calculate how many pages to show on each side of current page + const sidePages = Math.floor((maxVisiblePages - 1) / 2); + + // Near start + if (pageIndex <= sidePages) { + // Show first few pages + ellipsis + last page + for (let i = 0; i < maxVisiblePages - 1; i++) pages.push(i); pages.push(-1); // Ellipsis marker pages.push(pageCount - 1); - } else if (pageIndex >= pageCount - 3) { - // Near end: show 1, ..., last-4, last-3, last-2, last-1, last + } + // Near end + else if (pageIndex >= pageCount - sidePages - 1) { + // Show first page + ellipsis + last few pages pages.push(0); pages.push(-1); // Ellipsis marker - for (let i = pageCount - 5; i < pageCount; i++) - pages.push(i); - } else { - // Middle: show 1, ..., current-1, current, current+1, ..., last + for (let i = pageCount - (maxVisiblePages - 1); i < pageCount; i++) + pages.push(i); + } + // Middle + else { + // Show first page + ellipsis + current and neighbors + ellipsis + last page pages.push(0); pages.push(-1); // Ellipsis marker - pages.push(pageIndex - 1); - pages.push(pageIndex); - pages.push(pageIndex + 1); + + for (let i = pageIndex - sidePages; i <= pageIndex + sidePages; i++) + pages.push(i); + pages.push(-1); // Ellipsis marker pages.push(pageCount - 1); } @@ -108,7 +158,10 @@ export const Pagination: React.FC = ({ position: 'absolute' }}> {/* Total Items Text */} -
+
Total {totalItems} items
diff --git a/src/styles/Pagination.css b/src/styles/Pagination.css index 78209d7..2724134 100644 --- a/src/styles/Pagination.css +++ b/src/styles/Pagination.css @@ -87,18 +87,19 @@ } } -@media (max-width: 768px) { - .pagination-container { - min-width: 1200px; /* Maintain minimum width */ - overflow-x: auto; /* Enable horizontal scroll */ - } - - .pagination-container > div { - min-width: 600px; /* Maintain minimum width for content */ +/* Show total items text on screens 798px and wider */ +@media (min-width: 798px) { + .pagination-total-items { + display: block; } } -@media (max-width: 480px) { +/* Hide total items text on screens smaller than 798px */ +@media (max-width: 797px) { + .pagination-total-items { + display: none; + } + .pagination-container { min-width: 1200px; /* Maintain minimum width */ overflow-x: auto; /* Enable horizontal scroll */ From d426cd68d6f02d3bec6cd4960c120d6f45d4be44 Mon Sep 17 00:00:00 2001 From: fathima Date: Fri, 25 Jul 2025 10:47:01 +0530 Subject: [PATCH 2/3] fix: Disable details popup background scroll --- example/src/styles/RowDetailsPopup.css | 77 ++++++++++++++++++++++++-- 1 file changed, 72 insertions(+), 5 deletions(-) diff --git a/example/src/styles/RowDetailsPopup.css b/example/src/styles/RowDetailsPopup.css index b231d5c..eb7305b 100644 --- a/example/src/styles/RowDetailsPopup.css +++ b/example/src/styles/RowDetailsPopup.css @@ -5,7 +5,6 @@ left: 0; right: 0; bottom: 0; - z-index: 1000; display: flex; align-items: center; justify-content: center; @@ -23,8 +22,10 @@ max-width: 500px; width: 90%; max-height: 80vh; - overflow: hidden; + overflow: hidden; /* Changed to hidden to prevent overall scroll */ font-family: 'DM Sans', sans-serif; + display: flex; + flex-direction: column; } .row-details-popup-header { @@ -33,6 +34,7 @@ display: flex; justify-content: space-between; align-items: center; + flex-shrink: 0; /* Prevent header from shrinking */ } .row-details-popup-title { @@ -55,8 +57,9 @@ .row-details-popup-content { padding: 1.5rem; - max-height: 60vh; - overflow-y: auto; + flex: 1; /* Take remaining space */ + overflow-y: auto; /* Enable scroll only for content */ + min-height: 0; /* Allow content to shrink */ } .row-details-popup-footer { @@ -65,6 +68,7 @@ display: flex; justify-content: flex-end; gap: 0.75rem; + flex-shrink: 0; /* Prevent footer from shrinking */ } .row-details-popup-close-action { @@ -180,5 +184,68 @@ /* Disable background scroll when popup is open */ body.popup-open { - overflow: hidden; + overflow: hidden !important; + position: fixed !important; + width: 100% !important; + height: 100% !important; +} + +/* Prevent scrolling on all table containers when popup is open */ +body.popup-open .table-wrapper, +body.popup-open .table-container, +body.popup-open .app-content, +body.popup-open .app { + overflow: hidden !important; + pointer-events: none !important; +} + +/* Override the table's !important overflow rules when popup is open */ +body.popup-open .table-responsive-container { + overflow: hidden !important; + overflow-x: hidden !important; + overflow-y: hidden !important; + pointer-events: none !important; +} + +/* Override all media query rules for table scrolling when popup is open */ +body.popup-open .table-responsive-container, +body.popup-open .table-responsive-container::-webkit-scrollbar { + overflow: hidden !important; + overflow-x: hidden !important; + overflow-y: hidden !important; + pointer-events: none !important; +} + +/* Override the specific media query rules that use !important */ +@media (max-width: 1199px) { + body.popup-open .table-responsive-container { + overflow: hidden !important; + overflow-x: hidden !important; + overflow-y: hidden !important; + pointer-events: none !important; + } +} + +@media (max-width: 768px) { + body.popup-open .table-responsive-container { + overflow: hidden !important; + overflow-x: hidden !important; + overflow-y: hidden !important; + pointer-events: none !important; + } +} + +@media (max-width: 480px) { + body.popup-open .table-responsive-container { + overflow: hidden !important; + overflow-x: hidden !important; + overflow-y: hidden !important; + pointer-events: none !important; + } +} + +/* Allow scrolling only within the popup */ +body.popup-open .row-details-popup-overlay, +body.popup-open .row-details-popup { + pointer-events: auto !important; } \ No newline at end of file From d02ea4b11360d66cda4eafbf33a3974675c17a59 Mon Sep 17 00:00:00 2001 From: fathima Date: Fri, 25 Jul 2025 16:34:41 +0530 Subject: [PATCH 3/3] fix: Auto-arrange title, searchbar, buttons responsively --- src/components/ButtonGroup.tsx | 4 +- src/components/MultiLevelTable.tsx | 68 +++++++++--------- src/styles/MultiLevelTable.css | 110 ++++++++++++++++++++--------- 3 files changed, 113 insertions(+), 69 deletions(-) diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx index f1f249b..94a142b 100644 --- a/src/components/ButtonGroup.tsx +++ b/src/components/ButtonGroup.tsx @@ -62,9 +62,9 @@ export const ButtonGroup: React.FC = ({ }; return ( -
+
{buttons.map((button) => ( -
+