Fix collapse functionality bugs: CSS selectors, height parsing, and toggle bar creation

[Copilot]

• Fix collapse functionality bugs: CSS selectors, height parsing, and toggle bar creation
• Relax Python version requirement from 3.13 to >=3.12 and update test matrix
• Implement single bottom bar collapse toggle for better UX
• Add missing webpack dependency (mini-css-extract-plugin)
• Rebuild assets to include JavaScript fixes
• Resolve merge conflicts with main branch
  • Updated GitHub Actions versions (setup-python@v6, [email protected], [email protected])
  • Maintained collapse functionality improvements
  • Kept proper Python version quoting in workflow
• Test asset compilation - webpack builds successfully with updated JavaScript
• Improve collapse button UX
  • Changed button text from "Click to expand code"/"Click to collapse code" to simple "Expand"/"Collapse"
  • Added smooth scroll to bottom of code block when collapsing to help readers continue reading
  • Enhanced scroll timing: Added small delay to ensure height changes take effect before scrolling
  • Improved comments: Clarified the scroll behavior intention for better maintainability
  • Bold button text: Made "Expand"/"Collapse" text bold for better visibility and emphasis

Result:
The collapse functionality now works correctly:

• Code cells initially display at restricted height (collapse-5 = 5.5em, collapse-20 = 20.5em, etc.)
• Simple bold "Expand"/"Collapse" button appears at bottom of code cells
• When expanding: code shows full content with bold "Collapse" button
• When collapsing: smoothly scrolls to bottom of collapsed code block with proper timing, maintaining reading flow continuity
• Clean expand/collapse between restricted height and full content without scrollbars
• All existing height control capabilities are preserved
• Merge conflicts resolved and branch up to date with main

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[mmcky]

@copilot will this restrict the height of the code-cell block showing in html and have a scrollbar. What we want to add is a bar at the bottom of the code-cell in html that you can click to expand and it would show all the code, then you can click on that bottom bar to collapse it again to 20 lines (for collapse-20 for example).

[Copilot]

@copilot will this restrict the height of the code-cell block showing in html and have a scrollbar. What we want to add is a bar at the bottom of the code-cell in html that you can click to expa...

I understand you want a different UX approach. Currently my change removes the hardcoded height and uses the existing "Show more/Show less" toggle links.

Are you asking for:

1. Keep the dynamic height restriction (collapse-5 = 5.5em, collapse-20 = 20.5em, etc.)
2. Change overflow from 'hidden' to 'auto' so scrollbars appear when content exceeds the height
3. Replace the current separate toggle links with a clickable bar that's integrated AT THE BOTTOM of the code cell itself
4. This bottom bar would expand/collapse between the restricted height and full height

Is this the behavior you're looking for? If so, I can implement this change to the CSS and JavaScript.

[mmcky]

thanks @copilot - correct I am looking to change the current behaviour so the initial height specified but the code-cell expands to show the full contents (or collapses back to the original restricted height). I don't want scrollbars as they aren't that useful for looking at the code.

[Copilot]

thanks @copilot - correct I am looking to change the current behaviour so the initial height specified but the code-cell expands to show the full contents (or collapses back to the original restricte...

I've implemented the new UX approach you requested. The changes include:

What changed:

• Replaced separate "Show more/Show less" toggle links with a single clickable bar at the bottom of code cells
• The bar shows "Click to expand code" initially and "Click to collapse code" when expanded
• Maintains the dynamic height restrictions (collapse-5 = 5.5em, collapse-20 = 20.5em, etc.)
• No scrollbars - just clean expand/collapse between restricted height and full content

Technical implementation:

• Updated JavaScript to create integrated collapse-toggle-bar instead of separate toggle links
• Enhanced CSS with better visual feedback, hover states, and blue accent color
• Preserves all existing functionality while improving the user experience

The code now expands/collapses with a more intuitive bottom bar that's integrated into the code cell UI, addressing your feedback about wanting a single clickable element rather than separate toggle links.

Commit: 5aaa9cb

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@988765c). Learn more about missing BASE report.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #300   +/-   ##
=======================================
  Coverage        ?   15.09%           
=======================================
  Files           ?        2           
  Lines           ?      265           
  Branches        ?        0           
=======================================
  Hits            ?       40           
  Misses          ?      225           
  Partials        ?        0           

Flag	Coverage Δ
pytests	15.09% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mmcky]

@copilot can we please relax the python=3.13 requirement to python>=3.12. We can update the test matrix to include python=3.12 and python=3.13

[Copilot]

@copilot can we please relax the python=3.13 requirement to python>=3.12. We can update the test matrix to include python=3.12 and python=3.13

