8000 Fix tab three-dot menu: always visible and no longer clipped by scroll container by Copilot · Pull Request #42 · ThisIs-Developer/Markdown-Viewer · GitHub
[go: up one dir, main page]
Skip to content

Fix tab three-dot menu: always visible and no longer clipped by scroll container#42

Merged
ThisIs-Developer merged 5 commits intomainfrom
copilot/fix-document-tab-visibility
Mar 9, 2026
Merged

Fix tab three-dot menu: always visible and no longer clipped by scroll container#42
ThisIs-Developer merged 5 commits intomainfrom
copilot/fix-document-tab-visibility

Conversation

Copy link
Contributor
Copilot AI commented Mar 9, 2026 •
edited
Loading

The three-dot (⋯) file options button was invisible on inactive tabs, and when shown, its dropdown was clipped underneath other content regardless of z-index.

Before (the bug in the screenshot): only the active "Untitled 1" tab shows ⋯; "Welcome to Markdo..." tab shows nothing, and clicking ⋯ produced a dropdown hidden behind the tab bar.

Two separate fixes

1. Button always visible (styles.css)

opacity: 0 default made the button invisible until hover/active. Changed to opacity: 0.65 so it's always present on every tab.

2. Dropdown escapes overflow clipping (styles.css + script.js)

.tab-list { overflow-x: auto } silently promotes overflow-y to auto per spec, creating a scroll/clip container that swallows absolutely-positioned descendants at any z-index. Fix: switch to position: fixed + JS-computed viewport coordinates on open.

/* before */
.tab-menu-dropdown { position: absolute; top: calc(100% + 4px); right: 0; z-index: 9999; }

/* after */
.tab-menu-dropdown { position: fixed; z-index: 99999; }
// Position computed on click, relative to viewport — escapes all overflow containers
if (menuBtn.classList.contains('open')) {
  var rect = menuBtn.getBoundingClientRect();
  dropdown.style.top   = (rect.bottom + 4) + 'px';
  dropdown.style.right = (window.innerWidth - rect.right) + 'px';
  dropdown.style.left  = 'auto';
}

After fix

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel
Copy link
vercel bot commented Mar 9, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment Mar 9, 2026 6:36am

@ThisIs-Developer
Fix Document tab visibility by adding position and z-index to .tab-bar
874d8f7 
Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
@cloudflare-workers-and-pages
Copy link
cloudflare-workers-and-pages bot commented Mar 9, 2026 •
edited
Loading

Deploying markdown-viewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: 68c4b22
Status: ✅  Deploy successful!
Preview URL: https://e18b277f.markdown-viewer.pages.dev
Branch Preview URL: https://copilot-fix-document-tab-vis.markdown-viewer.pages.dev

View logs

@cloudflare-workers-and-pages
Copy link
cloudflare-workers-and-pages bot commented Mar 9, 2026 •
edited
Loading

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: 68c4b22
Status: ✅  Deploy successful!
Preview URL: https://d3927481.markdownviewer.pages.dev
Branch Preview URL: https://copilot-fix-document-tab-vis.markdownviewer.pages.dev

View logs

Copilot AI changed the title [WIP] Fix Document tab visibility issue in markdown editor Fix Document tab hidden by editor/preview panes (z-index stacking) Mar 9, 2026
@ThisIs-Developer
Fix Document tab hidden: replace position:sticky with position:relati…
854f326 
…ve on .app-header, add flex-shrink:0 and overflow:hidden

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Copilot AI changed the title Fix Document tab hidden by editor/preview panes (z-index stacking) Fix document tab bar hidden by sticky header in Safari/cross-browser flex layouts Mar 9, 2026
@ThisIs-Developer ThisIs-Developer marked this pull request as ready for review March 9, 2026 06:12
@ThisIs-Developer
Fix three-dot menu button hidden on inactive tabs: set opacity 0.65 b…
d6585ed 
…y default

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Copilot AI changed the title Fix document tab bar hidden by sticky header in Safari/cross-browser flex layouts Fix tab bar visibility and always-show three-dot menu button Mar 9, 2026
@ThisIs-Developer
Fix tab dropdown clipped by overflow scroll container: use position:f…
68c4b22 
…ixed + getBoundingClientRect positioning

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Copilot AI changed the title Fix tab bar visibility and always-show three-dot menu button Fix tab three-dot menu: always visible and no longer clipped by scroll container Mar 9, 2026
@ThisIs-Developer ThisIs-Developer merged commit ed0169b into main Mar 9, 2026
6 checks passed
@ThisIs-Developer ThisIs-Developer deleted the copilot/fix-document-tab-visibility branch March 9, 2026 06:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@ThisIs-Developer ThisIs-Developer

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ThisIs-Developer
0