Move snippet type input next to name control.

Author: sheabunge

src/css/edit.scss

@@ -82,6 +82,15 @@
 	}
 }
 
+.snippet-name-wrapper {
+	display: flex;
+	gap: 0.5em;
+
+	> :first-child {
+		flex: 1;
+	}
+}
+
 form.condition-snippet .snippet-code-container {
 	display: none;
 }

src/css/edit/_form.scss

@@ -14,6 +14,7 @@ $sidebar-gap: 30px;
 	align-items: center;
 	justify-content: space-between;
 	flex-flow: row;
+	gap: 2em;
 
 	.small-badge {
 		margin-inline-start: 0.5em;

src/js/components/EditorSidebar/EditorSidebar.tsx

@@ -27,8 +27,6 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({ setIsUpgradeDialog
 
 	return (
 		<div className="snippet-editor-sidebar">
-			<SnippetTypeInput setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
-
 			<div className="box">
 				{snippet.id && !isCondition(snippet) ? <ActivationSwitch /> : null}
 

src/js/components/SnippetForm/SnippetForm.tsx

@@ -12,6 +12,7 @@ import { ConfirmDialog } from '../common/ConfirmDialog'
 import { UpsellDialog } from '../common/UpsellDialog'
 import { EditorSidebar } from '../EditorSidebar'
 import { UpsellBanner } from '../common/UpsellBanner'
+import { SnippetTypeInput } from './fields/SnippetTypeInput'
 import { TagsEditor } from './fields/TagsEditor'
 import { CodeEditor } from './fields/CodeEditor'
 import { DescriptionEditor } from './fields/DescriptionEditor'
@@ -158,7 +159,11 @@ const EditFormWrap: React.FC = () => {
 
 			<EditForm className={editFormClassName({ snippet, isReadOnly, isExpanded })}>
 				<main className="snippet-form-upper">
-					<NameInput />
+					<div className="snippet-name-wrapper">
+						<NameInput />
+						<SnippetTypeInput setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
+					</div>
+
 					<CodeEditor {...{ isExpanded, setIsExpanded }} />
 					<ConditionsEditor />
 				</main>

src/js/components/SnippetForm/fields/SnippetTypeInput.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { __, _x } from '@wordpress/i18n'
 import Select from 'react-select'
+import type { FormatOptionLabelContext } from 'react-select'
 import { useSnippetForm } from '../../../hooks/useSnippetForm'
 import { SNIPPET_TYPE_SCOPES } from '../../../types/Snippet'
 import { isLicensed } from '../../../utils/screen'
@@ -31,14 +32,21 @@ const OPTIONS: SelectOption<SnippetType>[] = [
 	{ value: 'cond', label: __('Conditions', 'code-snippets') }
 ]
 
-const SnippetTypeOption: React.FC<SelectOption<SnippetType>> = ({ label, value }) =>
+interface SnippetTypeOptionProps {
+	option: SelectOption<SnippetType>
+	context: FormatOptionLabelContext
+}
+
+const SnippetTypeOption: React.FC<SnippetTypeOptionProps> = ({ option: { value, label }, context }) =>
 	<div className={classnames('snippet-type-option', { 'inverted-badges': isProType(value) && !isLicensed() })}>
-		<div>
-			{label}
-			{isProType(value) && !isLicensed()
-				? <span className="badge pro-badge small-badge">{_x('Pro', 'Upgrade to Pro', 'code-snippets')}</span>
-				: null}
-		</div>
+		{'menu' === context
+			? <div>
+				{label}
+				{isProType(value) && !isLicensed()
+					? <Badge name="pro" small>{_x('Pro', 'Upgrade to Pro', 'code-snippets')}</Badge>
+					: null}
+			</div>
+			: null}
 		<Badge name={value} />
 	</div>
 
@@ -69,12 +77,19 @@ export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgrade
 				className="code-snippets-select"
 				isDisabled={isReadOnly}
 				options={0 === snippet.id ? OPTIONS : OPTIONS.filter(option => 'cond' !== option.value)}
+				menuPlacement="bottom"
 				styles={{
-					menu: provided => ({ ...provided, zIndex: 9999 }),
+					menu: provided => ({
+						...provided,
+						zIndex: 9999,
+						width: 'max-content',
+						minWidth: '100%'
+					}),
 					input: provided => ({ ...provided, boxShadow: 'none' })
 				}}
 				value={OPTIONS.find(option => option.value === snippetType)}
-				formatOptionLabel={SnippetTypeOption}
+				formatOptionLabel={(data, meta) =>
+					<SnippetTypeOption option={data} context={meta.context} />}
 				onChange={option => {
 					if (option && isProType(option.value) && !isLicensed()) {
 						setIsUpgradeDialogOpen(true)