Fix: UI issues in credentials dialog and card descriptions (#2137)

* Update styles for dashboard page

* Fix grid in chatflows and marketplaces pages

* Update styles for main routes

* Create ViewHeader component and use it in chatflows and marketplace

* Use viewheader in all main routes views and make the styles consistent

* Update table styles for chatflow and marketplace views

* Update table and grid styles in all main routes views

* Make backgrounds, borders, and colors everywhere

* Apply text ellipsis for titles in cards and tables

* Update credentials list dialog styles

* Update tools dialog styles

* Update styles for inputs and dialogs

* Show skeleton loaders for main routes

* Apply text ellipsis to chatflow title in canvas page

* Update icons for load and export buttons in tools and assistants

* Fix issue where table header is shown when number of elements is zero

* Add error boundary component to main routes

* Capture errors from all requests in main routes

* Fix id for add api key and add variable buttons

* Fix missing th tag in variables table body

* Fix credentials search background color

* Apply multiline text ellipsis to description in ItemCard

* Fix unused import

packages/ui/src/ui-component/cards/ItemCard.jsx

@@ -91,7 +91,19 @@ const ItemCard = ({ data, images, onClick }) => {
                             </Typography>
                         </div>
                         {data.description && (
-                            <span style={{ marginTop: 10, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}>{data.description}</span>
+                            <span
+                                style={{
+                                    display: '-webkit-box',
+                                    marginTop: 10,
+                                    overflowWrap: 'break-word',
+                                    WebkitLineClamp: 3,
+                                    WebkitBoxOrient: 'vertical',
+                                    textOverflow: 'ellipsis',
+                                    overflow: 'hidden'
+                                }}
+                            >
+                                {data.description}
+                            </span>
                         )}
                     </Box>
                     {images && (