fix: wrap rich input toolbar, closes #1588

apps/client/src/pages/builder/layout.tsx

@@ -41,8 +41,8 @@ export const BuilderLayout = () => {
         <PanelGroup direction="horizontal">
           <Panel
             minSizePixels={48}
-            maxSizePercentage={35}
+            maxSizePercentage={45}
-            defaultSizePercentage={28}
+            defaultSizePercentage={30}
             onResize={({ sizePercentage }) => leftSetSize(sizePercentage)}
             className={cn("z-10 bg-background", !leftHandle.isDragging && "transition-[flex]")}
           >
@@ -61,8 +61,8 @@ export const BuilderLayout = () => {
           />
           <Panel
             minSizePixels={48}
-            maxSizePercentage={35}
+            maxSizePercentage={45}
-            defaultSizePercentage={28}
+            defaultSizePercentage={30}
             onResize={({ sizePercentage }) => rightSetSize(sizePercentage)}
             className={cn("z-10 bg-background", !rightHandle.isDragging && "transition-[flex]")}
           >

libs/ui/src/components/rich-input.tsx

@@ -43,8 +43,6 @@ import { Button } from "./button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./form";
 import { Input } from "./input";
 import { Popover, PopoverContent } from "./popover";
-import { ScrollArea } from "./scroll-area";
-import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import { Toggle } from "./toggle";
 import { Tooltip } from "./tooltip";
@@ -137,9 +135,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
   }, [editor]);
 
   return (
-    <div className="absolute inset-x-0 top-2 px-2">
+    <div className="flex flex-wrap gap-0.5 border p-1">
-      <ScrollArea orientation="horizontal">
-        <div className="flex h-8 gap-1">
       <Tooltip content="Bold">
         <Toggle
           size="sm"
@@ -201,8 +197,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         </Button>
       </Tooltip>
 
-          <Separator orientation="vertical" className="mx-1" />
-
       <Tooltip content="Inline Code">
         <Toggle
           size="sm"
@@ -225,8 +219,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         </Toggle>
       </Tooltip>
 
-          <Separator orientation="vertical" className="mx-1" />
-
       <Tooltip content="Heading 1">
         <Toggle
           size="sm"
@@ -270,8 +262,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         </Toggle>
       </Tooltip>
 
-          <Separator orientation="vertical" className="mx-1" />
-
       <Tooltip content="Align Left">
         <Toggle
           size="sm"
@@ -316,8 +306,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         </Toggle>
       </Tooltip>
 
-          <Separator orientation="vertical" className="mx-1" />
-
       <Tooltip content="Bullet List">
         <Toggle
           size="sm"
@@ -364,14 +352,14 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         </Button>
       </Tooltip>
 
-          <Separator orientation="vertical" className="mx-1" />
-
       <Popover>
+        <Tooltip content="Insert Image">
           <PopoverTrigger asChild>
             <Button size="sm" variant="ghost" className="px-2">
               <ImageIcon />
             </Button>
           </PopoverTrigger>
+        </Tooltip>
         <PopoverContent className="w-80">
           <InsertImageForm onInsert={(props) => editor.chain().focus().setImage(props).run()} />
         </PopoverContent>
@@ -401,8 +389,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         </Button>
       </Tooltip>
 
-          <Separator orientation="vertical" className="mx-1" />
-
       <Tooltip content="Undo">
         <Button
           size="sm"
@@ -427,10 +413,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         </Button>
       </Tooltip>
     </div>
-      </ScrollArea>
-
-      <Separator className="mt-2" />
-    </div>
   );
 };
 
@@ -484,13 +466,13 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
     }
 
     return (
-      <div className="relative">
+      <div>
         {!hideToolbar && <Toolbar editor={editor} />}
 
         <EditorContent
           editor={editor}
           className={cn(
-            "grid min-h-[160px] w-full rounded-sm border bg-transparent px-3 pb-2 pt-14 text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+            "grid min-h-[160px] w-full rounded-sm border bg-transparent px-3 py-2 text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
             hideToolbar && "pt-2",
             className,
           )}