Fix small view

src-web/components/Dialog.tsx

@@ -30,27 +30,25 @@ export function Dialog({
         <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
           <D.Overlay className="fixed inset-0 bg-gray-900/60 dark:bg-black/50" />
           <D.Content>
-            <div className={classnames(className, 'fixed inset-0')}>
+            <div
-              <div
+              className={classnames(
-                className={classnames(
+                className,
-                  className,
+                'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-100',
-                  'absolute z-10 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-100',
+                'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
-                  'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
+                'border border-gray-200 shadow-lg',
-                  'border border-gray-200 shadow-lg',
+                wide && 'w-[80vw] max-w-[50rem]',
-                  wide && 'w-[80vw] max-w-[50rem]',
+              )}
-                )}
+            >
-              >
+              <D.Close asChild className="ml-auto absolute right-1 top-1">
-                <D.Close asChild className="ml-auto absolute right-1 top-1">
+                <IconButton aria-label="Close" icon="x" size="sm" />
-                  <IconButton aria-label="Close" icon="x" size="sm" />
+              </D.Close>
-                </D.Close>
+              <VStack space={3}>
-                <VStack space={3}>
+                <HStack items="center" className="pb-3">
-                  <HStack items="center" className="pb-3">
+                  <D.Title className="text-xl font-semibold">{title}</D.Title>
-                    <D.Title className="text-xl font-semibold">{title}</D.Title>
+                </HStack>
-                  </HStack>
+                {description && <D.Description>{description}</D.Description>}
-                  {description && <D.Description>{description}</D.Description>}
+                <div>{children}</div>
-                  <div>{children}</div>
+              </VStack>
-                </VStack>
-              </div>
             </div>
           </D.Content>
         </motion.div>

src-web/components/Editor/Editor.css

@@ -5,7 +5,8 @@
         @apply relative;
 
         .cm-editor {
-            @apply inset-0;
+            @apply inset-0 absolute;
+            position: absolute !important;
         }
     }
 }
@@ -25,10 +26,6 @@
         @apply text-placeholder;
     }
 
-    .cm-scroller {
-        @apply font-mono text-[0.8rem];
-    }
-
     .cm-gutters {
         @apply border-0 text-gray-500 text-opacity-30;
 
@@ -55,8 +52,9 @@
     }
 
     .cm-scroller {
+        @apply font-mono flex text-[0.8rem];
+        align-items: center !important;
         overflow: hidden !important;
-        font-family: inherit;
     }
 
     .cm-line {
@@ -67,25 +65,13 @@
 .cm-multiline {
     .cm-editor {
         @apply h-full;
-        position: absolute !important;
     }
 
     .cm-scroller {
-        @apply rounded;
+        @apply font-mono text-[0.75rem];
     }
 }
 
-
-.cm-multiline .cm-editor.cm-focused .cm-scroller {
-    /* Active border state if we want it */
-    /*box-shadow: 0 0 0 1px hsl(var(--color-blue-400)/0.4);*/
-}
-
-.cm-singleline .cm-editor .cm-scroller {
-    @apply flex;
-    align-items: center !important;
-}
-
 .cm-editor .cm-gutterElement {
     transition: color var(--transition-duration);
 }

src-web/components/Editor/Editor.tsx

@@ -149,11 +149,15 @@ function getExtensions({
     ...(ext ? [ext] : []),
     ...(placeholder ? [placeholderExt(placeholder)] : []),
 
-    // Handle onSubmit
     ...(singleLine
       ? [
           EditorView.domEventHandlers({
+            focus: (e, view) => {
+              // select all text on focus, like a regular input does
+              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
+            },
             keydown: (e) => {
+              // Submit nearest form on enter if there is one
               if (e.key === 'Enter') {
                 const el = e.currentTarget as HTMLElement;
                 const form = el.closest('form');
@@ -163,6 +167,16 @@ function getExtensions({
           }),
         ]
       : []),
+
+    // Clear selection on blur
+    EditorView.domEventHandlers({
+      blur: (e, view) => {
+        setTimeout(() => {
+          view.dispatch({ selection: { anchor: 0, head: 0 } });
+        }, 100);
+      },
+    }),
+
     // Handle onChange
     EditorView.updateListener.of((update) => {
       if (typeof onChange === 'function' && update.docChanged) {

src-web/lib/theme/window.ts

@@ -8,7 +8,7 @@ const darkTheme: AppTheme = {
   appearance: 'dark',
   layers: {
     root: {
-      blackPoint: 0.15,
+      blackPoint: 0.1,
       whitePoint: 0.95,
       colors: {
         gray: '#656196',
@@ -35,7 +35,7 @@ const lightTheme: AppTheme = {
         gray: '#7f8fb0',
         red: '#e13939',
         orange: '#da881f',
-        yellow: '#e3b22d',
+        yellow: '#cb9f2a',
         green: '#37c237',
         blue: '#1365ff',
         pink: '#e861e8',