Fix card mapping visibility on mobile for long translations#2662
Fix card mapping visibility on mobile for long translations#2662sydseter merged 3 commits intoOWASP:masterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR makes small responsive typography/layout adjustments in the Cornucopia Svelte UI to improve readability and spacing of card text when rendered in the browser-card-container (notably under the (max-aspect-ratio: 1.5/1) breakpoint).
Changes:
- Tweaks responsive font sizes and adds explicit
line-heightfor better text legibility. - Adds extra top spacing for the first mapping title in multiple mapping components under the narrow-aspect media query.
- Slightly adjusts responsive description text sizing in the card preview.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| cornucopia.owasp.org/src/lib/components/webAppCardMapping.svelte | Refines responsive mapping typography and adds first-title top spacing. |
| cornucopia.owasp.org/src/lib/components/mobileAppCardMapping.svelte | Adds first-title top spacing under the responsive breakpoint. |
| cornucopia.owasp.org/src/lib/components/companionCardMapping.svelte | Adds first-title top spacing under the responsive breakpoint. |
| cornucopia.owasp.org/src/lib/components/cardPreview.svelte | Adjusts responsive description font-size and line-height for readability. |
You can also share your feedback on Copilot code review. Take the survey.
cornucopia.owasp.org/src/lib/components/webAppCardMapping.svelte
Outdated
Show resolved
Hide resolved
|
Three cards still have issues: /edition/webapp/C8/3.0/ru#card |
Thanks for testing! Yes, I was initially testing with just the VE2/2.2/ru card to verify the approach. I can see that some cards with even longer descriptions still have the issue. |
|
Hey @sydseter , have a look at this. |
|
@Mysterio-17 perfect! |
Great, also if the issue still persists after this PR is merged, I would be glad to try out more options to fix it. |
Changes
This PR addresses the issue #2646 where mapping information (STRIDE, OWASP DevGuide, OWASP ASVS, CAPEC, SAFECODE) was invisible on mobile devices for cards with longer translations, particularly noticeable in the Russian translation.
Modified Files
cardPreview.svelte: Adjusted description font size from 3.2vw to 3.1vw and added line-height: 1.3 for better text compression on mobilewebAppCardMapping.svelte: Reduced mapping font size to 1.9vw, added line-height: 1.2, and adjusted top margin to 1.5vwcompanionCardMapping.svelte: Added consistent top margin (2vw) for mapping sectionmobileAppCardMapping.svelte: Added consistent top margin (2vw) for mapping sectionWhy
The card has a fixed aspect ratio (20/32) with overflow hidden. When translations are longer (like Russian), the description text pushes the mapping section below the visible area. By slightly reducing font sizes and tightening line heights, all content now fits within the card boundaries while maintaining readability.
Testing
Tested on mobile viewport with the Russian translation at
/edition/webapp/VE2/2.2/ru#cardIf the issue still persists after this PR is merged, I would be glad to try out more options to fix it.