This is an automated email from the ASF dual-hosted git repository.

zqr10159 pushed a commit to branch 2.0.0
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git

commit 1d6164c2d5d431e3587dce4fd88060990913be22
Author: Logic <[email protected]>
AuthorDate: Sun May 31 08:23:09 2026 +0800

    fix(web-next): tighten topology toolbar alignment
---
 web-next/app/topology/page.test.tsx               | 5 +++++
 web-next/app/ui-lab/page.test.tsx                 | 3 +++
 web-next/packages/hertzbeat-ui/src/index.test.tsx | 6 +++++-
 web-next/packages/hertzbeat-ui/src/index.tsx      | 7 +++++--
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/web-next/app/topology/page.test.tsx 
b/web-next/app/topology/page.test.tsx
index 07fde71da5..7ba725afc8 100644
--- a/web-next/app/topology/page.test.tsx
+++ b/web-next/app/topology/page.test.tsx
@@ -636,8 +636,13 @@ describe('topology page', () => {
     
expect(html).toContain('data-hz-topology-toolbar-alignment="flush-control-grid"');
     expect(html).toContain('data-hz-topology-toolbar-inset="0px"');
     expect(html).toContain('data-hz-topology-toolbar-control-height="28px"');
+    
expect(html).toContain('data-hz-topology-toolbar-select-padding="compact-flush"');
+    expect(html).toContain('data-hz-topology-toolbar-row-separator="none"');
+    expect(html).toContain('data-hz-topology-toolbar-control-gap="6px"');
     expect(html).not.toContain('overflow-x-auto px-4 py-1');
     expect(html).toContain('overflow-x-auto px-0 py-1');
+    expect(html).toContain('h-7 !gap-1.5 !pl-1 !pr-1.5');
+    expect(html).not.toContain('h-7 !pl-2 !pr-1.5');
     
expect(html).toContain('data-hz-topology-toolbar-visual-weight="low-interruption"');
     
expect(html).toContain('data-hz-topology-toolbar-visual-weight-owner="hertzbeat-ui-toolbar-visual-weight"');
     
expect(html).toContain('data-hz-topology-toolbar-secondary-visibility="assistive"');
diff --git a/web-next/app/ui-lab/page.test.tsx 
b/web-next/app/ui-lab/page.test.tsx
index 73be41f88f..09959b54d8 100644
--- a/web-next/app/ui-lab/page.test.tsx
+++ b/web-next/app/ui-lab/page.test.tsx
@@ -2164,6 +2164,9 @@ describe('HertzBeat UI lab page', () => {
     
expect(html).toContain('data-hz-topology-toolbar-first-viewport-priority="canvas"');
     
expect(html).toContain('data-hz-topology-toolbar-row-contract="single-row-overflow"');
     
expect(html).toContain('data-hz-topology-toolbar-row-contract-owner="hertzbeat-ui-toolbar-row-contract"');
+    
expect(html).toContain('data-hz-topology-toolbar-select-padding="compact-flush"');
+    expect(html).toContain('data-hz-topology-toolbar-row-separator="none"');
+    expect(html).toContain('data-hz-topology-toolbar-control-gap="6px"');
     
expect(html).toContain('data-hz-topology-toolbar-visual-weight="low-interruption"');
     
expect(html).toContain('data-hz-topology-toolbar-control-strip-layout="inline-overflow"');
     
expect(html).toContain('data-hz-topology-toolbar-control-strip-layout-owner="hertzbeat-ui-toolbar-control-strip-layout"');
diff --git a/web-next/packages/hertzbeat-ui/src/index.test.tsx 
b/web-next/packages/hertzbeat-ui/src/index.test.tsx
index 3768abb6b1..8747e1a6ad 100644
--- a/web-next/packages/hertzbeat-ui/src/index.test.tsx
+++ b/web-next/packages/hertzbeat-ui/src/index.test.tsx
@@ -6074,10 +6074,14 @@ describe('@hertzbeat/ui', () => {
     
expect(html).toContain('data-hz-topology-toolbar-alignment="flush-control-grid"');
     expect(html).toContain('data-hz-topology-toolbar-inset="0px"');
     expect(html).toContain('data-hz-topology-toolbar-control-height="28px"');
+    
expect(html).toContain('data-hz-topology-toolbar-select-padding="compact-flush"');
+    expect(html).toContain('data-hz-topology-toolbar-row-separator="none"');
+    expect(html).toContain('data-hz-topology-toolbar-control-gap="6px"');
     
expect(html).toContain('[grid-template-columns:132px_minmax(220px,1fr)_132px_auto]');
     expect(html).not.toContain('overflow-x-auto px-4 py-1');
     expect(html).toContain('overflow-x-auto px-0 py-1');
-    expect(html).toContain('h-7 !pl-2 !pr-1.5');
+    expect(html).toContain('h-7 !gap-1.5 !pl-1 !pr-1.5');
+    expect(html).not.toContain('h-7 !pl-2 !pr-1.5');
     
expect(html).toContain('data-hz-topology-toolbar-action-policy="scope-controls-only"');
     
expect(html).toContain('data-hz-topology-toolbar-canvas-action-policy="in-canvas-g6-toolbar"');
     expect(html).toContain('data-hz-topology-toolbar-chrome="frameless"');
diff --git a/web-next/packages/hertzbeat-ui/src/index.tsx 
b/web-next/packages/hertzbeat-ui/src/index.tsx
index c6455ec437..93e6dde149 100644
--- a/web-next/packages/hertzbeat-ui/src/index.tsx
+++ b/web-next/packages/hertzbeat-ui/src/index.tsx
@@ -12963,7 +12963,7 @@ export function HzTopologyToolbar({
   const secondaryVisibility = graphFirst ? 'assistive' : 'visible';
   const controlStripLayout = graphFirst ? 'inline-overflow' : 'stacked-grid';
   const chrome = graphFirst && boundary === 'none' ? 'frameless' : 'surface';
-  const selectTriggerClassName = graphFirst ? 'h-7 !pl-2 !pr-1.5' : 'h-8';
+  const selectTriggerClassName = graphFirst ? 'h-7 !gap-1.5 !pl-1 !pr-1.5' : 
'h-8';
 
   return (
     <section
@@ -12988,6 +12988,9 @@ export function HzTopologyToolbar({
       data-hz-topology-toolbar-alignment={graphFirst ? 'flush-control-grid' : 
'stacked-grid'}
       data-hz-topology-toolbar-inset={graphFirst ? '0px' : '16px'}
       data-hz-topology-toolbar-control-height={graphFirst ? '28px' : '32px'}
+      data-hz-topology-toolbar-select-padding={graphFirst ? 'compact-flush' : 
'default'}
+      data-hz-topology-toolbar-row-separator={graphFirst ? 'none' : 'soft'}
+      data-hz-topology-toolbar-control-gap={graphFirst ? '6px' : '8px'}
       data-hz-topology-toolbar-visual-weight={graphFirst ? 'low-interruption' 
: 'balanced'}
       
data-hz-topology-toolbar-visual-weight-owner="hertzbeat-ui-toolbar-visual-weight"
       data-hz-topology-toolbar-secondary-visibility={secondaryVisibility}
@@ -13164,7 +13167,7 @@ export function HzTopologyToolbar({
           className={cn(
             'flex min-w-0 flex-wrap items-center gap-2 border-t 
border-[var(--hz-ui-line-faint)] pt-2 text-[11px]',
             graphFirst ? '' : 'lg:col-span-4',
-            graphFirst ? 'sr-only' : ''
+            graphFirst ? 'sr-only border-0 pt-0' : ''
           )}
           data-hz-topology-toolbar-state={stateItems.map(item => 
item.id).join('-')}
           data-hz-topology-toolbar-state-visibility={secondaryVisibility}


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to