From 8abeed3a2d32c65420f81f59126806968b6cc55d Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Fri, 24 Apr 2026 00:36:01 +0300
Subject: [PATCH 1/4] Fix: add top toolbar to the import screen

---
 src/css/import.scss                           |  1 +
 src/css/import/_migrate.scss                  | 10 +--
 src/css/import/_page.scss                     |  8 +++
 src/css/import/_upload.scss                   | 10 +--
 src/js/components/ImportMenu/ImportMenu.tsx   | 58 ++++++++++--------
 .../ImportMenu/MigrateForm/ImportOptions.tsx  |  2 +-
 .../MigrateForm/ImporterSelector.tsx          |  2 +-
 .../ImportMenu/MigrateForm/MigrateForm.tsx    |  4 +-
 .../MigrateForm/SimpleSnippetTable.tsx        |  4 +-
 .../SelectFiles/DuplicateActionSelector.tsx   |  2 +-
 .../UploadForm/SelectFiles/SelectFiles.tsx    |  2 +-
 .../SelectFiles/SelectedFilesList.tsx         |  4 +-
 .../SelectSnippets/ImportResultDisplay.tsx    |  6 +-
 .../SelectSnippets/SelectSnippets.tsx         |  4 +-
 src/js/components/common/Toolbar.tsx          | 61 ++++++++++++-------
 15 files changed, 105 insertions(+), 73 deletions(-)

diff --git a/src/css/import.scss b/src/css/import.scss
index 1de961a7..d79b507a 100644
--- a/src/css/import.scss
+++ b/src/css/import.scss
@@ -1,3 +1,4 @@
+@use 'common/toolbar';
 @use 'import/page';
 @use 'import/card';
 @use 'import/upload';
diff --git a/src/css/import/_migrate.scss b/src/css/import/_migrate.scss
index 9dc092ba..a36467b0 100644
--- a/src/css/import/_migrate.scss
+++ b/src/css/import/_migrate.scss
@@ -1,6 +1,6 @@
 
 .importer-selector-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -19,7 +19,7 @@
 }
 
 .import-options-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -80,7 +80,7 @@
 		background-color: #d63638;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 16px;
 		font-weight: 600;
@@ -114,7 +114,7 @@
 		margin-block-end: 16px;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 18px;
 		color: #333;
@@ -129,7 +129,7 @@
 		align-items: center;
 		margin-block-end: 10px;
 
