Merge pull request #151 from KevinBatdorf/fix-overflow-issue

Author: KevinBatdorf

pattern-css.php

@@ -5,7 +5,7 @@
  * Description:       Lightening Fast, Safe, In-editor CSS Optimization and Minification Tool
  * Requires at least: 6.7
  * Requires PHP:      7.0
- * Version:           1.5.1
+ * Version:           1.5.2
  * Author:            Kevin Batdorf
  * Author URI:        https://twitter.com/kevinbatdorf
  * License:           GPL-2.0-or-later

readme.txt

@@ -2,7 +2,7 @@
 Contributors:      kbat82
 Tags:              block, css, styles, inline, editor
 Tested up to:      6.8
-Stable tag:        1.5.1
+Stable tag:        1.5.2
 License:           GPL-2.0-or-later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -141,6 +141,9 @@ Add this to functions.php:
 
 == Changelog ==
 
+= 1.5.2 - 2025-05-21 =
+- Fixes an overflow bug in the editor
+
 = 1.5.1 - 2025-05-18 =
 - Retagging for release
 

src/components/BlockControl.tsx

@@ -183,7 +183,7 @@ export const BlockControl = (
 					<PopoutEditor>
 						<>
 							<div
-								className="relative flex-grow"
+								className="overfow-x-hidden relative flex-grow overflow-y-auto border border-solid border-gray-600"
 								ref={editorWrapperRef}>
 								<CodeEditor
 									value={css ?? defaultCssExample}

src/components/CodeEditor.tsx

@@ -34,20 +34,20 @@ export const CodeEditor = forwardRef((props: CodeEditorProps, ref) => {
 
 	if (loading)
 		return (
-			<div className="lex h-full min-h-52 items-center justify-center border border-solid border-gray-600 bg-gray-100 p-4 text-gray-900">
+			<div className="flex h-full min-h-52 items-center justify-center p-4 text-gray-900">
 				{'Loading...'}
 			</div>
 		);
 	if (editorError) return <p>{editorError.message}</p>;
 
 	return (
-		<div ref={textAreaRef} className="h-full">
+		<div ref={textAreaRef} className="">
 			<Editor
 				// eslint-disable-next-line
 				// @ts-ignore-next-line
 				ref={ref}
 				value={decodeEntities(value)}
-				className="h-full border border-solid border-gray-600 font-jetbrains-mono"
+				className="h-full font-jetbrains-mono"
 				onValueChange={onChange}
 				{...remainingProps}
 				padding={{

src/components/EditorControls.tsx

@@ -56,7 +56,7 @@ export const EditorControls = ({
 						className="lowercase hover:bg-gray-100 hover:text-gray-900">
 						{
 							// translators: Popout as in Popout the editor
-							__('Global Styles', 'pattern-css')
+							__('Global', 'pattern-css')
 						}
 					</Button>
 				</Tooltip>
@@ -77,7 +77,8 @@ export const EditorControls = ({
 					</Tooltip>
 				)}
 				{popoutOpen ? (
-					<Tooltip text={__('Toggle highlight', 'pattern-css')}>
+					<Tooltip
+						text={__('Highlight the current block', 'pattern-css')}>
 						<Button
 							size="small"
 							variant="tertiary"
@@ -90,7 +91,7 @@ export const EditorControls = ({
 							className={`lowercase hover:bg-gray-100 hover:text-gray-900 ${
 								isHighlighted ? 'bg-gray-100' : ''
 							}`}>
-							{__('Highlight Block', 'pattern-css')}
+							{__('Highlight', 'pattern-css')}
 						</Button>
 					</Tooltip>
 				) : null}

src/components/FloatingWindow.tsx

@@ -55,7 +55,7 @@ export const FloatingWindow = forwardRef<HTMLDivElement, FloatingWindowProps>(
 					style={{ top, left, width, height }}
 					ref={ref}>
 					<>
-						<div className="flex items-center justify-between">
+						<div className="flex flex-shrink-0 items-center justify-between">
 							<div
 								data-pcss-handle
 								draggable
@@ -73,12 +73,12 @@ export const FloatingWindow = forwardRef<HTMLDivElement, FloatingWindowProps>(
 								showTooltip={false}
 							/>
 						</div>
-						<div className="relative z-50 flex h-full flex-col px-4 pb-4">
+						<div className="relative z-50 flex min-h-0 flex-grow flex-col px-4 pb-4">
 							{children}
 						</div>
 						<div
 							data-pcss-resize
-							className="absolute bottom-0 right-0 z-high h-6 w-6">
+							className="absolute -bottom-1 -right-1 z-high h-6 w-6">
 							<div className="h-6 w-6 cursor-se-resize border border-l-0 border-t-0 border-solid border-transparent transition-colors duration-300 hover:border-gray-600 active:border-gray-600" />
 						</div>
 					</>

src/components/GlobalEditor.tsx

@@ -164,30 +164,35 @@ const TheEditor = ({
 	}, [savingState]);
 
 	return (
-		<div className="relative flex-grow" ref={editorWrapperRef}>
-			<CodeEditor
-				value={css}
-				onChange={handleChange}
-				lineOptions={warnings.map(({ loc }) => ({
-					line: loc.line,
-					classes: ['line-error'],
-				}))}
-			/>
+		<div className="relative flex min-h-0 flex-grow flex-col">
+			<div
+				className="min-h-0 flex-grow overflow-y-auto overflow-x-hidden border border-solid border-gray-600"
+				ref={editorWrapperRef}>
+				<CodeEditor
+					value={css}
+					onChange={handleChange}
+					lineOptions={warnings.map(({ loc }) => ({
+						line: loc.line,
+						classes: ['line-error'],
+					}))}
+				/>
+			</div>
 			{savingState === 'saving' && (
-				<div className="absolute bottom-px right-1 z-10 flex items-center justify-center bg-white/50">
-					<span className="text-sm text-gray-700 dark:text-gray-400">
+				<div className="absolute bottom-px right-1 z-10 flex items-center justify-center bg-white p-1">
+					<span className="text-sm text-gray-700">
 						{__('Saving...', 'pattern-css')}
 					</span>
 				</div>
 			)}
 			{savingState === 'saved' && (
-				<div className="absolute bottom-px right-1 z-10 flex items-center justify-center bg-white/50">
+				<div className="absolute bottom-px right-1 z-10 flex items-center justify-center bg-white p-1">
 					<Icon
 						icon={check}
+						size={20}
 						className="stroke-gray-700"
 						color="currentColor"
 					/>
-					<span className="text-sm text-gray-700 dark:text-gray-400">
+					<span className="text-sm text-gray-700">
 						{__('Saved!', 'pattern-css')}
 					</span>
 				</div>