The initial version of the "Contribute" persistent entry point is available (T286466). This ticket proposes responsive adjustments and styling to better integrate the menu in the different mobile and desktop contexts.
Below is the current status on mobile (English and Bengali) and Desktop (English and Bengali) on the beta cluster, and the proposed adjustments.
| Current Mobile (bn) | Current Desktop (bn) | Proposed Mobile (en) | Proposed Desktop (en) |
|---|---|---|---|
 |  |  |  |
More details below about the specific changes proposed.
Adjustments for wider screens
- Two cards per row on wider screens. On Desktop and Tablet, the options to contribute will be displayed showing two on each row with a separation of 24px between cards (and 32px distance to the edges).
| Current | Proposed |
|---|---|
 | |
Based on the breakpoint proposal (T303522), this applies to:
- @min-width-breakpoint-desktop-wide 1680px and more
- @min-width-breakpoint-desktop 1120px - 1679px
- @min-width-breakpoint-tablet 640px - 1119px
Adjustments for narrow screens
- Edge-to-edge background on mobile. Cards are displayed on a grey background, on mobile this background has some additional margin that makes it look like a grey box on a white background. Making the margin to be 0px solves the issue as illustrated below.
| Current | Proposed |
|---|---|
 |  |
- Avoid extra space below last card. On mobile the intended spacing between cards is 24px vertically and 16px of spacing to the sides. The current implementation follows this, however additional space is added at the bottom of the last card that should be removed.
Based on the breakpoint proposal (T303522), this applies to:
- @min-width-breakpoint-mobile 320px - 639px
Adjustments for all screens
- Use a lighter grey for card background. Initially Base80 (#eaecf0) was proposed for the background of cards but the lighter Base90 (#f8f9fa) is preferred instead to better align it with the side menu on desktop.
- Add border to the cards. A border will help better distinguish cards once the lighter background is used. The border will be 1px border using Base70 (#C8CCD1) or "border-subtle" token for color.
| Current | Proposed |
|---|---|
 |  |
- Make action link bold and increase spacing. The action in blue shown at the bottom of the text can benefit from some adjustments to make it more clear: adjust font weight to bold and 4px of space above it.
| Current | Proposed |
|---|---|
 |  |
