Introduced responsive layout utilities and directives for Angular.

- ✨ **Feature**: Added breakpoint utility for responsive design
- ✨ **Feature**: Implemented BreakpointDirective for conditional rendering
- 🛠️ **Refactor**: Updated styles for filter and order-by components
- 📚 **Docs**: Created README and documentation for ui-layout library
- ⚙️ **Config**: Added TypeScript and ESLint configurations for the new library

apps/isa-app/stories/ui/layout/breakpoint.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="UI/Layout/Breakpoint" />
+
+# Breakpoint Utility
+
+The `breakpoint` utility allows you to create a Signal that evaluates to `true` if the current viewport matches the specified breakpoints.
+
+## Usage
+
+### Example
+
+```typescript
+import { Component } from '@angular/core';
+import { breakpoint, Breakpoint } from 'ui-layout';
+
+@Component({
+  selector: 'app-breakpoint-demo',
+  template: `
+    <div *uiBreakpoint="'tablet'">This content is visible only on tablet viewports.</div>
+  `,
+  imports: [BreakpointDirective],
+})
+export class BreakpointDemoComponent {
+  isTablet = breakpoint(Breakpoint.Tablet);
+}
+```
+
+### Breakpoints Table
+
+| Breakpoint   | CSS Media Query Selector                      |
+| ------------ | --------------------------------------------- |
+| `tablet`     | `(max-width: 1279px)`                         |
+| `desktop`    | `(min-width: 1280px) and (max-width: 1439px)` |
+| `desktop-l`  | `(min-width: 1440px) and (max-width: 1919px)` |
+| `desktop-xl` | `(min-width: 1920px)`                         |