fix: keep view toggle visible in both compact and expanded modes
Some checks failed
CI / cleanup-branch (pull_request) Has been skipped
CI / build (pull_request) Successful in 2m16s
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 2m12s
CI / docker (pull_request) Has been skipped
CI / deploy (pull_request) Has been skipped
CI / deploy-feature (pull_request) Has been skipped
CI / docker (push) Has been cancelled
CI / deploy (push) Has been cancelled
CI / deploy-feature (push) Has been cancelled
Some checks failed
CI / cleanup-branch (pull_request) Has been skipped
CI / build (pull_request) Successful in 2m16s
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 2m12s
CI / docker (pull_request) Has been skipped
CI / deploy (pull_request) Has been skipped
CI / deploy-feature (pull_request) Has been skipped
CI / docker (push) Has been cancelled
CI / deploy (push) Has been cancelled
CI / deploy-feature (push) Has been cancelled
Move toolbar above the grid conditional so it renders in both view modes. Hidden only on app detail pages (isFullWidth). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -647,6 +647,28 @@ export default function AgentHealth() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
{/* View toolbar — hidden on app detail page */}
|
||||||
|
{!isFullWidth && (
|
||||||
|
<div className={styles.viewToolbar}>
|
||||||
|
<div className={styles.viewToggle}>
|
||||||
|
<button
|
||||||
|
className={`${styles.viewToggleBtn} ${viewMode === 'compact' ? styles.viewToggleBtnActive : ''}`}
|
||||||
|
onClick={() => toggleViewMode('compact')}
|
||||||
|
title="Compact view"
|
||||||
|
>
|
||||||
|
<LayoutGrid size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`${styles.viewToggleBtn} ${viewMode === 'expanded' ? styles.viewToggleBtnActive : ''}`}
|
||||||
|
onClick={() => toggleViewMode('expanded')}
|
||||||
|
title="Expanded view"
|
||||||
|
>
|
||||||
|
<List size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Group cards grid */}
|
{/* Group cards grid */}
|
||||||
{viewMode === 'expanded' || isFullWidth ? (
|
{viewMode === 'expanded' || isFullWidth ? (
|
||||||
<div className={isFullWidth ? styles.groupGridSingle : styles.groupGrid}>
|
<div className={isFullWidth ? styles.groupGridSingle : styles.groupGrid}>
|
||||||
@@ -705,25 +727,6 @@ export default function AgentHealth() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
|
||||||
<div className={styles.viewToolbar}>
|
|
||||||
<div className={styles.viewToggle}>
|
|
||||||
<button
|
|
||||||
className={`${styles.viewToggleBtn} ${styles.viewToggleBtnActive}`}
|
|
||||||
onClick={() => toggleViewMode('compact')}
|
|
||||||
title="Compact view"
|
|
||||||
>
|
|
||||||
<LayoutGrid size={14} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={styles.viewToggleBtn}
|
|
||||||
onClick={() => toggleViewMode('expanded')}
|
|
||||||
title="Expanded view"
|
|
||||||
>
|
|
||||||
<List size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.compactGrid}>
|
<div className={styles.compactGrid}>
|
||||||
{groups.map((group) => (
|
{groups.map((group) => (
|
||||||
<div key={group.appId} className={styles.compactGridCell}>
|
<div key={group.appId} className={styles.compactGridCell}>
|
||||||
@@ -824,7 +827,6 @@ export default function AgentHealth() {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Log + Timeline side by side */}
|
{/* Log + Timeline side by side */}
|
||||||
|
|||||||
Reference in New Issue
Block a user