💄 feat: IsInputTextAreaExpandedButton が上部に位置するように調整

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

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -204,7 +204,6 @@ $radius: 4px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: flex-end;
 
   &[data-is-archived] {
     @include color-ui-secondary-inactive;

diff --git a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="$style.outerContainer">
+  <div
+    :class="$style.outerContainer"
+    :style="outerContainerStyle"
+  >
     <icon-button
       v-if="showIsInputTextAreaExpandedButton"
       :class="$style.button"
@@ -67,6 +70,12 @@ const isPreviewShownValue = computed<boolean>({
     emit('update:isLeftControlsExpanded', false)
   }
 })
+
+const outerContainerStyle = computed(() => ({
+  '--justify-content': props.showIsInputTextAreaExpandedButton
+    ? 'space-between'
+    : 'flex-end'
+}))
 </script>
 
 <style lang="scss" module>
@@ -75,6 +84,7 @@ const isPreviewShownValue = computed<boolean>({
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: var(--justify-content);
 }
 .innerContainer {
   @include color-ui-secondary;