fix(pager): replace manual HTML test with proper TSX test and update guidelines

Co-authored-by: zhpenkov <[email protected]>

Author: Copilot

.github/copilot-instructions.md

@@ -318,6 +318,24 @@ npm run clean          # Full cleanup (includes node_modules)
 - **Linting** - Enforced on all commits via Husky + lint-staged
 - **Accessibility tests** - Run automatically on default-ocean-blue-a11y swatch
 
+#### HTML Test File Creation Rules
+
+- **DO NOT** create `.html` files directly in `tests/component/` folders
+- **DO** create `.tsx` test files in `packages/html/src/{component}/tests/` folder
+- **Use existing components** from the respective component spec and templates
+- **Keep tests simple** - they are for visual purposes only, no complex functionality
+- **Follow naming convention** - use descriptive names like `component-feature.tsx`
+- **HTML files are auto-generated** - CI will automatically generate HTML files from TSX tests
+
+#### Test File Structure
+```
+packages/html/src/{component}/
+├── {component}.spec.tsx    # Component specifications
+├── templates/              # Reusable component templates
+└── tests/                  # Test scenarios (create .tsx files here)
+    └── {test-name}.tsx     # Individual test files
+```
+
 ## Common Issues
 
 - **Unit tests failing**: Run `npm run docs` first to generate metadata

packages/html/src/pager/tests/pager-large-sizes.tsx

@@ -0,0 +1,19 @@
+import { Pager } from "../../pager";
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+            <span>Small pager with 100 items per page</span>
+            <Pager size="small" itemsPerPage={100} responsive={false} />
+            
+            <span>Medium pager with 500 items per page</span>
+            <Pager size="medium" itemsPerPage={500} responsive={false} />
+            
+            <span>Large pager with 1000 items per page</span>
+            <Pager size="large" itemsPerPage={1000} responsive={false} />
+            
+            <span>Large pager with 10000 items per page (should demonstrate clipping)</span>
+            <Pager size="large" itemsPerPage={10000} responsive={false} />
+        </div>
+    </>
+);