From 596c791844d113e228fbda49649a1f5b0dda5a99 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 5 Jul 2023 21:02:31 +1000
Subject: [PATCH] fix(ui): fix prompt resize & style resizer

---
 .../web/src/theme/components/textarea.ts      | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/theme/components/textarea.ts b/invokeai/frontend/web/src/theme/components/textarea.ts
index 85e6e37d3f..b737cf5e57 100644
--- a/invokeai/frontend/web/src/theme/components/textarea.ts
+++ b/invokeai/frontend/web/src/theme/components/textarea.ts
@@ -1,7 +1,28 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
 
-const invokeAI = defineStyle((props) => getInputOutlineStyles(props));
+const invokeAI = defineStyle((props) => ({
+  ...getInputOutlineStyles(props),
+  '::-webkit-scrollbar': {
+    display: 'initial',
+  },
+  '::-webkit-resizer': {
+    backgroundImage: `linear-gradient(135deg,
+      var(--invokeai-colors-base-50) 0%,
+      var(--invokeai-colors-base-50) 70%,
+      var(--invokeai-colors-base-200) 70%,
+      var(--invokeai-colors-base-200) 100%)`,
+  },
+  _dark: {
+    '::-webkit-resizer': {
+      backgroundImage: `linear-gradient(135deg,
+        var(--invokeai-colors-base-900) 0%,
+        var(--invokeai-colors-base-900) 70%,
+        var(--invokeai-colors-base-800) 70%,
+        var(--invokeai-colors-base-800) 100%)`,
+    },
+  },
+}));
 
 export const textareaTheme = defineStyleConfig({
   variants: {