Fix mobile layout key, language picker close handler, and presentation download
Build and Deploy Verso / deploy (push) Has been cancelled

- Mobile vertical layout: add key= based on direction so react-resizable-panels
  remounts cleanly when switching between horizontal and vertical; also use
  isVertical (not just pdfLayout) for the autoSaveId to avoid restoring a
  mismatched layout from localStorage
- Language picker: replace stopPropagation pattern with a containment check on
  the document click handler — more robust on React pages where Bootstrap JS or
  React's event delegation can interfere with stopPropagation
- Presentation download dropdown: use popperConfig strategy:'fixed' so the menu
  escapes overflow:hidden table cells; remove forced drop='up' and let Popper
  choose; defer URL.revokeObjectURL by 10 s to give the browser time to start
  the download before the blob URL is released

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-16 11:01:15 +00:00
parent 11227d59e3
commit 0a5bd4e47d
3 changed files with 14 additions and 7 deletions
@@ -37,17 +37,19 @@ li.language-picker
'&return_to=' + '&return_to=' +
encodeURIComponent(window.location.pathname) encodeURIComponent(window.location.pathname)
}) })
var picker = toggle.closest('.language-picker')
function close() { function close() {
menu.classList.remove('show') menu.classList.remove('show')
toggle.setAttribute('aria-expanded', 'false') toggle.setAttribute('aria-expanded', 'false')
} }
toggle.addEventListener('click', function (e) { toggle.addEventListener('click', function () {
e.stopPropagation()
var opening = !menu.classList.contains('show') var opening = !menu.classList.contains('show')
menu.classList.toggle('show', opening) menu.classList.toggle('show', opening)
toggle.setAttribute('aria-expanded', String(opening)) toggle.setAttribute('aria-expanded', String(opening))
}) })
document.addEventListener('click', close) document.addEventListener('click', function (e) {
if (!picker || !picker.contains(e.target)) close()
})
document.addEventListener('keydown', function (e) { document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { close(); toggle.focus() } if (e.key === 'Escape') { close(); toggle.focus() }
}) })
@@ -80,8 +80,9 @@ export default function MainLayout() {
<Panel id="ide-redesign-editor-and-pdf-panel" order={2}> <Panel id="ide-redesign-editor-and-pdf-panel" order={2}>
<HistoryContainer /> <HistoryContainer />
<PanelGroup <PanelGroup
key={isVertical ? 'vertical' : 'horizontal'}
autoSaveId={ autoSaveId={
pdfLayout === 'verticalSplit' isVertical
? 'ide-redesign-editor-and-pdf-panel-group-vertical' ? 'ide-redesign-editor-and-pdf-panel-group-vertical'
: 'ide-redesign-editor-and-pdf-panel-group' : 'ide-redesign-editor-and-pdf-panel-group'
} }
@@ -75,8 +75,9 @@ function DownloadPresentationButton({
document.body.appendChild(link) document.body.appendChild(link)
link.click() link.click()
link.remove() link.remove()
URL.revokeObjectURL(url)
setExporting(null) setExporting(null)
// Revoke after a delay so the browser has time to initiate the download
setTimeout(() => URL.revokeObjectURL(url), 10000)
} catch (err) { } catch (err) {
if (requestId !== requestIdRef.current) return if (requestId !== requestIdRef.current) return
setExporting(null) setExporting(null)
@@ -144,7 +145,7 @@ const DownloadPresentationButtonTooltip = memo(
return ( return (
<DownloadPresentationButton project={project}> <DownloadPresentationButton project={project}>
{(startExport, exporting) => ( {(startExport, exporting) => (
<Dropdown drop="up"> <Dropdown>
<DropdownToggle <DropdownToggle
id={`download-presentation-toggle-${project.id}`} id={`download-presentation-toggle-${project.id}`}
variant="link" variant="link"
@@ -157,7 +158,10 @@ const DownloadPresentationButtonTooltip = memo(
<MaterialIcon type="picture_as_pdf" /> <MaterialIcon type="picture_as_pdf" />
)} )}
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu
popperConfig={{ strategy: 'fixed' }}
flip
>
<li role="none"> <li role="none">
<DropdownItem <DropdownItem
as="button" as="button"