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

[hungtd119]

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.

[vercel]

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]

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

• X
• Mastodon
• Reddit
• LinkedIn

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