-		h2 {
+		h3 {
 			margin: 0;
 		}
 
diff --git a/src/css/import/_page.scss b/src/css/import/_page.scss
index 14d32cd9..35cab436 100644
--- a/src/css/import/_page.scss
+++ b/src/css/import/_page.scss
@@ -1,3 +1,11 @@
+.wrap > h2:first-of-type {
+	font-size: 1.5rem;
+	font-weight: 400;
+	line-height: 1.3;
+	margin-block: 50px 1rem;
+	padding: 0;
+}
+
 .import-snippets-menu {
 	.narrow {
 		max-inline-size: 800px;
diff --git a/src/css/import/_upload.scss b/src/css/import/_upload.scss
index a4be5699..6f954b4f 100644
--- a/src/css/import/_upload.scss
+++ b/src/css/import/_upload.scss
@@ -9,7 +9,7 @@ $type-colors: (
 }
 
 .import-upload-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -86,7 +86,7 @@ $type-colors: (
 .selected-files {
 	margin-block-end: 20px;
 
-	h3 {
+	h4 {
 		margin: 0 0 12px;
 		font-size: 14px;
 		font-weight: 600;
@@ -138,7 +138,7 @@ $type-colors: (
 }
 
 .duplicate-action-selector-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -175,7 +175,7 @@ $type-colors: (
 		flex: 1;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 16px;
 		font-weight: 600
@@ -256,7 +256,7 @@ $type-colors: (
 		align-items: center;
 		margin-block-end: 10px;
 
-		h3 {
+		h4 {
 			margin: 0;
 		}
 
diff --git a/src/js/components/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
index bd089f8e..f54958c3 100644
--- a/src/js/components/ImportMenu/ImportMenu.tsx
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../hooks/useRestAPI'
 import { fetchQueryParam, updateQueryParam } from '../../utils/urls'
+import { Toolbar } from '../common/Toolbar'
 import { UploadForm } from './UploadForm/UploadForm'
 import { MigrateForm } from './MigrateForm/MigrateForm'
 import type { ReactNode } from 'react'
@@ -33,35 +34,38 @@ export const ImportMenu: React.FC = () => {
 	const [activeTab, setActiveTab] = useState<TabType>(getDefaultTab)
 
 	return (
-		<div className="import-snippets-menu wrap">
-			<h1>{__('Import Snippets', 'code-snippets')}</h1>
+		<>
+			<Toolbar />
+			<div className="import-snippets-menu wrap">
+				<h2>{__('Import Snippets', 'code-snippets')}</h2>
 
-			<div className="narrow">
-				<nav
-					className="nav-tab-wrapper"
-					aria-label={__('Import sources', 'code-snippets')}
-				>
-					{TABS.map(tab =>
-						<button
-							key={tab}
-							type="button"
-							className={classnames('nav-tab', { 'nav-tab-active': tab === activeTab })}
-							onClick={() => {
-								setActiveTab(tab)
-								updateQueryParam('tab', tab)
-							}}
-						>
-							{TAB_LABELS[tab]}
-						</button>)}
-				</nav>
+				<div className="narrow">
+					<nav
+						className="nav-tab-wrapper"
+						aria-label={__('Import sources', 'code-snippets')}
+					>
+						{TABS.map(tab =>
+							<button
+								key={tab}
+								type="button"
+								className={classnames('nav-tab', { 'nav-tab-active': tab === activeTab })}
+								onClick={() => {
+									setActiveTab(tab)
+									updateQueryParam('tab', tab)
+								}}
+							>
+								{TAB_LABELS[tab]}
+							</button>)}
+					</nav>
 
-				<WithRestAPIContext>
-					{TABS.map(tab =>
-						<div key={tab} className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}>
-							{TAB_CONTENT[tab]}
-						</div>)}
-				</WithRestAPIContext>
+					<WithRestAPIContext>
+						{TABS.map(tab =>
+							<div key={tab} className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}>
+								{TAB_CONTENT[tab]}
+							</div>)}
+					</WithRestAPIContext>
+				</div>
 			</div>
-		</div>
+		</>
 	)
 }
diff --git a/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx b/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
index 094357bb..9a86d9d2 100644
--- a/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx
@@ -8,7 +8,7 @@ export const ImportOptions: React.FC = () => {
 
 	return (
 		<ImportCard className="import-options-card">
-			<h2>{__('Import options', 'code-snippets')}</h2>
+			<h3>{__('Import options', 'code-snippets')}</h3>
 			<label>
 				<input
 					type="checkbox"
diff --git a/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx b/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx
index e3237266..a5569b97 100644
--- a/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx
@@ -13,7 +13,7 @@ export interface ImporterSelectorProps {
 export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) =>
 	<ImportCard variant="controls" className="importer-selector-card">
 		<label htmlFor="importer-select">
-			<h2>{__('Select plugin', 'code-snippets')}</h2>
+			<h3>{__('Select plugin', 'code-snippets')}</h3>
 		</label>
 
 		<select
diff --git a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
index d706f505..28126122 100644
--- a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
@@ -19,7 +19,7 @@ const StatusDisplay: React.FC<StatusDisplayProps> = ({ type, title, children })
 	<ImportCard variant="controls" className="import-section-status">
 		<div className={type}><span>{'error' === type ? '✕' : '✓'}</span></div>
 		<div>
-			<h3>{title}</h3>
+			<h4>{title}</h4>
 			<p>{children}</p>
 		</div>
 	</ImportCard>
@@ -55,7 +55,7 @@ const StatusMessages: React.FC = () => {
 				<ImportCard className="no-snippets-card">
 					<div className="card-inner">
 						<div className="card-icon">📭</div>
-						<h3>{__('No snippets found', 'code-snippets')}</h3>
+						<h4>{__('No snippets found', 'code-snippets')}</h4>
 						<p>{__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')}</p>
 					</div>
 				</ImportCard>)}
diff --git a/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx b/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
index 121c396e..9fe42356 100644
--- a/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
@@ -45,11 +45,11 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = props => {
 		<ImportCard className="migrate-snippets-table-card snippets-table-card">
 			<div>
 				<header>
-					<h2>{sprintf(
+					<h3>{sprintf(
 						// translators: %d: number of available snippets.
 						__('Available snippets (%d)', 'code-snippets'),
 						availableItems.length
-					)}</h2>
+					)}</h3>
 					<p>{__('We found the following snippets:', 'code-snippets')}</p>
 				</header>
 
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
index c5169469..a2eeef4c 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx
@@ -19,7 +19,7 @@ export interface DuplicateActionSelectorProps {
 
 export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ({ value, onChange }) =>
 	<ImportCard className="duplicate-action-selector-card">
-		<h2>{__('Duplicate snippets', 'code-snippets')}</h2>
+		<h3>{__('Duplicate snippets', 'code-snippets')}</h3>
 
 		<p className="description">
 			{__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')}
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx
index 551a518e..8ad466d8 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx
@@ -57,7 +57,7 @@ export const SelectFiles: React.FC<SelectFilesProps> = ({
 
 	return (
 		<ImportCard className="import-upload-card">
-			<h2>{__('Choose files', 'code-snippets')}</h2>
+			<h3>{__('Choose files', 'code-snippets')}</h3>
 			<p className="description">
 				{__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')}
 			</p>
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
index 8a44f208..8f7c8f7c 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
@@ -47,13 +47,13 @@ export interface SelectedFilesListProps {
 
 export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onRemoveFile }) =>
 	<div className="selected-files">
-		<h3>
+		<h4>
 			{sprintf(
 				// translators: %d: number of selected files.
 				__('Selected files: (%d)', 'code-snippets'),
 				files.length
 			)}
-		</h3>
+		</h4>
 
 		<div className="selected-files-list">
 			{files.map(file =>
diff --git a/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx b/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx
index 4f3a22d4..069f5be2 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx
@@ -22,12 +22,12 @@ export interface ImportResultDisplayProps {
 export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ success, message, warnings, step }) =>
 	<ImportCard className="import-result-display-card">
 		<div className={`import-result import-result-${success ? 'success' : 'failure'}`}>
-			<div className="import-result-icon">
+			<div className="import-result-icon" aria-hidden="true">
 				<span>{success ? '✓' : '✕'}</span>
 			</div>
 
 			<div>
-				<h3>
+				<h4>
 					{'upload' === step && (success
 						? __('File upload successful', 'code-snippets')
 						: __('File upload error', 'code-snippets'))}
@@ -35,7 +35,7 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ succes
 					{'select' === step && (success
 						? __('Import successful', 'code-snippets')
 						: __('Import error', 'code-snippets'))}
-				</h3>
+				</h4>
 
 				<p className="import-result-message">{message}</p>
 
diff --git a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
index 485d2157..008329b6 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
@@ -67,11 +67,11 @@ const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippe
 		<>
 			<div className="tablenav top">
 				<div>
-					<h3>{sprintf(
+					<h4>{sprintf(
 						// translators: %d: number of available snippets.
 						__('Available snippets (%d)', 'code-snippets'),
 						availableSnippets.length
-					)}</h3>
+					)}</h4>
 					<p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
 				</div>
 				<div className="table-actions">
diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index 2fe61a7d..56f7a7c4 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -14,6 +14,8 @@ interface NavLink {
 	external?: boolean
 	icon?: ReactNode
 	pro?: boolean
+	pageSlug?: string
+	subpage?: string
 }
 
 const UPPER_NAV_LINKS: NavLink[] = [
@@ -32,7 +34,8 @@ const UPPER_NAV_LINKS: NavLink[] = [
 	{
 		name: 'welcome',
 		url: window.CODE_SNIPPETS?.urls.welcome,
-		label: __("What's New", 'code-snippets')
+		label: __("What's New", 'code-snippets'),
+		pageSlug: 'code-snippets-welcome'
 	}
 ]
 
@@ -41,30 +44,35 @@ const LOWER_NAV_LINKS: NavLink[] = [
 		name: 'snippets',
 		url: window.CODE_SNIPPETS?.urls.manage,
 		label: __('Snippets', 'code-snippets'),
-		icon: <SnippetsIcon aria-hidden="true" />
+		icon: <SnippetsIcon aria-hidden="true" />,
+		pageSlug: 'snippets'
 	},
 	{
 		name: 'cloud-community',
 		label: __('Community Cloud', 'code-snippets'),
-		icon: <CommunityIcon aria-hidden="true" />
+		icon: <CommunityIcon aria-hidden="true" />,
+		subpage: 'cloud-community'
 	},
 	{
 		name: 'cloud-library',
 		label: __('My Library', 'code-snippets'),
 		icon: <LibraryIcon aria-hidden="true" />,
-		pro: true
+		pro: true,
+		subpage: 'cloud-library'
 	},
 	{
 		name: 'cloud-teams',
 		label: __('My Teams', 'code-snippets'),
 		icon: <TeamsIcon aria-hidden="true" />,
-		pro: true
+		pro: true,
+		subpage: 'cloud-teams'
 	},
 	{
 		name: 'settings',
 		url: window.CODE_SNIPPETS?.urls.settings,
 		label: __('Settings', 'code-snippets'),
-		icon: <SettingsIcon aria-hidden="true" />
+		icon: <SettingsIcon aria-hidden="true" />,
+		pageSlug: 'snippets-settings'
 	}
 ]
 
@@ -86,14 +94,14 @@ const UpperNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 
 		<nav aria-label={__('Main links', 'code-snippets')}>
 			<ul>
-				{UPPER_NAV_LINKS.map(({ name, url, label, external }) =>
-					<li key={name}>
+				{UPPER_NAV_LINKS.map(link =>
+					<li key={link.name}>
 						<a
-							href={url}
-							className={classnames(`${name}-link`, { 'active-link': currentPage?.endsWith(name) })}
-							{...external && { target: '_blank', rel: 'noopener noreferrer' }}
+							href={link.url}
+							className={classnames(`${link.name}-link`, { 'active-link': isActiveLink(link) })}
+							{...link.external && { target: '_blank', rel: 'noopener noreferrer' }}
 						>
-							{label}
+							{link.label}
 						</a>
 					</li>
 				)}
@@ -116,27 +124,38 @@ const UpperNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 		</nav>
 	</div>
 
-const currentPage = fetchQueryParam('subpage') ?? fetchQueryParam('page')
+const currentPage = fetchQueryParam('page')
+const currentSubpage = fetchQueryParam('subpage')
+
+const isActiveLink = ({ pageSlug, subpage }: NavLink): boolean => {
+	if (subpage) {
+		return currentSubpage === subpage
+	}
+	if (pageSlug) {
+		return !currentSubpage && currentPage === pageSlug
+	}
+	return false
+}
 
 const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 	<div className="code-snippets-toolbar-lower">
 		<nav aria-label={__('Main features', 'code-snippets')}>
 			<ul>
-				{LOWER_NAV_LINKS.map(({ name, url, label, pro, icon }) =>
-					<li key={name}>
+				{LOWER_NAV_LINKS.map(link =>
+					<li key={link.name}>
 						<a
-							href={url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: name })}
-							className={classnames(`${name}-link`, { 'active-link': currentPage?.endsWith(name) })}
+							href={link.url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: link.name })}
+							className={classnames(`${link.name}-link`, { 'active-link': isActiveLink(link) })}
 							onClick={event => {
-								if (pro && !isLicensed()) {
+								if (link.pro && !isLicensed()) {
 									event.preventDefault()
 									setIsUpsellDialogOpen(true)
 								}
 							}}
 						>
-							{icon}
-							<span>{label}</span>
-							{pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
+							{link.icon}
+							<span>{link.label}</span>
+							{link.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 						</a>
 					</li>)}
 			</ul>

From 6f2872d012cbbf36b4e5559004bbbc9a347e95f4 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Fri, 24 Apr 2026 00:57:54 +0300
Subject: [PATCH 2/4] Remove unnecessary wrapping `<div>` elements

---
 src/css/import/_card.scss                     |  1 +
 src/css/import/_migrate.scss                  |  4 -
 src/css/import/_page.scss                     | 11 +--
 src/css/import/_upload.scss                   |  4 -
 .../EditMenu/SnippetForm/SnippetForm.tsx      |  4 +-
 src/js/components/ImportMenu/ImportMenu.tsx   | 48 ++++++------
 .../ImportMenu/MigrateForm/MigrateForm.tsx    |  8 +-
 .../ImportMenu/UploadForm/UploadForm.tsx      | 74 +++++++++----------
 8 files changed, 68 insertions(+), 86 deletions(-)

diff --git a/src/css/import/_card.scss b/src/css/import/_card.scss
index aceb91dc..493fcdd2 100644
--- a/src/css/import/_card.scss
+++ b/src/css/import/_card.scss
@@ -28,6 +28,7 @@
 	border: 1px solid #e0e0e0;
 	margin-block-end: 10px;
 	inline-size: 100%;
+	box-sizing: border-box;
 
 	&.status-display {
 		display: flex;
diff --git a/src/css/import/_migrate.scss b/src/css/import/_migrate.scss
index a36467b0..c0d1a395 100644
--- a/src/css/import/_migrate.scss
+++ b/src/css/import/_migrate.scss
@@ -143,7 +143,3 @@
 		inline-size: 50px;
 	}
 }
-
-.migrate-form-container {
-	max-inline-size: 800px;
-}
diff --git a/src/css/import/_page.scss b/src/css/import/_page.scss
index 35cab436..428016bc 100644
--- a/src/css/import/_page.scss
+++ b/src/css/import/_page.scss
@@ -6,19 +6,14 @@
 	padding: 0;
 }
 
-.import-snippets-menu {
-	.narrow {
-		max-inline-size: 800px;
-	}
-
-	.nav-tab-wrapper {
-		margin-block-end: 20px;
-	}
+.nav-tab-wrapper {
+	margin-block-end: 20px;
 }
 
 .import-snippets-section {
 	padding-block-start: 0;
 	display: none;
+	max-inline-size: 800px;
 
 	&.active-section {
 		display: block;
diff --git a/src/css/import/_upload.scss b/src/css/import/_upload.scss
index 6f954b4f..acd0ae88 100644
--- a/src/css/import/_upload.scss
+++ b/src/css/import/_upload.scss
@@ -4,10 +4,6 @@ $type-colors: (
 	html: #ef6a36
 );
 
-.upload-form-container {
-	max-inline-size: 800px;
-}
-
 .import-upload-card {
 	h3 {
 		margin: 0 0 1em;
diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index c0868996..bd337e7b 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -147,7 +147,7 @@ const EditFormWrap: React.FC = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
 	return (
-		<div className="wrap">
+		<>
 			<PageHeading />
 			<Notices placement="above-form" />
 
@@ -172,7 +172,7 @@ const EditFormWrap: React.FC = () => {
 			</EditForm>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />
-		</div>
+		</>
 	)
 }
 
diff --git a/src/js/components/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
index f54958c3..f85df160 100644
--- a/src/js/components/ImportMenu/ImportMenu.tsx
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -39,32 +39,30 @@ export const ImportMenu: React.FC = () => {
 			<div className="import-snippets-menu wrap">
 				<h2>{__('Import Snippets', 'code-snippets')}</h2>
 
-				<div className="narrow">
-					<nav
-						className="nav-tab-wrapper"
-						aria-label={__('Import sources', 'code-snippets')}
-					>
-						{TABS.map(tab =>
-							<button
-								key={tab}
-								type="button"
-								className={classnames('nav-tab', { 'nav-tab-active': tab === activeTab })}
-								onClick={() => {
-									setActiveTab(tab)
-									updateQueryParam('tab', tab)
-								}}
-							>
-								{TAB_LABELS[tab]}
-							</button>)}
-					</nav>
+				<nav
+					className="nav-tab-wrapper"
+					aria-label={__('Import sources', 'code-snippets')}
+				>
+					{TABS.map(tab =>
+						<button
+							key={tab}
+							type="button"
+							className={classnames('nav-tab', { 'nav-tab-active': tab === activeTab })}
+							onClick={() => {
+								setActiveTab(tab)
+								updateQueryParam('tab', tab)
+							}}
+						>
+							{TAB_LABELS[tab]}
+						</button>)}
+				</nav>
 
-					<WithRestAPIContext>
-						{TABS.map(tab =>
-							<div key={tab} className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}>
-								{TAB_CONTENT[tab]}
-							</div>)}
-					</WithRestAPIContext>
-				</div>
+				<WithRestAPIContext>
+					{TABS.map(tab =>
+						<div key={tab} className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}>
+							{TAB_CONTENT[tab]}
+						</div>)}
+				</WithRestAPIContext>
 			</div>
 		</>
 	)
diff --git a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
index 28126122..3d843837 100644
--- a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
@@ -81,7 +81,7 @@ const MigrateFormInner: React.FC = () => {
 	}
 
 	return (
-		<div className="migrate-form-container">
+		<>
 			<p>{__('If you are using another snippets plugin, you can import those existing snippets to your Code Snippets library.', 'code-snippets')}</p>
 
 			<ImporterSelector
@@ -103,15 +103,13 @@ const MigrateFormInner: React.FC = () => {
 						isImporting={isWorking === MigrationStep.MigrateSnippets}
 					/>
 				</>)}
-		</div>
+		</>
 	)
 }
 
 export const MigrateForm: React.FC = () =>
 	<WithMigrationOptions>
 		<WithMigrationData>
-			<div className="wrap">
-				<MigrateFormInner />
-			</div>
+			<MigrateFormInner />
 		</WithMigrationData>
 	</WithMigrationOptions>
diff --git a/src/js/components/ImportMenu/UploadForm/UploadForm.tsx b/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
index dfe18189..7c52fcee 100644
--- a/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
+++ b/src/js/components/ImportMenu/UploadForm/UploadForm.tsx
@@ -23,50 +23,48 @@ export const UploadForm: React.FC = () => {
 	const [availableSnippets, setAvailableSnippets] = useState<ImportableSnippetSchema[]>([])
 
 	return (
-		<div className="wrap">
-			<div className="upload-form-container">
-				<p>{__('Upload one or more Code Snippets export files and the snippets will be imported.', 'code-snippets')}</p>
+		<>
+			<p>{__('Upload one or more Code Snippets export files and the snippets will be imported.', 'code-snippets')}</p>
 
-				<p>
-					{createInterpolateElement(
-						__('Afterward, you will need to visit the <a>All Snippets</a> page to activate the imported snippets.', 'code-snippets'),
-						{ a: <a href={window.CODE_SNIPPETS?.urls.manage} /> }
-					)}
-				</p>
+			<p>
+				{createInterpolateElement(
+					__('Afterward, you will need to visit the <a>All Snippets</a> page to activate the imported snippets.', 'code-snippets'),
+					{ a: <a href={window.CODE_SNIPPETS?.urls.manage} /> }
+				)}
+			</p>
 
-				{'upload' === currentStep && !importResult?.success && (
-					<>
-						<DuplicateActionSelector value={duplicateAction} onChange={setDuplicateAction} />
+			{'upload' === currentStep && !importResult?.success && (
+				<>
+					<DuplicateActionSelector value={duplicateAction} onChange={setDuplicateAction} />
 
-						<SelectFiles
-							{...{ fileInputRef, selectedFiles, setSelectedFiles, setImportResult }}
-							onSuccess={uploadedSnippets => {
-								setAvailableSnippets(uploadedSnippets)
-								setCurrentStep('select')
-							}}
-						/>
-					</>)}
+					<SelectFiles
+						{...{ fileInputRef, selectedFiles, setSelectedFiles, setImportResult }}
+						onSuccess={uploadedSnippets => {
+							setAvailableSnippets(uploadedSnippets)
+							setCurrentStep('select')
+						}}
+					/>
+				</>)}
 
-				{'select' === currentStep && 0 < availableSnippets.length && !importResult?.success && (
-					<SelectSnippets
-						duplicateAction={duplicateAction}
-						setImportResult={setImportResult}
-						availableSnippets={availableSnippets}
-						onCancel={() => {
-							setSelectedFiles(undefined)
+			{'select' === currentStep && 0 < availableSnippets.length && !importResult?.success && (
+				<SelectSnippets
+					duplicateAction={duplicateAction}
+					setImportResult={setImportResult}
+					availableSnippets={availableSnippets}
+					onCancel={() => {
+						setSelectedFiles(undefined)
 
-							if (fileInputRef.current) {
-								fileInputRef.current.value = ''
-							}
+						if (fileInputRef.current) {
+							fileInputRef.current.value = ''
+						}
 
-							setAvailableSnippets([])
-							setImportResult(undefined)
-							setCurrentStep('upload')
-						}}
-					/>)}
+						setAvailableSnippets([])
+						setImportResult(undefined)
+						setCurrentStep('upload')
+					}}
+				/>)}
 
-				{importResult && <ImportResultDisplay {...importResult} />}
-			</div>
-		</div>
+			{importResult && <ImportResultDisplay {...importResult} />}
+		</>
 	)
 }

From 1546ebd47df4db3fe3d72aaf7a6be00282e3d317 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Sat, 25 Apr 2026 19:41:18 +0300
Subject: [PATCH 3/4] Import screen accessibility

---
 .../ImportMenu/MigrateForm/MigrateForm.tsx           |  4 ++--
 .../UploadForm/SelectFiles/DragDropUploadArea.tsx    |  2 +-
 .../UploadForm/SelectFiles/SelectedFilesList.tsx     | 12 +++++++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
index 3d843837..8a933992 100644
--- a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
@@ -17,7 +17,7 @@ interface StatusDisplayProps {
 
 const StatusDisplay: React.FC<StatusDisplayProps> = ({ type, title, children }) =>
 	<ImportCard variant="controls" className="import-section-status">
-		<div className={type}><span>{'error' === type ? '✕' : '✓'}</span></div>
+		<div className={type} aria-hidden="true"><span>{'error' === type ? '✕' : '✓'}</span></div>
 		<div>
 			<h4>{title}</h4>
 			<p>{children}</p>
@@ -54,7 +54,7 @@ const StatusMessages: React.FC = () => {
 					0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
 				<ImportCard className="no-snippets-card">
 					<div className="card-inner">
-						<div className="card-icon">📭</div>
+						<div className="card-icon" aria-hidden="true">📭</div>
 						<h4>{__('No snippets found', 'code-snippets')}</h4>
 						<p>{__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')}</p>
 					</div>
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx
index 7c5d5f53..7525c23e 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx
@@ -46,7 +46,7 @@ export const DragDropUploadArea: React.FC<DragDropUploadAreaProps> = ({ fileInpu
 					handleFiles(event.dataTransfer.files)
 				}}
 			>
-				<div className="drop-zone-icon">📁</div>
+				<div className="drop-zone-icon" aria-hidden="true">📁</div>
 				<p>{__('Drag and drop files here, or click to browse', 'code-snippets')}</p>
 				<p>{__('Supports JSON and XML files', 'code-snippets')}</p>
 			</div>
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
index 8f7c8f7c..da8b6698 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
@@ -59,7 +59,7 @@ export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onR
 			{files.map(file =>
 				<div key={file.id}>
 					<div className="selected-file-details">
-						<span className="file-icon">📄</span>
+						<span className="file-icon" aria-hidden="true">📄</span>
 						<div>
 							<div><strong>{file.name}</strong></div>
 							<div className="file-size">{formatFileSize(file.file.size)}</div>
@@ -68,13 +68,19 @@ export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onR
 
 					<button
 						type="button"
-						title={__('Remove file', 'code-snippets')}
+						aria-label={
+							sprintf(
+								// translators: %s: file name.
+								__('Remove file %s', 'code-snippets'),
+								file.name
+							)
+						}
 						onClick={event => {
 							event.stopPropagation()
 							onRemoveFile(file)
 						}}
 					>
-						✕
+						<span aria-hidden="true">✕</span>
 					</button>
 				</div>
 			)}

From 726479bec2c5213089fb092fa0245b4ffd64676b Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Sat, 25 Apr 2026 21:49:04 +0300
Subject: [PATCH 4/4] Fix `wrap`class issues

---
 src/css/common/_toolbar.scss                                  | 4 ++--
 src/css/welcome.scss                                          | 2 +-
 src/js/components/ImportMenu/ImportMenu.tsx                   | 4 ++--
 .../components/ManageMenu/CommunityCloud/CommunityCloud.tsx   | 4 ++--
 src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx  | 4 ++--
 src/php/Admin/Menus/Admin_Menu.php                            | 2 +-
 src/php/Admin/Menus/Edit_Menu.php                             | 2 +-
 src/php/Admin/Menus/Import_Menu.php                           | 2 +-
 src/php/Admin/Menus/Manage_Menu.php                           | 2 +-
 src/php/Admin/Menus/Settings_Menu.php                         | 2 +-
 src/php/Admin/Menus/Welcome_Menu.php                          | 2 +-
 11 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 12faf84e..f693f3dd 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -1,7 +1,7 @@
 @use 'upsell';
 
 $toolbar-block-size: 150px;
-$wpbody-block-indent: 20px;
+$wpbody-block-indent: 22px;
 
 #wpbody {
 	padding-block-start: $toolbar-block-size;
@@ -62,7 +62,7 @@ $wpbody-block-indent: 20px;
 }
 
 .code-snippets-toolbar-lower {
-	border: 1px solid #c3c4c7;
+	border-block: 1px solid #c3c4c7;
 
 	ul {
 		display: flex;
diff --git a/src/css/welcome.scss b/src/css/welcome.scss
index ca4eebcc..4439729a 100644
--- a/src/css/welcome.scss
+++ b/src/css/welcome.scss
@@ -8,7 +8,7 @@ $breakpoint: 1060px;
 .code-snippets-welcome {
 	h2 {
 		font-size: 1.5rem;
-		font-weight: 500;
+		font-weight: 400;
 		line-height: 1.3;
 		padding: 0;
 		margin-block: 50px 1rem;
diff --git a/src/js/components/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
index f85df160..ea61938c 100644
--- a/src/js/components/ImportMenu/ImportMenu.tsx
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -36,7 +36,7 @@ export const ImportMenu: React.FC = () => {
 	return (
 		<>
 			<Toolbar />
-			<div className="import-snippets-menu wrap">
+			<>
 				<h2>{__('Import Snippets', 'code-snippets')}</h2>
 
 				<nav
@@ -63,7 +63,7 @@ export const ImportMenu: React.FC = () => {
 							{TAB_CONTENT[tab]}
 						</div>)}
 				</WithRestAPIContext>
-			</div>
+			</>
 		</>
 	)
 }
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index c6109564..174fb963 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -23,7 +23,7 @@ export const CommunityCloud = () => {
 	const [isUpsellDialogOpen, setIsUpsellDialogOpen] = useState(false)
 
 	return (
-		<div className="wrap">
+		<>
 			<h2>{__('Community Cloud', 'code-snippets')}</h2>
 
 			<nav
@@ -60,6 +60,6 @@ export const CommunityCloud = () => {
 				: null}
 
 			<UpsellDialog isOpen={isUpsellDialogOpen} setIsOpen={setIsUpsellDialogOpen} />
-		</div>
+		</>
 	)
 }
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 5d69f4ee..9967f58e 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -118,7 +118,7 @@ const SnippetsTableInner = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
 	return (
-		<div className="wrap">
+		<>
 			<PageHeading />
 
 			<nav
@@ -135,7 +135,7 @@ const SnippetsTableInner = () => {
 			</WithFilteredSnippetsContext>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />
-		</div>
+		</>
 	)
 }
 
diff --git a/src/php/Admin/Menus/Admin_Menu.php b/src/php/Admin/Menus/Admin_Menu.php
index aeb757e2..dc96c121 100644
--- a/src/php/Admin/Menus/Admin_Menu.php
+++ b/src/php/Admin/Menus/Admin_Menu.php
@@ -123,7 +123,7 @@ public function register() {
 	 * Render the navigation bar at the top of the admin page.
 	 */
 	protected function render_navigation() {
-		echo '<div id="code-snippets-toolbar-container"></div>';
+		echo '<div id="code-snippets-toolbar-container" class="wrap"></div>';
 	}
 
 	/**
diff --git a/src/php/Admin/Menus/Edit_Menu.php b/src/php/Admin/Menus/Edit_Menu.php
index 59591e36..fbb24dfd 100644
--- a/src/php/Admin/Menus/Edit_Menu.php
+++ b/src/php/Admin/Menus/Edit_Menu.php
@@ -134,7 +134,7 @@ protected function ensure_correct_page() {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="edit-snippet-container"></div>';
+		echo '<div id="edit-snippet-container" class="wrap"></div>';
 	}
 
 	/**
diff --git a/src/php/Admin/Menus/Import_Menu.php b/src/php/Admin/Menus/Import_Menu.php
index 17144da9..55cfb9b8 100644
--- a/src/php/Admin/Menus/Import_Menu.php
+++ b/src/php/Admin/Menus/Import_Menu.php
@@ -91,6 +91,6 @@ public function enqueue_assets() {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="import-container"></div>';
+		echo '<div id="import-container" class="wrap"></div>';
 	}
 }
diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index a2460b15..bda38a8f 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -284,7 +284,7 @@ protected function get_cloud_search_per_page(): int {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="manage-snippets-container"></div>';
+		echo '<div id="manage-snippets-container" class="wrap"></div>';
 	}
 
 	/**
diff --git a/src/php/Admin/Menus/Settings_Menu.php b/src/php/Admin/Menus/Settings_Menu.php
index 2981107d..aaefed54 100644
--- a/src/php/Admin/Menus/Settings_Menu.php
+++ b/src/php/Admin/Menus/Settings_Menu.php
@@ -198,7 +198,7 @@ public function render() {
 		$current_section = $this->get_current_section();
 
 		?>
-		<div class="code-snippets-settings wrap" data-active-tab="<?php echo esc_attr( $current_section ); ?>">
+		<div class="wrap" data-active-tab="<?php echo esc_attr( $current_section ); ?>">
 			<h2>
 				<?php
 				esc_html_e( 'Settings', 'code-snippets' );
diff --git a/src/php/Admin/Menus/Welcome_Menu.php b/src/php/Admin/Menus/Welcome_Menu.php
index bbe53914..51d0ff5a 100644
--- a/src/php/Admin/Menus/Welcome_Menu.php
+++ b/src/php/Admin/Menus/Welcome_Menu.php
@@ -43,7 +43,7 @@ public function __construct( $api ) {
 	 * @return void
 	 */
 	public function render() {
-		echo '<div id="code-snippets-welcome-container"></div>';
+		echo '<div id="code-snippets-welcome-container" class="wrap"></div>';
 	}
 
 	/**