Skip to content

fix(viewer): stabilize tab-bar height when switching tabs#325

Merged
rohitg00 merged 1 commit into
rohitg00:mainfrom
hungtd119:fix/324-tab-bar-height-unstable
May 20, 2026
Merged

fix(viewer): stabilize tab-bar height when switching tabs#325
rohitg00 merged 1 commit into
rohitg00:mainfrom
hungtd119:fix/324-tab-bar-height-unstable

Conversation

@hungtd119
Copy link
Copy Markdown
Contributor

@hungtd119 hungtd119 commented May 13, 2026

Add explicit height: 48px and flex-shrink: 0 to .tab-bar to prevent dimension shifts caused by overflow-x scroll state changes on tab switch.

Closes #324

Summary by CodeRabbit

  • Style
    • Refined viewer tab bar presentation with fixed sizing to ensure consistent layout and prevent unintended visual changes.

Review Change Stack

Add explicit height: 48px and flex-shrink: 0 to .tab-bar to prevent
dimension shifts caused by overflow-x scroll state changes on tab switch.

Closes rohitg00#324

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 13, 2026

Someone is attempting to deploy a commit to the rohitg00's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 13, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1b3b473b-2286-4989-b416-26c6335dd0ab

📥 Commits

Reviewing files that changed from the base of the PR and between 25dddc4 and 20140a4.

📒 Files selected for processing (1)
  • src/viewer/index.html

📝 Walkthrough

Walkthrough

The PR adjusts the tab bar styling in the viewer by adding a fixed height of 48 pixels and a flex-shrink constraint. This eliminates height instability that occurred when switching between tabs due to scrollbar behavior changes.

Changes

Tab bar CSS stabilization

Layer / File(s) Summary
Tab bar height and flex constraints
src/viewer/index.html
The .tab-bar CSS receives height: 48px and flex-shrink: 0 to provide a stable, fixed layout dimension that prevents height collapse during tab transitions.

🎯 1 (Trivial) | ⏱️ ~2 minutes

A fleeting flicker caused dismay,
Tab bar dancing every day,
Now fixed at forty-eight,
No more shifting—feeling great! 🐰✨

🚥 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 accurately describes the main change: adding CSS to stabilize tab-bar height during tab switching, which matches the file modifications.
Linked Issues check ✅ Passed The PR implements the exact fix specified in issue #324: adding height: 48px and flex-shrink: 0 to .tab-bar in src/viewer/index.html.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing the tab-bar height instability issue. No unrelated modifications were introduced.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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

Comment @coderabbitai help to get the list of available commands and usage tips.

@rohitg00 rohitg00 merged commit c14bdc5 into rohitg00:main May 20, 2026
1 of 2 checks passed
@rohitg00
Copy link
Copy Markdown
Owner

Thanks @hungtd119 — explicit height: 48px is the actual fix for scrollbar-induced height shifts on tab switch. The flex-shrink: 0 is now redundant with the flex: 0 0 auto shorthand on main (added by #313) but harmless. Merged. Closes #324.

rohitg00 added a commit that referenced this pull request May 21, 2026
…uard (#588)

Three concerns surfaced when auditing PRs merged since v0.9.21:

1) Graph parser regex from #494 was correct for self-closing tags ONLY
   when they're the only entity in the document. With a self-closing
   entity followed by an explicit-close entity, the greedy `[^>]*` ate
   the trailing `/` of the self-close, the alternation fell through to
   the explicit-close branch, and `[\s\S]*?` ran ahead to the *next*
   `</entity>` — merging two entity declarations into one match and
   silently dropping a node. Switch to lazy `[^>]*?` so the
   self-closing alternation gets first chance. Test from #494 (which
   was failing on main but I didn't notice) now passes.

2) #386 shipped `${AGENTMEMORY_URL}` / `${AGENTMEMORY_SECRET}`
   placeholders in plugin/.mcp.json. Claude Code and Cursor expand
   those at MCP launch time; some hosts pass the literal string
   through. A truthy literal `"${AGENTMEMORY_URL}"` defeats the
   existing `|| DEFAULT_URL` fallback and would have the shim POST to
   `${AGENTMEMORY_URL}/agentmemory/...` (DNS failure). Add a
   defensive guard in src/mcp/rest-proxy.ts that strips any value of
   the form `${...}` so the fallback engages. Mirror in
   src/mcp/standalone.ts's mode-announce log line.

3) CHANGELOG entries for all PRs landed since v0.9.21 (#321, #325,
   #386, #454, #494, #526, #542, #560, #561, #562, #564, #567) plus
   the regex + env-guard hardening here.

Validation:
- npm test → 98 files, 1091 tests pass
- npm pack → 142 files, fresh install clean, iii-sdk@0.11.2 pinned,
  plugin/ shipped with hooks/scripts/skills/opencode/
- New test file covers 8 placeholder cases (unset, empty,
  `${VAR}` literal, mismatched braces, real values with $,
  unclosed `${`, no-braces `$VAR`).
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.

fix: tab-bar height unstable when switching tabs

2 participants