Skip to content

Commit 0c83f71

Browse files
fathima-mirzafathima-mirza
authored
Fix: Responsive UI changes
1 parent 2396764 commit 0c83f71

File tree

6 files changed

+266
-101
lines changed

6 files changed

+266
-101
lines changed

‎example/src/styles/RowDetailsPopup.css

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
left: 0;
66
right: 0;
77
bottom: 0;
8-
z-index: 1000;
98
display: flex;
109
align-items: center;
1110
justify-content: center;
@@ -23,8 +22,10 @@
2322
max-width: 500px;
2423
width: 90%;
2524
max-height: 80vh;
26-
overflow: hidden;
25+
overflow: hidden; /* Changed to hidden to prevent overall scroll */
2726
font-family: 'DM Sans', sans-serif;
27+
display: flex;
28+
flex-direction: column;
2829
}
2930

3031
.row-details-popup-header {
@@ -33,6 +34,7 @@
3334
display: flex;
3435
justify-content: space-between;
3536
align-items: center;
37+
flex-shrink: 0; /* Prevent header from shrinking */
3638
}
3739

3840
.row-details-popup-title {
@@ -55,8 +57,9 @@
5557

5658
.row-details-popup-content {
5759
padding: 1.5rem;
58-
max-height: 60vh;
59-
overflow-y: auto;
60+
flex: 1; /* Take remaining space */
61+
overflow-y: auto; /* Enable scroll only for content */
62+
min-height: 0; /* Allow content to shrink */
6063
}
6164

6265
.row-details-popup-footer {
@@ -65,6 +68,7 @@
6568
display: flex;
6669
justify-content: flex-end;
6770
gap: 0.75rem;
71+
flex-shrink: 0; /* Prevent footer from shrinking */
6872
}
6973

7074
.row-details-popup-close-action {
@@ -180,5 +184,68 @@
180184

181185
/* Disable background scroll when popup is open */
182186
body.popup-open {
183-
overflow: hidden;
187+
overflow: hidden !important;
188+
position: fixed !important;
189+
width: 100% !important;
190+
height: 100% !important;
191+
}
192+
193+
/* Prevent scrolling on all table containers when popup is open */
194+
body.popup-open .table-wrapper,
195+
body.popup-open .table-container,
196+
body.popup-open .app-content,
197+
body.popup-open .app {
198+
overflow: hidden !important;
199+
pointer-events: none !important;
200+
}
201+
202+
/* Override the table's !important overflow rules when popup is open */
203+
body.popup-open .table-responsive-container {
204+
overflow: hidden !important;
205+
overflow-x: hidden !important;
206+
overflow-y: hidden !important;
207+
pointer-events: none !important;
208+
}
209+
210+
/* Override all media query rules for table scrolling when popup is open */
211+
body.popup-open .table-responsive-container,
212+
body.popup-open .table-responsive-container::-webkit-scrollbar {
213+
overflow: hidden !important;
214+
overflow-x: hidden !important;
215+
overflow-y: hidden !important;
216+
pointer-events: none !important;
217+
}
218+
219+
/* Override the specific media query rules that use !important */
220+
@media (max-width: 1199px) {
221+
body.popup-open .table-responsive-container {
222+
overflow: hidden !important;
223+
overflow-x: hidden !important;
224+
overflow-y: hidden !important;
225+
pointer-events: none !important;
226+
}
227+
}
228+
229+
@media (max-width: 768px) {
230+
body.popup-open .table-responsive-container {
231+
overflow: hidden !important;
232+
overflow-x: hidden !important;
233+
overflow-y: hidden !important;
234+
pointer-events: none !important;
235+
}
236+
}
237+
238+
@media (max-width: 480px) {
239+
body.popup-open .table-responsive-container {
240+
overflow: hidden !important;
241+
overflow-x: hidden !important;
242+
overflow-y: hidden !important;
243+
pointer-events: none !important;
244+
}
245+
}
246+
247+
/* Allow scrolling only within the popup */
248+
body.popup-open .row-details-popup-overlay,
249+
body.popup-open .row-details-popup {
250+
pointer-events: auto !important;
184251
}

‎src/components/ButtonGroup.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = ({
6262
};
6363

6464
return (
65-
<div style={{ display: "flex", gap: "0.5rem", flexShrink: 0 }}>
65+
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
6666
{buttons.map((button) => (
67-
<div key={button.id} style={{ position: 'relative' }}>
67+
<div key={button.id} style={{ position: 'relative', flexShrink: 0 }}>
6868
<Button
6969
icon={button.icon}
7070
text={button.text}

‎src/components/MultiLevelTable.tsx

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -704,43 +704,41 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
704704
<div className="table-wrapper">
705705
{showSearchBar && (
706706
<div className="search-bar-container">
707-
<div className="search-bar-left">
708-
{tableTitle && (
709-
<div className="table-title-container">
710-
<h2 style={componentStyles.title.table}>
711-
{tableTitle}
712-
</h2>
713-
{tableSubtitle && (
714-
<p
715-
className="table-subtitle"
716-
style={{
717-
color: mergedTheme.colors?.textColor || colors.textSecondary,
718-
}}
719-
>
720-
{tableSubtitle}
721-
</p>
722-
)}
723-
</div>
724-
)}
725-
<div className="search-input-container">
726-
<span className="search-input-icon">
727-
<SearchIcon width={24} height={24} />
728-
</span>
729-
<input
730-
className="search-input"
731-
type="text"
732-
placeholder="Search"
733-
value={searchTerm}
734-
onChange={e => onSearchChange?.(e.target.value)}
735-
style={{
736-
borderColor: mergedTheme.table?.cell?.borderColor || colors.searchBorder,
737-
backgroundColor: mergedTheme.colors?.background || colors.backgroundWhite,
738-
color: mergedTheme.colors?.textColor || colors.textPrimary,
739-
}}
740-
/>
707+
{tableTitle && (
708+
<div className="table-title-container">
709+
<h2 style={componentStyles.title.table}>
710+
{tableTitle}
711+
</h2>
712+
{tableSubtitle && (
713+
<p
714+
className="table-subtitle"
715+
style={{
716+
color: mergedTheme.colors?.textColor || colors.textSecondary,
717+
}}
718+
>
719+
{tableSubtitle}
720+
</p>
721+
)}
741722
</div>
723+
)}
724+
<div className="search-input-container">
725+
<span className="search-input-icon">
726+
<SearchIcon width={24} height={24} />
727+
</span>
728+
<input
729+
className="search-input"
730+
type="text"
731+
placeholder="Search"
732+
value={searchTerm}
733+
onChange={e => onSearchChange?.(e.target.value)}
734+
style={{
735+
borderColor: mergedTheme.table?.cell?.borderColor || colors.searchBorder,
736+
backgroundColor: mergedTheme.colors?.background || colors.backgroundWhite,
737+
color: mergedTheme.colors?.textColor || colors.textPrimary,
738+
}}
739+
/>
742740
</div>
743-
<div className="search-bar-right">
741+
<div className="action-buttons-container">
744742
{renderActionButtons()}
745743
</div>
746744
</div>

‎src/components/Pagination.tsx

Lines changed: 71 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22

33
import { ArrowIcon } from './icons';
44
import { PAGE_SIZE_OPTIONS } from '../constants/pagination';
@@ -55,40 +55,90 @@ export const Pagination: React.FC<PaginationProps> = ({
5555
setPageSize,
5656
totalItems
5757
}) => {
58-
// Generate page numbers to show
58+
// Track screen width for responsive pagination
59+
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
60+
61+
// Update screen width on window resize
62+
useEffect(() => {
63+
const handleResize = () => {
64+
setScreenWidth(window.innerWidth);
65+
};
66+
67+
window.addEventListener('resize', handleResize);
68+
69+
// Cleanup event listener on component unmount
70+
return () => {
71+
window.removeEventListener('resize', handleResize);
72+
};
73+
}, []);
74+
75+
// Generate page numbers to show based on screen size
5976
const getVisiblePages = () => {
6077
const pages: number[] = [];
6178

62-
// If 5 or fewer pages, show all
63-
if (pageCount <= 5) {
79+
// Determine how many page numbers to show based on screen width
80+
let maxVisiblePages: number;
81+
let showPageNumbers = true;
82+
83+
if (screenWidth <= 374)
84+
// Very small screens: show only 2 page numbers + ellipsis
85+
maxVisiblePages = 2;
86+
else if (screenWidth <= 542)
87+
// Small screens: show 3 page numbers + ellipsis
88+
maxVisiblePages = 3;
89+
else if (screenWidth < 1228)
90+
// Medium screens: show 4 page numbers + ellipsis
91+
maxVisiblePages = 4;
92+
else
93+
// Large screens: show up to 6 page numbers
94+
maxVisiblePages = 6;
95+
96+
// For very small screens, don't show page numbers at all
97+
if (screenWidth <= 415)
98+
showPageNumbers = false;
99+
100+
// If not showing page numbers, return empty array (only arrows will show)
101+
if (!showPageNumbers)
102+
return pages;
103+
104+
// If total pages is less than or equal to max visible pages, show all
105+
if (pageCount <= maxVisiblePages) {
64106
for (let i = 0; i < pageCount; i++)
65107
pages.push(i);
66108

67109
return pages;
68110
}
69111

70-
// For more than 5 pages, show smart pagination
71-
if (pageIndex <= 2) {
72-
// Near start: show 1, 2, 3, 4, 5, ..., last
73-
for (let i = 0; i < 5; i++)
112+
// Calculate how many pages to show on each side of current page
113+
const sidePages = Math.floor((maxVisiblePages - 1) / 2);
114+
115+
// Near start
116+
if (pageIndex <= sidePages) {
117+
// Show first few pages + ellipsis + last page
118+
for (let i = 0; i < maxVisiblePages - 1; i++)
74119
pages.push(i);
75120

76121
pages.push(-1); // Ellipsis marker
77122
pages.push(pageCount - 1);
78-
} else if (pageIndex >= pageCount - 3) {
79-
// Near end: show 1, ..., last-4, last-3, last-2, last-1, last
123+
}
124+
// Near end
125+
else if (pageIndex >= pageCount - sidePages - 1) {
126+
// Show first page + ellipsis + last few pages
80127
pages.push(0);
81128
pages.push(-1); // Ellipsis marker
82-
for (let i = pageCount - 5; i < pageCount; i++)
83-
pages.push(i);
84129

85-
} else {
86-
// Middle: show 1, ..., current-1, current, current+1, ..., last
130+
for (let i = pageCount - (maxVisiblePages - 1); i < pageCount; i++)
131+
pages.push(i);
132+
}
133+
// Middle
134+
else {
135+
// Show first page + ellipsis + current and neighbors + ellipsis + last page
87136
pages.push(0);
88137
pages.push(-1); // Ellipsis marker
89-
pages.push(pageIndex - 1);
90-
pages.push(pageIndex);
91-
pages.push(pageIndex + 1);
138+
139+
for (let i = pageIndex - sidePages; i <= pageIndex + sidePages; i++)
140+
pages.push(i);
141+
92142
pages.push(-1); // Ellipsis marker
93143
pages.push(pageCount - 1);
94144
}
@@ -108,7 +158,10 @@ export const Pagination: React.FC<PaginationProps> = ({
108158
position: 'absolute'
109159
}}>
110160
{/* Total Items Text */}
111-
<div style={{ ...componentStyles.pagination.totalItems, position: 'static' }}>
161+
<div
162+
className="pagination-total-items"
163+
style={{ ...componentStyles.pagination.totalItems, position: 'static' }}
164+
>
112165
Total {totalItems} items
113166
</div>
114167

0 commit comments

Comments
 (0)