Typesafe routing and CM line height issue

src-web/components/core/Dropdown.tsx

@@ -20,10 +20,9 @@ export type DropdownItem =
 export interface DropdownProps {
   children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
   items: DropdownItem[];
-  ignoreClick?: boolean;
 }
 
-export function Dropdown({ children, items, ignoreClick }: DropdownProps) {
+export function Dropdown({ children, items }: DropdownProps) {
   const [open, setOpen] = useState<boolean>(false);
   const ref = useRef<HTMLButtonElement>(null);
   const child = useMemo(() => {
@@ -36,7 +35,6 @@ export function Dropdown({ children, items, ignoreClick }: DropdownProps) {
       onClick:
         existingChild.props?.onClick ??
         ((e: MouseEvent<HTMLButtonElement>) => {
-          console.log('CLICK INSIDE');
           e.preventDefault();
           e.stopPropagation();
           setOpen((o) => !o);

src-web/components/core/Editor/Editor.css

@@ -24,6 +24,11 @@
             @apply text-placeholder;
         }
 
+        .cm-scroller {
+            /* Inherit line-height from outside */
+            line-height: inherit;
+        }
+
         /* Don't show selection on blurred input */
         .cm-selectionBackground {
             @apply bg-transparent;
@@ -54,17 +59,15 @@
 
     &.cm-singleline {
         .cm-editor {
-            @apply h-full w-full;
+            @apply w-full h-auto;
         }
 
         .cm-scroller {
-            @apply font-mono flex text-[0.8rem];
-            align-items: center !important;
-            overflow: hidden !important;
+            @apply font-mono text-[0.8rem] overflow-hidden;
         }
 
         .cm-line {
-            @apply px-0;
+            @apply px-2 overflow-hidden;
         }
     }
 
@@ -96,11 +99,12 @@
 }
 
 .cm-editor .cm-gutterElement {
+    @apply flex items-center;
     transition: color var(--transition-duration);
 }
 
 .cm-editor .fold-gutter-icon {
-    @apply pt-[0.3em] pl-[0.4em] px-[0.4em] h-4 cursor-pointer rounded;
+    @apply pt-[0.25em] pl-[0.4em] px-[0.4em] h-4 cursor-pointer rounded;
 }
 
 .cm-editor .fold-gutter-icon::after {
@@ -109,7 +113,7 @@
 }
 
 .cm-editor .fold-gutter-icon[data-open] {
-    @apply pt-[0.4em] pl-[0.3em];
+    @apply pt-[0.38em] pl-[0.3em];
 }
 
 .cm-editor .fold-gutter-icon[data-open]::after {

src-web/components/core/Input.tsx

@@ -46,7 +46,7 @@ export function Input({
   const id = `input-${name}`;
   const inputClassName = classnames(
     className,
-    '!bg-transparent pl-3 pr-2 min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
+    '!bg-transparent min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
     !!leftSlot && '!pl-0.5',
     !!rightSlot && '!pr-0.5',
   );
@@ -81,8 +81,8 @@ export function Input({
           'relative w-full rounded-md text-gray-900',
           'border border-gray-200 focus-within:border-focus',
           !isValid && '!border-invalid',
-          size === 'md' && 'h-md',
-          size === 'sm' && 'h-sm',
+          size === 'md' && 'h-md leading-md',
+          size === 'sm' && 'h-sm leading-sm',
         )}
       >
         {leftSlot}