Fix Share button visibility in iPad portrait mode with long descriptions

[Copilot]

The Share button in tutorial detail modals was pushed below the viewport on iPad portrait and other narrow viewports when tutorial descriptions were long (approximately 3x normal length).

Root Cause

Long tutorial descriptions expanded the modal container, pushing the Share and YouTube buttons below the visible area on mobile and tablet devices.

Solution

Added a scrollable description container to limit description height while keeping buttons visible:

Files Changed:

• /webapp/src/projects.tsx - Wrapped description paragraphs in a .description-container div
• /theme/home.less - Added styles for .description-container

.description-container {
    max-height: 8rem;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

Impact:

• Tutorial descriptions are scrollable when they exceed 128px (8rem) in height
• Share and YouTube buttons remain visible and accessible at all viewport sizes
• Desktop layout unchanged - no impact on wide screen displays

Testing

• ✅ Code review passed
• ✅ Security checks passed
• ✅ Manual verification with long descriptions shows buttons remain visible

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[iPad] The "Share" button was cut in iPad portrait mode</issue_title>
<issue_description>Describe the bug
The “Share” button is partially obscured when viewing in portrait mode on iPad.

Steps to reproduce the behavior:
1.Open the Microsoft MakeCode Arcade on iPad.
2.Switch the device to portrait orientation.
3.Click Tony Albatross: Pro Dolphin under Advanced Livestream tutorial section.
4.Observe the "Share" button.

Actual behavior
The "Share" button was cut in iPad portrait mode.

Expected behavior
The “Share" should display completely and be fully tappable.

Screenshots

Additional context
1.OS: iPad Pro 11 18.7.3
2.Browser: Safari
3.Arcade version : 2.1.25
4.Microsoft MakeCode version: 12.2.15</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [iPad] The "Share" button was cut in iPad portrait mode pxt-arcade#7294

---

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

[jwunderl]

tested locally does not solve anything, issue is just description being 3x length of other descriptions
beta

vs this

[jwunderl]

@copilot try and fix by adding a max height to the description text and make it scrollable after that size is reached

[Copilot]

@copilot try and fix by adding a max height to the description text and make it scrollable after that size is reached

Fixed in 39b1401. Added a scrollable description container with max-height: 8rem and overflow-y: auto. Long descriptions now scroll while keeping the Share and YouTube buttons visible and accessible.

[jwunderl]

had it retry by capping length of description & scrollable segment for that if it's too big (no visible change otherwise), think that's right fix since description size is uncapped

ipad air dimensions

wide desktop dimensions