Fix MC text input styling

Ladysnake · Apr 3, 2024 · 42ae1de · 42ae1de
1 parent 4ba9dde
commit 42ae1de
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git 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
@@ -6,45 +6,44 @@
   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%;
   }
 
   .textarea-mirror, textarea {
     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
@@ -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
@@ -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, ...',