🎨 refactor: MessageInputTextArea の max-height をカスタムプロパティに変更

traPtitech · Feb 3, 2025 · bc316cb · bc316cb
1 parent 59eaba8
commit bc316cb
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    :class="$style.outerContainer"
-    :style="outerContainerStyle"
-  >
+  <div :class="$style.outerContainer" :style="outerContainerStyle">
     <icon-button
       v-if="showIsInputTextAreaExpandedButton"
       :class="$style.button"

diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -158,7 +158,7 @@ const textAreaAutoSizeMaxHeight = computed(() => {
 const scollbarWidth = getScrollbarWidth()
 const textareaAutosizeStyle = computed(() => ({
   '--input-scrollbar-width': `${scollbarWidth}px`,
-  'max-height': textAreaAutoSizeMaxHeight.value
+  '--max-height': textAreaAutoSizeMaxHeight.value
 }))
 
 const showIsInputTextAreaExpandedButton = defineModel<boolean>(
@@ -210,6 +210,7 @@ $vertical-padding: 8px;
   padding: $vertical-padding 16px;
   // 左から、余白、スタンプパレットボタン、余白、送信ボタン、スクロールバー
   padding-right: calc(8px + 24px + 8px + 24px + var(--input-scrollbar-width));
+  max-height: var(--max-height);
   &[readonly] {
     @include color-ui-secondary-inactive;
     cursor: wait;