Skip to content

fix(ai-companion-fab): equilateral hex + no NC button chrome#198

Merged
rubenvdlinde merged 1 commit into
betafrom
fix/ai-companion-equilateral-hex
May 11, 2026
Merged

fix(ai-companion-fab): equilateral hex + no NC button chrome#198
rubenvdlinde merged 1 commit into
betafrom
fix/ai-companion-equilateral-hex

Conversation

@rubenvdlinde
Copy link
Copy Markdown
Contributor

Summary

Follow-up to #197. Fixes two visual issues with the AI Chat Companion FAB:

  1. Light blue rounded box around the hexCnAiFloatingButton was inheriting Nextcloud's default <button> chrome (background: rgb(217, 227, 232), border-radius: 8px, padding: 8px 12px).
  2. Hex wasn't equilateral — at 60×60 (square), the six vertices of the polygon land on unequal-length sides (top/bottom slopes ~28px, sides 30px).

Fix

  • Sets the button to 52×60 — an exact √3:2 ratio that makes the six pointy-top polygon sides equal length.
  • Strips every inherited NC button style with !important (same trick we used for .cn-ai-companion, same reason: webpack bundles both CJS + ESM CSS into one consumer bundle and the cascade is unpredictable).
  • Forces the hex inner span to 100%×100% with explicit border-radius: 0.

Verified

Runtime CSS-override test in decidesk shows the clean equilateral hex with no surrounding box. Conduction Cobalt #4376fc solid, white sparkles icon, pointy-top point-up per brand rule.

Test plan

  • FAB renders as an equilateral pointy-top hex
  • No background box around the hex
  • White AI sparkles icon centered
  • Hard-refresh in browser to evict cached old bundle

CnAiFloatingButton was inheriting Nextcloud's default <button> styles
(light blue background, 8px border-radius, 8px 12px padding), and
its square 60x60 box made the pointy-top hex polygon render with
unequal sides (taller faces vs shorter top/bottom slopes).

This patch:

- Sets the button to 52x60 (an exact √3:2 ratio) so the six vertices
  of the polygon land on equal-length sides — a true equilateral
  pointy-top hexagon per Conduction brand rules.
- Strips every inherited NC button style: padding, margin, border,
  border-radius, background, box-shadow — !important blocks because
  the same problem we hit with .cn-ai-companion: webpack bundles both
  the package's CJS and ESM CSS into one consumer bundle and the
  cascade is unpredictable.
- Forces the hex inner span to fully cover the button (100% x 100%)
  and explicitly removes any inherited border-radius.

Visually: no more light blue rectangle around the hex; the icon sits
inside a clean, equilateral Conduction-Cobalt hex.
@rubenvdlinde rubenvdlinde merged commit 642e2f0 into beta May 11, 2026
1 of 3 checks passed
@rubenvdlinde rubenvdlinde deleted the fix/ai-companion-equilateral-hex branch May 11, 2026 11:42
@github-actions
Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 1.0.0-beta.31 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant