fix(TabsBar): toggle button now properly expands/collapses tabs bar height

[Git-HimanshuRathi]

Fixes #269

Description

Fixed the TabsBar toggle button that was not responding as expected. The button was changing the chevron icon but failing to expand/collapse the tabs bar height.

Root Cause

The .maxHeightStyle class constrained the tabs bar to 30px height, but when toggled off, there was no alternative style defined for the expanded state. The container just remained at its natural height without any visible change.

Changes Made

• Added new .minHeightStyle class for expanded state with height: auto
• Moved overflow: hidden to .maxHeightStyle (collapsed state only)
• Updated class binding to explicitly toggle between both styles

Before

• Toggle button changed icon ✅
• Tabs bar height remained fixed at ~30px ❌

After

• Toggle button changes icon ✅
• Tabs bar collapses to 30px (hides overflow) ✅
• Tabs bar expands to show multiple rows of tabs ✅

Collapsed State	Expanded State (with many tabs)
Height: 30px, overflow hidden	Height: auto, shows all rows

Testing

• Verified toggle button changes icon
• Verified tabs bar collapses to 30px
• Verified tabs bar expands to show multiple rows
• No ESLint errors
• No TypeScript errors

Summary by CodeRabbit

• Refactor
  • Updated the tabs bar styling mechanism to use a class-based approach for conditional height and overflow handling, improving code maintainability while preserving existing functionality.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	b4660a9
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/698dd7278c8a540008919702
😎 Deploy Preview	https://deploy-preview-703--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 48 (no change from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

The TabsBar component was refactored to change how conditional CSS classes are applied for height management. The class binding was converted from Vue object syntax to a ternary string approach, and height styling logic was moved from base styles into two new dedicated public-style classes.

Changes

Cohort / File(s)

Summary

TabsBar Component Refactoring src/components/TabsBar/TabsBar.vue

Changed conditional class binding from object syntax ({ maxHeightStyle: showMaxHeight }) to ternary string approach (showMaxHeight ? 'maxHeightStyle' : 'minHeightStyle'). Removed overflow: hidden from base #tabsBar styles and introduced two new public-style classes: .maxHeightStyle (height: 30px; max-height: 30px; overflow: hidden) and .minHeightStyle (height: auto; min-height: 30px; overflow: visible).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ 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 accurately describes the main change—fixing the toggle functionality to properly expand/collapse the tabs bar height—which aligns with the core issue being addressed.
Linked Issues check	✅ Passed	The pull request successfully addresses issue #269 by implementing the expected behavior: toggling between maxHeightStyle (collapsed) and minHeightStyle (expanded) to make the tabs bar height visibly expand/collapse.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the tabs bar toggle functionality; no unrelated modifications were introduced beyond the scope of issue #269.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/TabsBar/TabsBar.vue (1)

88-92: Consider renaming showMaxHeight for improved clarity.

The variable name showMaxHeight is slightly counterintuitive: when true, the tabs bar is collapsed (applying the height constraint), and when false, it's expanded. A name like isCollapsed or isMinimized would more clearly convey the component's state.

This is a minor readability improvement and doesn't affect functionality. The current implementation is correct and consistent throughout the component (lines 5, 50, 88, 91).

🔎 Optional refactor for clearer naming

-const showMaxHeight = ref(true)
+const isCollapsed = ref(true)

 function toggleHeight() {
-    showMaxHeight.value = !showMaxHeight.value
+    isCollapsed.value = !isCollapsed.value
 }

Then update line 5:

-        :class="[embedClass(), showMaxHeight ? 'maxHeightStyle' : 'minHeightStyle']"
+        :class="[embedClass(), isCollapsed ? 'maxHeightStyle' : 'minHeightStyle']"

And line 50:

-            <i :class="showMaxHeight ? 'fa fa-chevron-down' : 'fa fa-chevron-up'"></i>
+            <i :class="isCollapsed ? 'fa fa-chevron-down' : 'fa fa-chevron-up'"></i>

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11b4883 and 4c02334.

📒 Files selected for processing (1)

• src/components/TabsBar/TabsBar.vue

🔇 Additional comments (2)

src/components/TabsBar/TabsBar.vue (2)

5-5: Excellent fix for the toggle functionality!

The change from conditional object syntax to an explicit ternary ensures that one of the two height classes is always applied. Previously, when showMaxHeight was false, no height-related class was bound, leaving the tabs bar at its default state. Now it correctly toggles between maxHeightStyle (collapsed) and minHeightStyle (expanded), which is the root cause fix for issue #269.

---

330-340: CSS classes correctly implement the expand/collapse behavior.

The styling changes properly support the toggle functionality:

• .maxHeightStyle (collapsed): Fixed at 30px with overflow: hidden to prevent tabs from wrapping
• .minHeightStyle (expanded): height: auto with overflow: visible allows multiple rows of tabs to display

The separation of overflow behavior between the two states is well-designed and aligns perfectly with the intended UX described in the PR objectives.

[Nihal4777]

Hi @Git-HimanshuRathi, Thanks for raising the PR. It would be great if you could upload screencast with expected behavior of tabs bar after the fix.

[Git-HimanshuRathi]

Background Investigation

I initially opened this PR to address Issue #269 (Toggle Button Not Responding). After thorough investigation, I discovered that:

1. The toggle is currently working on main - it successfully expands/collapses the tabs bar
2. Issue Button Toggle Not Responding #269 may have been inadvertently fixed or was specific to certain conditions
3. However, the current implementation has code quality issues that this PR addresses

Benefits of This Refactor

1. Explicit state management - Both collapsed and expanded states have dedicated classes
2. Correct overflow handling - overflow property is state-specific, not always-on
3. Better maintainability - Future developers can clearly see both states
4. Defensive coding - Prevents potential edge cases where overflow: hidden might cause issues
5. Consistency with Design Patterns
6. Easier Testing

Screen.Recording.2026-01-01.at.9.01.14.AM.mov

[Git-HimanshuRathi]

@Nihal4777