In Section Translation the process to start a new translation (T241590) involves the steps of search and confirmation. These are currently supported on mobile but on wider screens their elements become too far apart. This ticket proposes to make responsive adjustments to better adapt the UI to wider screens by following the same responsive column pattern used in the dashboard, which naturally constrains content width on larger screens while maintaining consistency across the application.
**Layout**
- On mobile: Takes full width(col-12)
- On tablet: Content constrained to 75% width(col-tablet-9)
- On desktop: Content further constrained to ~58% width(col-desktop-7)
- Components maintain consistent layout across all views:
- Article title and image
- Language selector
- Translation options
- License & Terms
- Close(X) button returns to dashboard.
- When starting new translation("New translation" button ----> search ------> select article):
- Use same responsive column approach
**Spacing**
- Add 'margin-block-start: 76px' to the confirmation screen to maintain visual consistency with the dashboard view.
- This spacing compensates for the dashboard elements(blue button, title, and filters)
|{F58394915 size=full}|
In addition, for desktop (when it leads to Content Translation), the option for translating the whole article (overwriting the existing one) will still be provided:
{F34131575, width=50%}