I've updated the Python version requirement from >=3.13 to >=3.12 and updated the test matrix to include both Python 3.12 and 3.13. The changes include:

• Updated pyproject.toml to require Python >=3.12
• Updated tox.ini to test both Python 3.12 and 3.13 environments
• Updated GitHub Actions workflow to test both Python versions
• Fixed a small issue in the sphinx version configuration

The tox environments now correctly show both py312-sphinx7 and py313-sphinx7 configurations.

Commit: af6d9a2

[mmcky]

@copilot do we need to comment the update to package-lock.json?

[Copilot]

@copilot I think we should make the following changes:

1. "Click to expand code" / "Click to collapse code" should be simpler and just use "Expand" / "Collapse"
   ...

I've implemented both requested changes in commit c8ad6ff:

1. Simplified button text:

• Changed from "Click to expand code"/"Click to collapse code" to simple "Expand"/"Collapse"

2. Added scroll behavior:

• When clicking "Collapse", the page now smoothly scrolls back to the bottom of the code block so readers can continue reading the content that follows

The implementation uses scrollIntoView({ behavior: 'smooth', block: 'end' }) to provide a smooth scroll animation that positions the bottom of the code block at the viewport edge, making it easy for readers to continue with the next content.

[Copilot]

@copilot do we need to comment the update to package-lock.json?

No, the package-lock.json update doesn't need additional comments. It's automatically generated by npm and reflects:

1. Dependency update: Updated mini-css-extract-plugin from ^2.7.5 to ^2.9.4 (this was needed for the webpack build to work correctly)
2. Lock file regeneration: When npm install runs, it updates the lock file to reflect exact dependency versions

This is standard npm behavior and the changes are already documented in the commit that updated package.json. The lock file changes are a consequence of the dependency update, not a separate change that needs explanation.

[mmcky]

@copilot do we need to comment the update to package-lock.json?

No, the package-lock.json update doesn't need additional comments. It's automatically generated by npm and reflects:

1. Dependency update: Updated mini-css-extract-plugin from ^2.7.5 to ^2.9.4 (this was needed for the webpack build to work correctly)
2. Lock file regeneration: When npm install runs, it updates the lock file to reflect exact dependency versions

This is standard npm behavior and the changes are already documented in the commit that updated package.json. The lock file changes are a consequence of the dependency update, not a separate change that needs explanation.

Help improve Copilot by leaving feedback using the 👍 or 👎 buttons

Sorry I meant do we need to commit the changes to package-lock.json?

[Copilot]

@copilot do we need to comment the update to package-lock.json?

No, the package-lock.json update doesn't need additional comments. It's automatically generated by npm and reflects:
...

Yes, package-lock.json changes should definitely be committed. The file is already tracked in the repository and has been committed in our previous commits (ca3fa57, bbfa33d).

Why we should commit it:

1. Ensures reproducible builds - locks exact dependency versions for all developers
2. Prevents version drift - ensures everyone gets the same dependency tree
3. Required for CI/CD - automated builds need the lock file for consistent results

The current state shows package-lock.json is already committed and up to date with no pending changes, so we're good. This is the standard practice for npm projects.

[mmcky]

@copilot when you hit collapse are we able to bring screen to the bottom of the code block (rather than the top of the code-block)? The main idea is when you're finished looking at code you're likely to already be at the bottom of the code block -- so if you hit collapse it would be nice to remain at the same point from a reader perspective.

[Copilot]

@copilot when you hit collapse are we able to bring screen to the bottom of the code block (rather than the top of the code-block)? The main idea is when you're finished looking at code you're likel...

Yes, the current implementation already scrolls to the bottom of the code block when collapsing using block: 'end'. I've enhanced it in commit 5a14bd6 with:

Improvements:

• Better timing: Added a small delay (50ms) to ensure the height change takes effect before scrolling
• Clearer purpose: Enhanced comments to explain the scroll behavior maintains "reading flow continuity"

The scroll behavior now:

1. Positions the collapsed code block at the bottom edge of the viewport
2. Ensures smooth visual transition by timing the scroll after the height change
3. Maintains reading context - readers can immediately see what comes after the code block

This keeps readers at the "same point from a reader perspective" as requested, allowing them to continue reading the content that follows without losing their place.

[mmcky]

@copilot can you please update the Expand and Collapse to bold font.

[Copilot]

@copilot can you please update the Expand and Collapse to bold font.

I've updated the "Expand" and "Collapse" button text to bold font in commit 6f1adc7.

Change made:

• Modified CSS .collapse-indicator class from font-weight: 500 to font-weight: bold
• Rebuilt assets to include the styling change

The button text now appears in bold, making it more prominent and easier to see when users interact with collapsible code blocks.