fix: responsive settings navigation with carousel fallback on small screens

[utsav-develops]

fixes: #1802

What is this change?

Replaces the fixed horizontal Tabs layout in the settings AppBar with a responsive navigation system:

• On large screens (lg+): all four tabs (Jira, Bitbucket, General, Explore) remain visible with save controls right-aligned
• On smaller screens: arrow-based carousel shows one section at a time, centered in the toolbar
• "Save settings to:" label hidden on small screens, icon controls remain visible

Logic changes below to transfer the toggle button from left to right

atlascode/src/react/atlascode/config/ProductEnabler.tsx

Lines 23 to 38 in 00e4207

	<Grid container justifyContent="center" alignItems="center" spacing={1}>
	<Grid item>
	<Tooltip title={enabled ? `Disable ${label} features` : `Enable ${label} features`}>
	<Switch
	color="primary"
	size="small"
	checked={enabled}
	onClick={stopProp}
	onChange={toggleProduct}
	/>
	</Tooltip>
	</Grid>
	<Grid item>
	<span>{label}</span>
	</Grid>
	</Grid>

How has this been tested?

Manually tested in the VS Code extension webview at multiple window sizes. Verified tab switching works correctly in both modes.

Basic checks:

• npm run lint
• npm run test

Before:

After:

[atlassian]

To enable Rovo Dev code reviews, link your GitHub account to your Atlassian account.

This is a one-time task that takes less than a minute. Once your account is linked, resubmit the pull request to trigger a code review.