src/app/globals.css

@@ -62,12 +62,11 @@ table {
 table th,
 table td {
   border: 1px solid var(--border-color);
-  padding: 0;
+  padding: var(--spacing-sm);
   text-align: left;
   vertical-align: top;
   position: relative;
   min-width: 120px;
-  background-color: transparent;
 }
 
 table th {
@@ -145,33 +144,37 @@ table th {
    EDITABLE CELL STYLES
    ================================= */
 
-/* Spreadsheet-like cell styling */
 .editable-cell {
-  width: 100%;
-  min-height: 2.5rem;
-  max-height: 12rem;
-  display: flex;
-  align-items: flex-start;
-  padding: 0.5rem;
   position: relative;
-  overflow: hidden;
+  width: 100%;
+  min-height: 2rem;
 }
 
 .editable-cell input,
 .editable-cell textarea {
   width: 100%;
-  height: 100%;
-  background: transparent;
   border: none;
   outline: none;
+  background: transparent;
+  resize: none;
+  padding: var(--spacing-xs);
   font-family: inherit;
   font-size: inherit;
-  color: inherit;
-  padding: 0;
-  margin: 0;
-  resize: none;
+  transition: all 0.2s ease-in-out;
 }
 
+.editable-cell input:focus,
+.editable-cell textarea:focus {
+  background-color: #fef3c7;
+  border: 2px solid var(--color-warning);
+  border-radius: var(--border-radius);
+}
+
+.focused-cell {
+  background-color: #fef3c7 !important;
+  border: 2px solid var(--color-warning) !important;
+  border-radius: var(--border-radius);
+}
 
 /* =================================
    TYPEAHEAD STYLES

src/components/EditableCell.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 
 interface EditableCellProps {
   value: string;
@@ -63,40 +63,6 @@ export function EditableCell({
     }
   }, [focusedCell, cellKey, inputType]);
   
-  // Auto-resize textarea based on content
-  const autoResize = useCallback(() => {
-    if (inputType === 'textarea' && textareaRef.current) {
-      const textarea = textareaRef.current;
-
-      // Reset height to auto to get the correct scrollHeight
-      textarea.style.height = 'auto';
-
-      // Calculate the required height
-      const scrollHeight = textarea.scrollHeight;
-      const minHeight = 40; // 2.5rem = 40px
-      const maxHeight = 192; // 12rem = 192px
-
-      // Set height within bounds
-      const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
-      textarea.style.height = `${newHeight}px`;
-
-      // Enable scrolling if content exceeds max height
-      textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
-    }
-  }, [inputType]);
-
-  // Auto-resize on content change
-  useLayoutEffect(() => {
-    autoResize();
-  }, [localValue, autoResize]);
-
-  // Auto-resize on focus (in case content was updated externally)
-  useEffect(() => {
-    if (focusedCell === cellKey) {
-      autoResize();
-    }
-  }, [focusedCell, cellKey, autoResize]);
-  
   const handleInput = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const newValue = e.target.value;
     console.log('Input event for cell:', cellKey, newValue);
@@ -136,10 +102,8 @@ export function EditableCell({
   }, [inputType, commitInput, setFocusedCell, value]);
   
   const baseClassName = `
-    w-full h-full bg-transparent text-inherit
-    border-none outline-none focus:outline-none resize-none
-    placeholder:text-gray-400 dark:placeholder:text-gray-500
-    leading-relaxed
+    w-full px-2 py-1 border-none outline-none resize-none
+    focus:ring-2 focus:ring-blue-500 focus:ring-inset
     ${className}
   `.trim();
   
@@ -153,15 +117,9 @@ export function EditableCell({
           onFocus={handleFocus}
           onBlur={handleBlur}
           onKeyDown={handleKeyDown}
-          onInput={autoResize}
           placeholder={placeholder}
-          className={baseClassName}
-          style={{ 
-            minHeight: '2.5rem',
-            resize: 'none',
-            overflow: 'hidden'
-          }}
-          rows={1} // Start with single row
+          className={`${baseClassName} min-h-[2rem] max-h-32`}
+          rows={1}
         />
       </div>
     );

src/components/TypeaheadInput.tsx

@@ -331,9 +331,10 @@ export function TypeaheadInput({
   }, []);
   
   const baseInputClassName = `
-    w-full h-full bg-transparent text-inherit
-    border-none outline-none focus:outline-none
-    placeholder:text-gray-400 dark:placeholder:text-gray-500
+    w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
+    bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
+    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+    transition-all duration-200 ease-in-out
     ${className}
   `.trim();
   
@@ -468,7 +469,7 @@ export function TypeaheadInput({
   };
   
   return (
-    <div className="relative w-full h-full flex items-center">
+    <div className="relative">
       <input
         ref={inputRef}
         type="text"