E535 Implement document tabs in mobile menu with full desktop feature parity by Copilot · Pull Request #43 · ThisIs-Developer/Markdown-Viewer · GitHub
[go: up one dir, main page]

Skip to content

Implement document tabs in mobile menu with full desktop feature parity#43

Merged
ThisIs-Developer merged 3 commits intomainfrom
copilot/implement-document-tab-mobile-view
Mar 9, 2026
Merged

Implement document tabs in mobile menu with full desktop feature parity#43
ThisIs-Developer merged 3 commits intomainfrom
copilot/implement-document-tab-mobile-view

Conversation

Copy link
Contributor
Copilot AI commented Mar 9, 2026

On screens ≤480px the desktop tab bar is hidden via CSS, leaving mobile users unable to switch, create, rename, duplicate, or reset documents. Two commits address this:

First commit — Mobile tab list (basic)

Added a Documents section to the mobile slide-out menu panel:

  • Dynamically populated tab list (#mobile-tab-list) kept in sync via renderMobileTabList() called at the end of renderTabBar()
  • + new-tab button in the section header
  • Tab row click → switchTab() + close menu

Second commit — Feature parity with desktop

Replaced the stripped-down × delete button with the same three-dot (⋯) dropdown used on the desktop:

// Desktop and mobile now share identical menu construction:
const menuBtn = document.createElement('button');
menuBtn.className = 'tab-menu-btn';
menuBtn.innerHTML = '⋯';
const dropdown = document.createElement('div');
dropdown.className = 'tab-menu-dropdown';
dropdown.innerHTML =
  '<button class="tab-menu-item" data-action="rename">...</button>' +
  '<button class="tab-menu-item" data-action="duplicate">...</button>' +
  '<button class="tab-menu-item tab-menu-item-danger" data-action="delete">...</button>';

Dropdown positioning reuses the same getBoundingClientRect() + position: fixed approach so it escapes the panel's scroll container correctly.

Also added a full-width Reset all files button (#mobile-tab-reset-btn) below the tab list, wired to resetAllTabs(). Menu closes before the confirmation modal opens to avoid z-index overlap.

Removed now-unused .mobile-tab-delete-btn CSS; added .mobile-tab-item .tab-menu-btn visibility rules.


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@vercel
Copy link
vercel bot commented Mar 9, 2026

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 10:01am

Add a Documents section to the mobile menu panel that shows all
open tabs with the active one highlighted. Users can switch tabs
by tapping, delete tabs via the × button, and create new tabs
via the + button. The mobile tab list is kept in sync with the
desktop tab bar via renderMobileTabList called from renderTabBar.

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

Deploying markdown-viewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: 448fc5c
Status: ✅  Deploy successful!
Preview URL: https://4f330933.markdown-viewer.pages.dev
Branch Preview URL: https://copilot-implement-document-t.markdown-viewer.pages.dev

View logs

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

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: 448fc5c
Status: ✅  Deploy successful!
Preview URL: https://08907eaa.markdownviewer.pages.dev
Branch Preview URL: https://copilot-implement-document-t.markdownviewer.pages.dev

View logs

Copilot AI changed the title [WIP] Implement document tab in mobile tab view Implement document tabs in the mobile menu Mar 9, 2026
Replace the mobile tab's simple × delete button with the same
three-dot (⋯) dropdown menu used on the desktop (Rename,
Duplicate, Delete). Add a "Reset all files" button below the
mobile tab list matching the desktop Reset button. Clean up
the now-unused mobile-tab-delete-btn CSS.

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Copilot AI changed the title Implement document tabs in the mobile menu Implement document tabs in mobile menu with full desktop feature parity Mar 9, 2026
@ThisIs-Developer ThisIs-Developer marked this pull request as ready for review March 9, 2026 10:03
@ThisIs-Developer ThisIs-Developer merged commit 6c16a5f into main Mar 9, 2026
6 checks passed
@ThisIs-Developer ThisIs-Developer deleted the copilot/implement-document-tab-mobile-view branch March 9, 2026 10:04
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.

2 participants

0