From 42ae1de2df1a5ee3463f66fcf8ac7de02aa256a7 Mon Sep 17 00:00:00 2001
From: Pyrofab <pyrofab@ladysnake.org>
Date: Thu, 4 Apr 2024 00:39:21 +0200
Subject: [PATCH] Fix MC text input styling

---
 svelte_sprinkles/src/lib/McTextInput.svelte   |  8 ++++----
 svelte_sprinkles/src/lib/ResizingInput.svelte | 19 +++++++++++--------
 .../editor/state/StateTextInput.svelte        |  3 ---
 .../state/choice/DialogueStateChoices.svelte  |  2 +-
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/svelte_sprinkles/src/lib/McTextInput.svelte b/svelte_sprinkles/src/lib/McTextInput.svelte
index e1d595f7..b13a88cb 100644
--- a/svelte_sprinkles/src/lib/McTextInput.svelte
+++ b/svelte_sprinkles/src/lib/McTextInput.svelte
@@ -10,9 +10,8 @@
   }>();
 
   export let id: string | undefined = undefined;
-  let className: string | undefined = undefined;
-  // noinspection ReservedWordAsName
-  export {className as class};
+  export let inputClass: string | undefined = undefined;
+  export let containerClass: string | undefined = undefined;
   export let placeholders: Record<McTextType, string> | undefined = undefined;
   export let value: McText = '';
   export let textFormat: McTextType = $dialogueTextFormat;
@@ -50,7 +49,8 @@
   }
 </script>
 <ResizingInput
-  class={className}
+  containerClass={containerClass}
+  inputClass={inputClass}
   id={id}
   placeholder={placeholder}
   value={importDialogueText(value)}
diff --git a/svelte_sprinkles/src/lib/ResizingInput.svelte b/svelte_sprinkles/src/lib/ResizingInput.svelte
index f87569aa..483b2cba 100644
--- a/svelte_sprinkles/src/lib/ResizingInput.svelte
+++ b/svelte_sprinkles/src/lib/ResizingInput.svelte
@@ -6,32 +6,30 @@
   export let maxRows: number | undefined;
   export let id: string | undefined = undefined;
   export let placeholder: string | undefined = undefined;
-  let className: string | undefined = undefined;
-  // noinspection ReservedWordAsName
-  export {className as class};
+  export let containerClass: string | undefined = undefined;
+  export let inputClass: string | undefined = undefined;
   export let action: Action<HTMLTextAreaElement | HTMLInputElement> = () => {};
 
   $: minHeight = `${1 + minRows * 1.2}em`;
   $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 </script>
 
-<div class="textarea-container ${className}">
+<div class="textarea-container ${containerClass}">
   {#if maxRows === undefined || maxRows > 1}
     <div
       aria-hidden="true"
       class="textarea-mirror"
       style="min-height: {minHeight}; max-height: {maxHeight}"
     >{value + '\n'}</div>
-    <textarea id={id} placeholder={placeholder} bind:value on:change use:action></textarea>
+    <textarea id={id} class={inputClass} placeholder={placeholder} bind:value on:change use:action></textarea>
   {:else}
-    <input id={id} placeholder={placeholder} bind:value on:change use:action/>
+    <input id={id} class={inputClass} placeholder={placeholder} bind:value on:change use:action/>
   {/if}
 </div>
 
 <style>
   .textarea-container {
     position: relative;
-    overflow-x: scroll;
     width: 100%;
   }
 
@@ -39,12 +37,13 @@
     font-family: inherit;
     padding: 0.5em;
     box-sizing: border-box;
-    border: 1px solid #eee;
+    border: 1px solid var(--button-outline);
     line-height: 1.2;
     overflow: hidden;
   }
 
   .textarea-mirror {
+    visibility: hidden;
     white-space: pre-wrap;
   }
 
@@ -55,4 +54,8 @@
     top: 0;
     resize: none;
   }
+
+  input {
+    width: 100%;
+  }
 </style>
diff --git a/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateTextInput.svelte b/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateTextInput.svelte
index 85ff780f..a7386d99 100644
--- a/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateTextInput.svelte
+++ b/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateTextInput.svelte
@@ -34,7 +34,4 @@
 </div>
 
 <style>
-  .not-dialogue-ending {
-    overflow-x: auto;
-  }
 </style>
diff --git a/svelte_sprinkles/src/sprinkles/parlour/editor/state/choice/DialogueStateChoices.svelte b/svelte_sprinkles/src/sprinkles/parlour/editor/state/choice/DialogueStateChoices.svelte
index cf3d5e20..affa459e 100644
--- a/svelte_sprinkles/src/sprinkles/parlour/editor/state/choice/DialogueStateChoices.svelte
+++ b/svelte_sprinkles/src/sprinkles/parlour/editor/state/choice/DialogueStateChoices.svelte
@@ -104,7 +104,7 @@
         <td class="col-text input-cell">
           <McTextInput
             value={item.text}
-            class="table-input"
+            inputClass="table-input"
             textFormat={$dialogueTextFormat}
             placeholders={{
               [McTextType.PLAIN]: 'Thank you, ...',