Fix Editor style in Both mode by OpenCode

islands/Editor.tsx

@@ -224,13 +224,13 @@ export default function Editor(props: EditorProps) {
   };
 
   return (
-    <div className="w-full flex justify-between box-border overflow-hidden flex-shrink-0 flex-grow-1">
+    <div className="w-full flex gap-3 box-border overflow-hidden flex-shrink-0 flex-grow-1">
       {props.allowMode !== EditorMode.Read
         ? (
           <div
-            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-shrink-0 flex-basis-0 flex-grow-1 custom-scrollbar ${
-              mode === EditorMode.Both ? "mr-1.5" : ""
-            } ${mode === EditorMode.Read ? "hidden" : ""}`}
+            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-1 min-w-0 custom-scrollbar ${
+              mode === EditorMode.Read ? "hidden" : ""
+            }`}
             ref={editViewRef}
           >
             <Textarea
@@ -256,9 +256,9 @@ export default function Editor(props: EditorProps) {
       {props.allowMode !== EditorMode.Edit
         ? (
           <div
-            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-shrink-0 flex-basis-0 flex-grow-1 p-1.5 custom-scrollbar ${
-              mode === EditorMode.Both ? "ml-1.5" : ""
-            } ${mode === EditorMode.Edit ? "hidden" : ""}`}
+            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-1 min-w-0 p-1.5 custom-scrollbar ${
+              mode === EditorMode.Edit ? "hidden" : ""
+            }`}
             ref={readViewRef}
             onScroll={() => {
               onScroll(EditorMode.Read);