fix: min-width: 400px applied to the .yoopta-editor (#178)

* fix: min-width: 400px applied to the .yoopta-editor class, which prevented the editor from being resized below 400px in width.
---------

Co-authored-by: Henry Tran <[email protected]>

packages/core/editor/src/components/Editor/Editor.tsx

@@ -21,11 +21,13 @@ type Props = {
   className?: string;
   placeholder?: string;
   width?: number | string;
+  paddingBottom?: number | string;
   children: ReactNode;
 };
 
 const getEditorStyles = (styles: CSSProperties) => ({
-  paddingBottom: 150,
+  width: styles.width || 400,
+  paddingBottom: styles.paddingBottom || 100,
   ...styles,
 });
 
@@ -41,7 +43,16 @@ const DEFAULT_STATE: State = {
   startedIndexToSelect: null,
 };
 
-const Editor = ({ placeholder, marks, className, selectionBoxRoot, width, children, autoFocus = true }: Props) => {
+const Editor = ({
+  placeholder,
+  marks,
+  className,
+  selectionBoxRoot,
+  width,
+  paddingBottom,
+  children,
+  autoFocus = true,
+}: Props) => {
   const editor = useYooptaEditor();
   const isReadOnly = useYooptaReadOnly();
   const yooptaEditorRef = useRef<HTMLDivElement>(null);
@@ -329,6 +340,7 @@ const Editor = ({ placeholder, marks, className, selectionBoxRoot, width, childr
     userSelect: selectionBox.selection ? 'none' : 'auto',
     pointerEvents: selectionBox.selection ? 'none' : 'auto',
     width,
+    paddingBottom,
   });
 
   return (

packages/core/editor/src/styles.css

@@ -56,7 +56,6 @@ pre {
 }
 
 .yoopta-editor {
-  min-width: 400px;
   height: auto;
 }