Fix/consolidate popup bottom lines by Rudra2637 · Pull Request #1041 · layer5io/docs

Rudra2637 · 2026-05-15T11:57:21Z

Description

This PR fixes the excessive bottom glow effect in the Kanvas popup by refining the box-shadow styling.

Changes Made

Reduced the intensity of the popup glow effect.
Consolidated the visual appearance of the bottom border/glow to create a cleaner UI.
Preserved the existing neon aesthetic while improving visual consistency.

Fixes #1035

Notes for Reviewers

The popup styling was adjusted only for visual refinement.
No functional changes were introduced.

Signed commits

Yes, I signed my commits.

Signed-off-by: Rudra2637 <singhrudra2637@gmail.com>

welcome · 2026-05-15T11:57:24Z

Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Layer5 Community Welcome Guide and sure to join the community Slack.
Be sure to double-check that you have signed your commits. Here are instructions for making signing an implicit activity while peforming a commit.

gemini-code-assist

Code Review

This pull request introduces a resizable panels feature for the documentation site, allowing users to adjust the widths of the sidebar and table of contents. The implementation includes a new JavaScript module for handling drag interactions and persisting layout preferences in local storage, along with corresponding SCSS for styling the resize handles. Feedback focuses on optimizing performance by refining event listener management and reducing redundant DOM updates, improving accuracy by using container-relative widths for calculations, and adopting modern DOM manipulation techniques like classList. Additionally, it was noted that unused constants should be removed and CSS transitions should target the width property for better compatibility with the Bootstrap grid.

gemini-code-assist · 2026-05-15T11:59:13Z

+  const COL_CLASSES = {
+    'col-1': 8.33,
+    'col-2': 16.66,
+    'col-3': 25,
+    'col-4': 33.33,
+    'col-5': 41.66,
+    'col-6': 50,
+    'col-7': 58.33,
+    'col-8': 66.66,
+    'col-9': 75,
+    'col-10': 83.33,
+    'col-11': 91.66,
+    'col-12': 100
+  };


The constant COL_CLASSES is defined but never used within the script. Removing dead code improves maintainability.

gemini-code-assist · 2026-05-15T11:59:14Z

+    addEventListeners() {
+      document.addEventListener('mousedown', (e) => this.onMouseDown(e));
+      document.addEventListener('mousemove', (e) => this.onMouseMove(e));
+      document.addEventListener('mouseup', (e) => this.onMouseUp(e));
+    }


Attaching mousemove and mouseup listeners to the document globally is inefficient as they fire continuously even when no resizing is occurring. It is better practice to attach these listeners only during the mousedown event and remove them on mouseup.

gemini-code-assist · 2026-05-15T11:59:14Z

