Fix/search form container

[Futadaruma]

close #300
表示崩れの解決策に議論の余地があるとのことでしたが、flex-wrapを追加する方法にしました
また、FormInput.vueを呼び出しているページ・コンポーネントを確認したところhttps://portfolio-admin.trap.jp/projects でも同じ表示崩れがあったので同じように対応しました

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review スタイルの適用 .input クラスに width: 100% を追加することで、入力要素が全幅を取るように設定されています。これにより他のスタイルとの競合がないか確認が必要です。 レイアウト調整 .searchFormContainer に flex-wrap: wrap を追加し、要素が折り返されるように設定されています。これによる他のデバイスや画面サイズでの影響を検証する必要があります。 レイアウト調整 .searchFormContainer に flex-wrap: wrap を追加し、要素が折り返されるように設定されています。これによる他のデバイスや画面サイズでの影響を検証する必要があります。

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	.input クラスから width: 100%; を削除して、flex-grow のみに依存するように修正します。 .input クラスに width: 100%; を追加すると、他のスタイルとの競合が発生する可能性があります。特に、flex-grow: 1; が設定されている場合、width: 100%; は不要かもしれません。flex-grow はコンテナ内で利用可能なスペースを元に要素を拡大縮小しますが、width: 100%; は要素に常に全幅を取るよう指示します。これにより、予期しないレイアウトの問題が発生する可能性があります。 src/components/UI/FormInput.vue [78] .input { flex-grow: 1; - width: 100%; } Suggestion importance[1-10]: 8 Why: The suggestion correctly identifies a potential conflict between flex-grow: 1; and width: 100%;, which could lead to unexpected layout issues. Removing width: 100%; allows the element to grow based on available space, improving flexibility and preventing layout problems.	8
Enhancement	.searchFormContainer の align-items を center から stretch に変更して、要素の縦位置を均一にします。 .searchFormContainer に flex-wrap: wrap; を追加することで、コンテナ内の要素が適切に折り返されるようになりますが、これにより縦の間隔が不均一になる可能性があります。特に、align-items: center; が設定されている場合、要素の縦位置が中央揃えからずれることがあります。この問題を解決するために、align-items: stretch; を検討してみてはいかがでしょうか。これにより、すべての要素がコンテナの高さに合わせて伸縮します。 src/pages/Contests.vue [60] .searchFormContainer { display: flex; flex-wrap: wrap; - align-items: center; + align-items: stretch; } Suggestion importance[1-10]: 7 Why: Changing align-items to stretch can help maintain consistent vertical alignment when elements wrap, which is a sensible enhancement. However, it may not be crucial unless specific layout issues are observed.	7
	.searchFormContainer の gap を調整して、縦横の間隔を一貫性のあるものにします。 .searchFormContainer に flex-wrap: wrap; を追加したことで、要素が折り返されるようになりましたが、gap: 0.5rem; が設定されているため、折り返し時の間隔が縦横で一貫性がなくなる可能性があります。gap の値を調整するか、追加のCSSルールを適用して、縦横の間隔を調整することをお勧めします。 src/pages/Projects.vue [62] .searchFormContainer { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: 1rem 0.5rem; } Suggestion importance[1-10]: 6 Why: Adjusting the gap property to ensure consistent spacing when elements wrap is a good enhancement for layout consistency. However, the suggestion is more of a stylistic improvement rather than addressing a critical issue.	6

[mehm8128]

今サーバー側が準備できてなくて使ってないのであれなのですが、src/pages/Events.vueにも同じような箇所があると思うのでそこも合わせて直しておいてほしいです 🙏

[mehm8128]

よさそうです！:kansya: