From ab5e31b29fcf1bb70ab6fcf8abee17b54deddc95 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 29 May 2025 11:48:25 +0200
Subject: [PATCH] styling

---
 src/Components/Input/TextAreaInput.tsx        | 11 ++++++----
 src/Components/Profile/Templates/TabsForm.tsx |  2 +-
 src/assets/css/easymde.css                    | 20 ++++++++++++++++---
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index 95bb1710..ac8ae1b0 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -38,14 +38,15 @@ export function TextAreaInput({
 
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const [containerHeight, setContainerHeight] = useState<string>('100%')
+  const [containerHeight, setContainerHeight] = useState<string>('0px')
 
   useEffect(() => {
     if (containerRef.current) {
       const height = containerRef.current.offsetHeight
-      setContainerHeight(`${height - 200}px`)
+      setContainerHeight(`${height - 61}px`)
+      console.log(height)
     }
-  }, [])
+  }, [containerStyle])
 
   useEffect(() => {
     setInputValue(defaultValue)
@@ -75,9 +76,11 @@ export function TextAreaInput({
       status: false,
       lineNumbers: false,
       minHeight: size === 'small' ? '100%' : '100%',
-      maxHeight: size === 'small' ? '30px' : containerHeight,
+      maxHeight: size === 'small' ? '50px' : containerHeight,
       forceSync: true,
       autoDownloadFontAwesome: false,
+      nativeSpellcheck: false,
+      spellChecker: false,
       /*
           autoDownloadFontAwesome?: boolean;
           autofocus?: boolean;
diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx
index 07f49c98..8fcb47c8 100644
--- a/src/Components/Profile/Templates/TabsForm.tsx
+++ b/src/Components/Profile/Templates/TabsForm.tsx
@@ -101,7 +101,7 @@ export const TabsForm = ({
                 }))
               }
               size='full'
-              containerStyle='tw:grow'
+              containerStyle='tw:grow tw:h-full'
               inputStyle={`tw:h-full  ${!item.layer.itemType.show_start_end_input && 'tw:border-t-0 tw:rounded-tl-none'}`}
             />
             <TextAreaInput
diff --git a/src/assets/css/easymde.css b/src/assets/css/easymde.css
index 0ea9add3..41b09426 100644
--- a/src/assets/css/easymde.css
+++ b/src/assets/css/easymde.css
@@ -49,7 +49,12 @@
   .CodeMirror {
     background-color: var(--color-base-100) !important;
     color: var(--color-base-content) !important;
-    caret-color: var(--color-base-content) !important;
+    border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)!important;
+    border-end-start-radius: var(--radius-field) !important;
+    border-end-end-radius: var(--radius-field) !important;
+    border-width: var(--border) !important;
+    border-top-width: 0 !important;
+
   }
 
   .editor-preview-side {
@@ -57,7 +62,16 @@
     color: var(--color-base-content) !important;
   }
 
-  .hide-toolbar .EasyMDEContainer .editor-toolbar {
-    display: none;
+  .editor-toolbar {
+    padding: 3px 10px !important;
+    border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)!important;
+    border-start-start-radius: var(--radius-field) !important;
+    border-start-end-radius: var(--radius-field) !important;
+    border-width: var(--border) !important;
+  }
+
+  .separator {
+    border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)!important;
+    border-width: 1px !important;
   }
 }
\ No newline at end of file