Skip to content

fix(integrations): reduce excessive bottom space in honeycomb grid (#7511)#7514

Open
LeC-D wants to merge 1 commit intolayer5io:masterfrom
LeC-D:fix/integrations-reduce-bottom-space
Open

fix(integrations): reduce excessive bottom space in honeycomb grid (#7511)#7514
LeC-D wants to merge 1 commit intolayer5io:masterfrom
LeC-D:fix/integrations-reduce-bottom-space

Conversation

@LeC-D
Copy link
Copy Markdown

@LeC-D LeC-D commented Mar 15, 2026

Description

Fixes #7511

The integrations page (/cloud-native-management/meshery/integrations) shows a large empty space below the last row of integration hexagons.

Root Cause

In Honeycomb.style.js, the ul element's explicit height is computed as:

height: calc(${props.$height}px + 46px)

The $height value is already calculated precisely in Honeycomb.js based on the number of hexagon rows (e.g. pairsCount * 272 + 130). The extra + 46px was adding ~43px of unnecessary empty space below the last row.

Fix

Reduced the buffer from 46px to 3px — matching the margin applied to each li element — to preserve the small visual buffer needed for the bottom row while eliminating the large gap.

- height: ${(props) => props.$height === 0 ? "unset" : `calc(${props.$height}px + 46px)`};
+ height: ${(props) => props.$height === 0 ? "unset" : `calc(${props.$height}px + 3px)`};

Testing

  • Verified that hexagon height math: 150px * 1.1547 ≈ 173px, negative margin ≈ -40px, net ≈ 136px/row — consistent with 272px per pair used in Honeycomb.js, confirming the explicit height needs no additional large buffer.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 15, 2026

🚀 Preview for commit 7f2c791 at: https://69b70095afd869ed4bdb8a68--layer5.netlify.app

@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from 7f2c791 to 8b39ece Compare March 25, 2026 00:06
@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 25, 2026

Rebased on upstream master (2026-03-24) to bring the branch up to date.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 25, 2026

🚀 Preview for commit 8b39ece at: https://69c32a6e9b7e4bdc918d0f7f--layer5.netlify.app

@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from 8b39ece to 3ab7c27 Compare March 25, 2026 20:10
@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 25, 2026

Rebased on upstream master (2026-03-25) to bring the branch back up to date.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 25, 2026

🚀 Preview for commit 3ab7c27 at: https://69c4449cae17b975eda6ab42--layer5.netlify.app

@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from 3ab7c27 to c1145c1 Compare March 26, 2026 02:08
@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 26, 2026

Rebased on upstream master (2026-03-25) to bring the branch back up to date.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 26, 2026

🚀 Preview for commit c1145c1 at: https://69c498ae5c3baa6701970583--layer5.netlify.app

@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from c1145c1 to 6e53d08 Compare March 26, 2026 10:06
@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 26, 2026

Rebased on upstream master (2026-03-26) to bring the branch back up to date.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 26, 2026

🚀 Preview for commit 6e53d08 at: https://69c50878dd2aa69895b89f74--layer5.netlify.app

@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from 6e53d08 to 3d96ad5 Compare March 27, 2026 08:20
@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 27, 2026

🚀 Preview for commit 3d96ad5 at: https://69c64188dba8e3a68909d95d--layer5.netlify.app

@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from 3d96ad5 to ee721e3 Compare March 27, 2026 20:11
@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 27, 2026

Rebased on upstream master (2026-03-27) to bring the branch back up to date.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 27, 2026

🚀 Preview for commit ee721e3 at: https://69c6e7fba3795482facb8ac3--layer5.netlify.app

@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 28, 2026

Rebased on upstream master (2026-03-28) to bring the branch back up to date.

@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from ee721e3 to ac258ad Compare March 28, 2026 18:06
@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 28, 2026

Rebased on upstream master (2026-03-28) to bring the branch back up to date.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 28, 2026

🚀 Preview for commit ac258ad at: https://69c81c242af301645b00ebbe--layer5.netlify.app

…ayer5io#7511)

The HoneycombGrid ul element had an extra 46px added to its explicit
height (calc(height + 46px)). Since the height is already calculated
precisely in Honeycomb.js based on hexagon row counts, this 46px
surplus was creating empty vertical space below the last row of
integrations on the /integrations page.

Reduced from +46px to +3px (matching the margin value applied to each
li element) to eliminate the visual gap while preserving the small
buffer needed for the bottom row's top margin.

Signed-off-by: Léo (LeC-D) <leo.openc@gmail.com>
@LeC-D LeC-D force-pushed the fix/integrations-reduce-bottom-space branch from ac258ad to 672bbc5 Compare March 30, 2026 20:07
@LeC-D
Copy link
Copy Markdown
Author

LeC-D commented Mar 30, 2026

Rebased on upstream master (2026-03-30) to bring the branch back up to date.

@l5io
Copy link
Copy Markdown
Member

l5io commented Mar 30, 2026

🚀 Preview for commit 672bbc5 at: https://69cadb8696a4ad2ddf25cfc9--layer5.netlify.app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Reduce empty space after all integration section

2 participants