From b4b29babfd475a723aef91bcff5e60b9d2fb3ecf Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 21 Dec 2024 05:39:11 -0800
Subject: [PATCH] Adjust markdown editor

---
 src-web/components/MarkdownEditor.tsx         | 25 +++++++++++++------
 src-web/components/WorkpaceSettingsDialog.tsx |  3 ++-
 .../components/WorkspaceActionsDropdown.tsx   |  2 +-
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src-web/components/MarkdownEditor.tsx b/src-web/components/MarkdownEditor.tsx
index 8d5f22d5..a58a728b 100644
--- a/src-web/components/MarkdownEditor.tsx
+++ b/src-web/components/MarkdownEditor.tsx
@@ -4,13 +4,14 @@ import { useRef } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useKeyValue } from '../hooks/useKeyValue';
-import {Editor} from "./core/Editor/Editor";
+import type { EditorProps } from './core/Editor/Editor';
+import { Editor } from './core/Editor/Editor';
 import { IconButton } from './core/IconButton';
 import { SplitLayout } from './core/SplitLayout';
 import { VStack } from './core/Stacks';
 import { Prose } from './Prose';
 
-interface Props {
+interface Props extends Pick<EditorProps, 'heightMode'> {
   placeholder: string;
   className?: string;
   defaultValue: string;
@@ -18,7 +19,14 @@ interface Props {
   name: string;
 }
 
-export function MarkdownEditor({ className, defaultValue, onChange, name, placeholder }: Props) {
+export function MarkdownEditor({
+  className,
+  defaultValue,
+  onChange,
+  name,
+  placeholder,
+  heightMode,
+}: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const [width] = useSize(containerRef.current);
@@ -39,13 +47,14 @@ export function MarkdownEditor({ className, defaultValue, onChange, name, placeh
 
   const editor = (
     <Editor
-      className="max-w-xl"
+      hideGutter
+      wrapLines
+      className="max-w-2xl max-h-full"
       language="markdown"
       defaultValue={defaultValue}
       onChange={onChange}
       placeholder={placeholder}
-      hideGutter
-      wrapLines
+      heightMode={heightMode}
     />
   );
 
@@ -96,11 +105,11 @@ export function MarkdownEditor({ className, defaultValue, onChange, name, placeh
     <div
       ref={containerRef}
       className={classNames(
-        'w-full h-full pt-1.5 group rounded-md grid grid-cols-[minmax(0,1fr)_auto]',
+        'w-full h-full pt-1.5 group rounded-md grid grid-cols-[minmax(0,1fr)_auto] grid-rows-1 gap-x-1.5',
         className,
       )}
     >
-      <div className="pr-8 h-full w-full">{contents}</div>
+      <div className="h-full w-full">{contents}</div>
       <VStack
         space={1}
         className="bg-surface opacity-20 group-hover:opacity-100 transition-opacity transform-gpu"
diff --git a/src-web/components/WorkpaceSettingsDialog.tsx b/src-web/components/WorkpaceSettingsDialog.tsx
index 2ad5dc55..a8941aaf 100644
--- a/src-web/components/WorkpaceSettingsDialog.tsx
+++ b/src-web/components/WorkpaceSettingsDialog.tsx
@@ -16,7 +16,7 @@ export function WorkspaceSettingsDialog({ workspaceId }: Props) {
   if (workspace == null) return null;
 
   return (
-    <VStack space={3} className="pb-3">
+    <VStack space={3} className="pb-3 max-h-[50vh]">
       <PlainInput
         label="Workspace Name"
         defaultValue={workspace.name}
@@ -29,6 +29,7 @@ export function WorkspaceSettingsDialog({ workspaceId }: Props) {
         className="min-h-[10rem] border border-border px-2"
         defaultValue={workspace.description}
         onChange={(description) => updateWorkspace.mutate({ description })}
+        heightMode='auto'
       />
     </VStack>
   );
diff --git a/src-web/components/WorkspaceActionsDropdown.tsx b/src-web/components/WorkspaceActionsDropdown.tsx
index 68d3fa3f..45d6cb9a 100644
--- a/src-web/components/WorkspaceActionsDropdown.tsx
+++ b/src-web/components/WorkspaceActionsDropdown.tsx
@@ -49,7 +49,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
     const extraItems: DropdownItem[] = [
       {
         key: 'workspace-settings',
-        label: 'Settings',
+        label: 'Workspace Settings',
         leftSlot: <Icon icon="settings" />,
         onSelect: async () => {
           dialog.show({