e62923fb91
Enhance the document icons grid to better handle single-row layouts by dynamically suppressing column stretching when the number of documents fits in a single row. Introduce maxColumnsForIconGrid and related logic to calculate optimal column counts based on container width and icon size. Update grid style computation to allow optional suppression of single row stretch, improving alignment and appearance for small document sets. Add unit tests for icon grid layout calculation and column logic to ensure correctness across different icon sizes and container widths.
24 lines
1 KiB
TypeScript
24 lines
1 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
import { iconsGridStyle, maxColumnsForIconGrid } from '../../src/components/doclist/views/iconsGrid';
|
|
|
|
test.describe('icons grid layout', () => {
|
|
test('calculates max columns from width and icon size', () => {
|
|
expect(maxColumnsForIconGrid('md', 136)).toBe(1);
|
|
expect(maxColumnsForIconGrid('md', 300)).toBe(2);
|
|
expect(maxColumnsForIconGrid('md', 1000)).toBe(6);
|
|
});
|
|
|
|
test('keeps fill behavior when single-row suppression is off', () => {
|
|
const style = iconsGridStyle('md', 4);
|
|
expect(style.gridTemplateColumns).toContain('repeat(auto-fit');
|
|
expect(style.gridTemplateColumns).toContain('1fr');
|
|
expect(style.justifyContent).toBeUndefined();
|
|
});
|
|
|
|
test('disables stretch when single-row suppression is on', () => {
|
|
const style = iconsGridStyle('md', 4, { suppressSingleRowStretch: true });
|
|
expect(style.gridTemplateColumns).toContain('repeat(auto-fill');
|
|
expect(style.gridTemplateColumns).not.toContain('1fr');
|
|
expect(style.justifyContent).toBe('start');
|
|
});
|
|
});
|