feat(ui): add breadcrumb icons, fix alignment, and remove duplicate form headers

- add section icons to all breadcrumbs across every page
- fix breadcrumb nav display:flex so icons align vertically with buttons
- wrap all page breadcrumbs in pageToolbar div for consistent layout
- add Breadcrumbs to AllRunsPage which previously used a plain h1
- fix envCardHeader flex:1 so settings button hugs the right edge
- remove card header from environment create/edit forms (duplicated breadcrumb)
This commit is contained in:
2026-04-10 19:58:33 +03:00
parent de0cbeef7c
commit 99da7ac891
37 changed files with 224 additions and 84 deletions
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Settings, ExternalLink, Pencil, Trash2, Plus } from 'lucide-react';
import { Settings, ExternalLink, Pencil, Trash2, Plus, Globe } from 'lucide-react';
import { environments } from '../../api';
import type { Environment } from '../../api';
import {
@@ -121,7 +121,9 @@ export function EnvironmentsPage() {
return (
<div>
<Breadcrumbs items={[{ label: t('environments.title') }]} className={styles.breadcrumbs} />
<div className={styles.pageToolbar}>
<Breadcrumbs items={[{ label: t('environments.title'), icon: <Globe size={14} /> }]} />
</div>
{error && <p className={styles.error}>{error}</p>}
{loading ? (
<p className={styles.muted}>{t('environments.loading')}</p>