fix: make integrations logos responsive on mobile

[tanav29]

Description

This PR fixes #8083

Notes for Reviewers

• updated the Honeycomb component

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Updated the Honeycomb integration layout to use the full available width.
  • Added responsive hexagon sizing across viewport widths for consistent display.
  • Adjusted grid spacing and height calculations to match the selected hexagon size.
  • Scaled integration icons proportionally with their hexagons.
  • Reduced horizontal padding on smaller screens to provide more usable space.
  • Improved row and height calculations to accommodate varying screen sizes.

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 3e7b61c0-151f-480d-a49e-04340d982512

📥 Commits

Reviewing files that changed from the base of the PR and between 9b9378b and 2a2f0e1.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 389977a3-f2bc-4534-8f9f-d15cfffda7e3

📥 Commits

Reviewing files that changed from the base of the PR and between ecc8814 and 9b9378b.

📒 Files selected for processing (1)

• src/sections/Meshery/Meshery-integrations/Honeycomb/Honeycomb.js

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The Honeycomb integration now selects hexagon sizes by viewport width. It calculates row capacity and grid height from the selected size. CSS dimensions, icon sizes, and small-screen padding use the responsive values.

Changes

Honeycomb responsive layout

Layer / File(s)	Summary
Calculate responsive honeycomb sizing src/sections/Meshery/Meshery-integrations/Honeycomb/Honeycomb.js	The component selects viewport-based hexagon sizes, calculates row capacity and grid height, clamps row counts to one, and passes --hex-size with $height to HoneycombGrid.
Apply responsive grid dimensions src/sections/Meshery/Meshery-integrations/Honeycomb/Honeycomb.style.js, src/sections/Meshery/Meshery-integrations/Integration.style.js	The grid derives hexagon, spacing, and icon dimensions from --hex-size. Small screens use reduced horizontal padding.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: parth-tussle

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: making integration logos responsive on mobile. This matches the Honeycomb sizing and layout updates.
Linked Issues check	✅ Passed	The changes satisfy issue #8083. Honeycomb.js selects responsive hexagon sizes, subtracts computed horizontal padding before row-capacity calculations, and derives grid height from the calculated ro…
Out of Scope Changes check	✅ Passed	The reviewed changes remain within issue #8083. Responsive hexagon sizing, logo scaling, padding, row-capacity calculation, and grid-height calculation directly support the mobile integration-logo lay…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Preview deployment for PR #8089 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[PARTH-TUSSLE]

Hey @tanav29 , as the preview of your PR is pruned, could you pls add a preview (a screenshot or screen recording) so we could verify the changes visually ?

[tanav29]

The changes in the ui is

before	after

[PARTH-TUSSLE]

The changes in the ui is

before after

Hey so thanks for adding the screenshots, so the fix actually works, the logos are now responsive, but I think we should follow the existing mesh kinda structure for them look here ->

And pls lmk if you find the structure already in your PR (the one that doesnt look like a mesh) being used anywhere else, if you find it then ig we can keep the current fix also or else I'd prefer that mesh structure. What do you say?

[tanav29]

Yup i will get that mesh structure in mobile too

[tanav29]

Mesh ui is now on mobile ui

[PARTH-TUSSLE]

The row-capacity calculation currently uses grid.offsetWidth, while the latest Integration.style.js adds 12px left/right padding to the ul on screens ≤540px. Since offsetWidth includes that padding, firstRow/secondRow can overestimate the number of hexagons that actually fit in the content area.
At widths around 390px, this can result in the JS calculating 4 items for the first row while only 3 fit visually, which can make the calculated height too small and potentially reintroduce the overlap issue.
Could you account for the horizontal padding when calculating the usable width?

[tanav29]

setHoneycombHeight now subtracts the ul's computed horizontal padding (getComputedStyle(grid).paddingLeft/Right) from offsetWidth to get usableWidth, and uses that for firstRow/secondRow. This handles both the 12px mobile padding (≤540px) and the 50px desktop padding dynamically instead of hardcoding.

Now working fine on 360px width

[PARTH-TUSSLE]

setHoneycombHeight now subtracts the ul's computed horizontal padding (getComputedStyle(grid).paddingLeft/Right) from offsetWidth to get usableWidth, and uses that for firstRow/secondRow. This handles both the 12px mobile padding (≤540px) and the 50px desktop padding dynamically instead of hardcoding.

Now working fine on 360px width

I tested the preview in every viewport, it LGTM.
Last thing remaining is could you signoff all your commits so that DCO check passes ?

[tanav29]

@PARTH-TUSSLE now i have signoff all the commits

[PARTH-TUSSLE]

@PARTH-TUSSLE now i have signoff all the commits

Thanks @tanav29 , LGTM 💯

[AnkitRewar11]

@PARTH-TUSSLE @tanav29 Well, now that this has been merged, one thing seems to have been missed. On both mobile and desktop, there’s now a large gap between the bottom logos and the missing integration card. This increases the black empty space at the bottom, which doesn’t look right and should be fixed.

[tanav29]

@PARTH-TUSSLE @tanav29 Well, now that this has been merged, one thing seems to have been missed. On both mobile and desktop, there’s now a large gap between the bottom logos and the missing integration card. This increases the black empty space at the bottom, which doesn’t look right and should be fixed.

Will check tomorrow if the issue persist will create a issue and a pr