Skip to content

Fix project card timestamp overflow on iPad portrait#6879

Open
Copilot wants to merge 3 commits into
masterfrom
copilot/fix-timestamp-overflow-ipad-portrait
Open

Fix project card timestamp overflow on iPad portrait#6879
Copilot wants to merge 3 commits into
masterfrom
copilot/fix-timestamp-overflow-ipad-portrait

Conversation

Copy link
Copy Markdown

Copilot AI commented May 21, 2026

On narrow viewports (iPad portrait), the "a few seconds ago" timestamp in My Projects cards overflows the card boundary. The .ui.card.file .meta element in pxt-core has a fixed height: 4rem but at tablet widths (200px cards), the timestamp text wraps to multiple lines and spills out.

  • Reduce .meta font-size to 0.7rem and padding to 0.5rem at the tablet breakpoint (max-width: @largestTabletScreen) in the target theme override (theme/style.less), matching the approach already used at the mobile breakpoint in pxt-core. This ensures the timestamp text wraps properly and fits within the card rather than being cut off.

Add overflow:hidden to .ui.card.file .meta to prevent the
timestamp text from overflowing past the card boundary on
narrow screens.

Agent-Logs-Url: https://github.com/microsoft/pxt-microbit/sessions/c6b8fd46-2715-4049-b17b-3811c8e29c63

Co-authored-by: srietkerk <49178322+srietkerk@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix timestamp overflow in tutorial project card on iPad portrait Fix project card timestamp overflow on iPad portrait May 21, 2026
Copilot AI requested a review from srietkerk May 21, 2026 17:00
@srietkerk
Copy link
Copy Markdown
Contributor

@copilot This isn't the desired behavior. We do not want any content to be cutoff, which is what adding an overflow: hidden rule will do. It would be better to wrap the text content, so it fits within the dimensions of the card.

…flow hidden

Replace overflow:hidden with font-size and padding reduction at tablet
breakpoint. This matches the approach already used at the mobile breakpoint
in pxt-core, ensuring the timestamp text wraps and fits within the card
rather than being cut off.

Agent-Logs-Url: https://github.com/microsoft/pxt-microbit/sessions/6d947f28-6c28-43f2-ac11-209827e7375d

Co-authored-by: srietkerk <49178322+srietkerk@users.noreply.github.com>
Copy link
Copy Markdown
Author

Copilot AI commented May 21, 2026

@copilot This isn't the desired behavior. We do not want any content to be cutoff, which is what adding an overflow: hidden rule will do. It would be better to wrap the text content, so it fits with...

Replaced overflow: hidden with a font-size and padding reduction at the tablet breakpoint (max-width: @largestTabletScreen). This matches the approach already used at the mobile breakpoint in pxt-core's home.less (line 1094), so the timestamp text wraps properly and fits within the card instead of being cut off. See commit b3d3316.

@jwunderl jwunderl marked this pull request as ready for review May 22, 2026 15:39
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.

[iPad] Tutorial “Last updated” timestamp (“a few seconds ago”) overflows card boundary in portrait mode

2 participants