+    onMouseDown(e) {
+      if (!e.target.classList.contains('resizable-panel-handle')) {
+        return;
+      }


The onMouseDown handler should verify that the primary mouse button (left-click) was used before initiating a resize operation. This prevents accidental resizing when using other mouse buttons.

Suggested change

onMouseDown(e) {

if (!e.target.classList.contains('resizable-panel-handle')) {

return;

}

onMouseDown(e) {

if (e.button !== 0 || !e.target.classList.contains('resizable-panel-handle')) {

return;

}

gemini-code-assist · 2026-05-15T11:59:14Z

+    onMouseMove(e) {
+      if (!this.isResizing) return;
+
+      const delta = e.clientX - this.startX;
+      const adjustment = delta / window.innerWidth; // Convert pixels to percentage-like ratio
+
+      let newWidths = { ...this.startWidths };
+
+      if (this.currentResizeTarget === 'sidebar') {
+        // Resizing left sidebar
+        const sidebarPercent = (this.startWidths.sidebar * 100) / 12; // Convert col units to percentage
+        const mainPercent = (this.startWidths.main * 100) / 12;
+
+        const newSidebarPercent = sidebarPercent + (adjustment * 100);
+        const newMainPercent = mainPercent - (adjustment * 100);
+
+        // Constrain widths: min 1 col, max 5 cols for sidebar; min 4 cols for main
+        if (newSidebarPercent >= 8.33 && newSidebarPercent <= 41.66 && newMainPercent >= 33.33) {
+          newWidths.sidebar = Math.round((newSidebarPercent / 100) * 12);
+          newWidths.main = Math.round((newMainPercent / 100) * 12);
+        }
+      } else if (this.currentResizeTarget === 'toc') {
+        // Resizing right TOC panel
+        const tocPercent = (this.startWidths.toc * 100) / 12;
+        const mainPercent = (this.startWidths.main * 100) / 12;
+
+        const newTocPercent = tocPercent - (adjustment * 100);
+        const newMainPercent = mainPercent + (adjustment * 100);
+
+        // Constrain widths: min 1 col, max 5 cols for toc; min 4 cols for main
+        if (newTocPercent >= 8.33 && newTocPercent <= 41.66 && newMainPercent >= 33.33) {
+          newWidths.toc = Math.round((newTocPercent / 100) * 12);
+          newWidths.main = Math.round((newMainPercent / 100) * 12);
+        }
+      }
+
+      this.applyWidths(newWidths);
+    }


The onMouseMove function calls applyWidths on every mouse movement. Since applyWidths performs DOM manipulations (removing and adding classes via regex), this can lead to performance overhead. You should check if the calculated column widths have actually changed (due to the Math.round logic) before calling applyWidths.

gemini-code-assist · 2026-05-15T11:59:14Z

+      if (!this.isResizing) return;
+
+      const delta = e.clientX - this.startX;
+      const adjustment = delta / window.innerWidth; // Convert pixels to percentage-like ratio


Using window.innerWidth to calculate the resize adjustment can be inaccurate if the layout has a maximum width or side margins (common in Bootstrap containers). Using the offset width of the parent row (this.row.offsetWidth) provides a more accurate ratio relative to the grid system.

Suggested change

const adjustment = delta / window.innerWidth; // Convert pixels to percentage-like ratio

const adjustment = delta / this.row.offsetWidth; // Convert pixels to percentage-like ratio

gemini-code-assist · 2026-05-15T11:59:14Z

+    removeBootstrapColClasses(element) {
+      const classes = element.className.split(' ').filter(c => !c.match(/col-xl-\d+/));
+      element.className = classes.join(' ').trim();
+    }


Directly manipulating element.className by splitting and joining strings is brittle and can accidentally remove or malform other classes. Using element.classList is the modern and safer approach for managing CSS classes.

removeBootstrapColClasses(element) { const toRemove = Array.from(element.classList).filter(c => c.startsWith('col-xl-')); if (toRemove.length > 0) { element.classList.remove(...toRemove); } }

gemini-code-assist · 2026-05-15T11:59:14Z

+.td-sidebar,
+.td-sidebar-toc,
+main[role="main"] {
+  transition: flex-basis 0.3s ease;


Bootstrap grid columns typically use the width property to define their size, while flex-basis is often set to auto. Transitioning flex-basis may not result in the desired animation when the column class changes. Transitioning width is generally more reliable for animating Bootstrap grid changes.

Suggested change

transition: flex-basis 0.3s ease;

transition: width 0.3s ease;

github-actions · 2026-05-15T11:59:42Z

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-05-15 11:59 UTC

Rudra2637 added 4 commits May 15, 2026 01:18

feat(layouts): add resizable side panels with localStorage persistence

895bfa1

Signed-off-by: Rudra2637 <singhrudra2637@gmail.com>

fix(scss): correct transition property syntax in resizable-panels

53e9296

Signed-off-by: Rudra2637 <singhrudra2637@gmail.com>

fix(ui): add bottom padding to sidebar for better spacing

8dfa71e

Signed-off-by: Rudra2637 <singhrudra2637@gmail.com>

fix(ui): consolidate double glow effect in kanvas pop-up

eb8a686

Signed-off-by: Rudra2637 <singhrudra2637@gmail.com>

github-actions Bot added component/cloud-docs component/kanvas-docs labels May 15, 2026

Rudra2637 closed this May 15, 2026

gemini-code-assist Bot reviewed May 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix/consolidate popup bottom lines#1041

Fix/consolidate popup bottom lines#1041
Rudra2637 wants to merge 4 commits into
layer5io:masterfrom
Rudra2637:fix/consolidate-popup-bottom-lines

Rudra2637 commented May 15, 2026

Uh oh!

welcome Bot commented May 15, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot May 15, 2026

Uh oh!

gemini-code-assist Bot May 15, 2026

Uh oh!

gemini-code-assist Bot May 15, 2026

Uh oh!

gemini-code-assist Bot May 15, 2026

Uh oh!

gemini-code-assist Bot May 15, 2026

Uh oh!

gemini-code-assist Bot May 15, 2026

Uh oh!

gemini-code-assist Bot May 15, 2026

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	const adjustment = delta / window.innerWidth; // Convert pixels to percentage-like ratio
	const adjustment = delta / this.row.offsetWidth; // Convert pixels to percentage-like ratio

	transition: flex-basis 0.3s ease;
	transition: width 0.3s ease;

Conversation

Rudra2637 commented May 15, 2026

Description

Changes Made

Uh oh!

welcome Bot commented May 15, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant